abox.tools

言語: 日本語

SVGを適切な大きさのPNGに変換する方法

変換そのものは簡単なほうです。結果が使えるかどうかを決めるのは、誰も答えを渡してくれない問い、つまり「何ピクセルにするか」のほうです。ここでは、その数値がどこから来るのか、そして図がピクセルになる途中で何を失うのかを説明します。

SVG→画像変換ツールを開く サイズを指定するだけ。ベクターには、失うサイズがそもそもありません。

Markdownで表示

短い答え

SVGを画像にを開いてファイルを入れ、大きさを指定します。どの大きさにすべきか誰にも言われていないなら、長辺1024ピクセルが良い初期値です。たいていの用途に十分大きく、メールで送れる程度には小さい値です。形式はPNGのまま、背景は透過のまま、そのままファイルを受け取ってください。

以下は、その初期値では足りない場合の話です。数値を指定されたとき、印刷に回すとき、そして出てきたものがおかしく見えるときです。

プレビューのカード。指定した大きさで描かれた図と、その下のピクセル寸法。
ツールは保存する前に、しかも保存する大きさで描いてみせます。書き出しの不具合はまずここに出ます。

大きさがファイルではなく、こちらの判断である理由

JPEGは測られたピクセルの格子なので、どれだけの大きさかという問いには答えがあります。SVGはそもそも画像ではなく、指示の集まりです。ここに円を描け、この線をこの色で。そして指示に大きさはありません。ブラウザはそれを16ピクセルでも4000ピクセルでも実行できますし、どちらでも同じだけ鮮明です。拡大縮小しているのではなく、描き直しているからです。

だから変換が代わりに数値を選ぶことはできませんし、大きな数値を選んでも何の代償もありません。「大きくして」が無料である唯一の画像処理が、これです。

たいていのSVGファイルはwidthとheightの属性を持っており、道具はそれを表示します。ですがそれは初期値であって、上限ではありません。width="24"と書かれたアイコンが言っているのは、描いた人が24ピクセルのツールバーを念頭に置いていた、ということだけです。

その数値が実際どこから来るのか

ウェブサイトの場合。その画像がページ上で占める大きさをCSSピクセルで取り、気にかけている画面のピクセル密度を掛けます。幅200ピクセルの枠に入るロゴには、RetinaのノートPCには400ピクセル、最近のスマホには600のファイルが必要です。@2xと@3xの意味はそれで全部ですし、それらを書き出す道具が、同じ計算を3回する手間を省いてくれる理由でもあります。

アプリのアイコン、ストアの掲載画像、ファビコンの場合。数値は公開されていて、考えることは何もありません。ストアのページに書かれたとおり、正確にです。ファビコンについては、そもそも書き出さないでください。.icoを作ってください。1つのファイルに複数のサイズを収められるからです。ブラウザのタブ、ブックマーク、Windowsのショートカットは、それぞれ別のサイズを求めます。

印刷の場合。インチ単位の物理的な大きさに、プリンターの解像度を掛けます。名刺に幅2インチで入るロゴを300 DPIで刷るなら600ピクセル。同じロゴをA4の幅いっぱい、8.3インチに置くなら約2500です。印刷所は当然のように300 DPIを求めますし、部屋の向こうから見る大判の横断幕なら150で十分です。

SNSのプレビューやOG画像の場合。プラットフォームが枠を指定してきます。リンクのプレビューは、たいてい1200 × 630です。そしてその枠は、手元のロゴとは違う形をしています。「余白で埋める」の設定は、そのためのものです。図は自分の比率のまま中央に置かれ、残りは背景色で埋まります。引き伸ばされたロゴは、確かめなかったことを全員に知らせてしまいます。

2つが同時に当てはまるなら、大きいほうを使ってください。必要より大きいPNGはダウンロードがわずかに大きいだけですが、小さすぎるPNGはあとから直せません。その理由は、次の節にあります。

サイズのカード。大きさの言い方を並べたメニューが幅に設定され、1024が入力され、横に定番の幅が並んでいます。
同じことを言う五通りのやり方です。どれが正しいかは、数字を渡されたのか、置き場所を渡されたのかで決まります。

戻る道はありません

ピクセル化は一方通行です。いったんPNGになれば、それはほかの画像と同じピクセルであり、あとから拡大するには、一度も測られなかった細部を発明するしかありません。写真を拡大したときと同じ、ぼやけて滲んだ結果です。

ですからSVGを取っておいてください。それが原本であり、たいていファイルも小さく、将来のどの大きさもそこから完璧に出てきます。PNGは、ひとつの特定の用途のための書き出しです。別の大きさが必要になったときの正しい動きは、書き出したものをリサイズすることではなく、もう一度書き出すことです。

PNGをSVGに戻せると謳うソフトもあります。それがしているのはトレース、つまりピクセルの格子を説明できそうな曲線を推測することです。平坦な2色の図版ならそれなりに動きますが、それ以外では高くつく無意味なものを作りますし、元の図が持っていたものを取り戻すことは決してありません。

ピクセルになった瞬間に変わる3つのこと

書き出したSVGがおかしく見えるとき、その理由はほぼ必ずこの3つのどれかです。そして3つとも、書き出したあとではなく前に知っておく価値があります。

文字は、その端末にあるフォントで描かれます。文字を含むSVGは、フォントを含んでいません。名前を指定して、探すのは描画側に任せます。そのフォントが入っていなければ代替が使われますが、代替は字形も字幅も違うので、文字が折り返したりはみ出したりします。ウェブアドレスからフォントを取ってくるファイルは、もっと分が悪くなります。<img>を通してピクセル化されるSVGは、そもそも何も取りに行くことを許されていないので、何も届きません。

直し方は、どのデザイナーもすでに知っているものです。SVGを書き出す前に、文字をアウトラインに変換することです(Illustratorでは「アウトラインを作成」、Figmaでは「Flatten」、Inkscapeでは「オブジェクトをパスへ」)。文字が図形になり、フォントは関係なくなり、どの端末でも同じに見えます。複製に対して行ってください。アウトライン化した文字は、もう文字として編集できません。

髪の毛のような線が灰色になるか、消えます。選んだ大きさで1ピクセル未満になる線幅は、実線として描けないので、薄い線として描かれます。繊細なロゴを64ピクセルで書き出すと色あせて見えるのに、同じファイルを512で出すと完璧に見えるのは、このためです。小さいサイズが要件なら、答えは書き出し設定を変えることではなく、線を太くして単純化した図を用意することです。ファビコンがワードマークではなくシンボルである理由と、同じです。

アニメーションは止まります。アニメーションするSVGは、1枚の静止画になります。最初のフレームが何であれ、それになります。これを変える書き出し設定はありません。動きが必要なら、別のやり方で作ったGIFか動画が必要です。

透過と、どの形式を選ぶか

理由がなければPNGです。可逆で、透過を保ち、平坦な色と硬い輪郭がよく圧縮されます。図のほとんどは、それでできています。ピクセル化されたロゴは、JPEGにした場合より小さなPNGになるのがふつうですし、しかもきれいです。

JPEGには、透過がまったくありません。透過だったピクセルはすべて何かの色にならなければならず、誰も色を選ばなければ黒になります。人が不具合だと思う「黒い四角の上のロゴ」は、ここから来ています。しかも、まさにこの種の画像でいちばん目立つ形で非可逆です。硬い輪郭のすべてを、斑点の輪が取り囲みます。何かがそれを要求してくる場合に使ってください。

WebPはPNGにできることをすべて、より小さなファイルでこなしますし、現行のどのブラウザも読めます。使わない理由は、ブラウザのあとに起きることです。古いソフト、いくつかの印刷所、そしてかなりの数のアップロードフォームが、いまだにこれを開けません。

PNGで背景色を選ぶのも、まったくふつうの要望です。透過が役に立つのは、その画像が着地する先が予測できない色である場合だけです。白いページだと最初からわかっているなら、白に合成しておけば、まるごとひとつの驚きの種類を避けられます。

書き出しが真っ白、あるいはおかしいとき

空白しかありません。たいていはルート要素のxmlns属性が抜けています。それがないファイルは、画像タグにとってSVGではなく、何も描かれません。ブラウザでファイルを開くのが、手早い試験です。ブラウザでも何も出ないなら、問題は変換器ではなくファイルのほうです。

図が小さく、左上の隅にあります。ファイルにwidthとheightはあるのにviewBoxがないので、拡大縮小すべき座標系がなく、図版は大きなキャンバスの上で元の単位を保ったままになります。まともな変換器はviewBoxを入れてくれますが、そうでなければ、ルート要素にviewBox="0 0 width height"を手で足せば直ります。ファイルは素のテキストなので、それができます。

図の一部が欠けています。ファイルの中の何かが、図版そのものを含むのではなく、アドレスを指していました。リンクとして保存された埋め込み写真、スタイルシート、フォントです。それらを取りに行くことを拒む描画器は、正しいことをしています。どこかからダウンロードしたSVGが、作った相手に報告することを止めているのと、同じ拒否だからです。画像を埋め込んだ状態で、作図ソフトから書き出し直してください。

非常に大きなサイズを拒まれます。ブラウザはキャンバスの大きさに上限を設けており、しかもその位置について意見が一致していません。一辺およそ16,000ピクセルを超えると何も返ってきませんし、iPhoneやiPadのSafariはもっと早く、およそ4096 × 4096で音を上げます。警告する道具は、真っ白なファイルから使う人を救っています。ブラウザは行き詰まったとき、エラーメッセージではなくそれを返すからです。

これにアップロードは要りません

SVGのピクセル化は、どのブラウザも1日に何千回も行っていることです。ウェブページにアイコンを描くのと、同じ仕組みです。図版がPNGになって出てくるために、サーバーまで往復しなければならない技術的な理由はありません。そしてここの道具は、どこへも送りません。ページのContent-Security-Policyには接続してよいアドレスがすべて挙がっていますが、そのどれも当サイトのものではありません。

SVGでは、これがふつう以上に効いてきます。SVGは画像ではなく、文書だからです。スクリプトも外部アドレスも含められますし、代理店から送られてきたロゴは、自分で書いたのではないファイルです。画像タグを通して描かれると、仕様がsecure static modeと呼ぶ状態に入ります。スクリプトは走れず、アドレスに接続されることもありません。それを強制しているのは、ウェブサイトではなくブラウザです。

言われるより確かめたい方は、ページを読み込んでから回線を抜き、それでも変換してみてください。オンライン変換サイトにファイルをアップロードしても安全ですか?には、どの道具にも試せる確認方法がさらに3つ載っています。