SVGからPNGへ
SVGからPNGへは、ベクター画像をブラウザ内で任意のピクセルサイズのビットマップにレンダリングします。描画はブラウザ自身のベクターエンジンが、指定したサイズで再ラスタライズします。そのため4×のエクスポートは、小さいレンダリングを引き伸ばした複製ではなく、文字どおり4×分シャープです。
作成中…
SVGからPNGへはどう動きますか？
SVGにはピクセルがありません。あるのはviewBox、図形の集合、そしてそれらの図形をピクセルに変換する規則の集合です。規則を適用するのはそれを描画する側であり、求められたサイズで適用します。変換の価値はここに尽きます。ブラウザがベクターをターゲットの解像度でラスタライズするため、64ピクセルの描画の1024ピクセル版は、64ピクセルのレンダリングを16×に引き伸ばしたものではなく、本物の1024ピクセル分のディテールです。
サイズの問題：常に答えがあるとは限らない
描画はwidth="100%"だけを宣言することも、viewBoxだけを宣言することも、何も宣言しないこともあります。3つとも有効であり、どれもレンダラーに使うべきピクセルサイズを伝えません。そのため、利用可能な属性がなければviewBoxを読み、アスペクト比はそこから取り、読むものが何もなければ、ツールは黙って推測する代わりに仮定した値を明示します。
変換の過程で生き残らないものと、その理由
描画はイメージとして読み込まれ、隔離されたドキュメントになります。内部のスクリプトは決して実行されません。これこそ、この機能を安心して提供できるセキュリティ上の性質です。ブラウジングコンテキストを必要とするものも、同じく動きません：
- 外部参照は読み込まれません。
<image href="photo.png">、<style>内の@import、CDNからのWebフォント：すべて破棄されます。リモートフォントに依存するロゴは、フォールバック書体で描かれます。 - foreignObjectは描画に一貫性がありません。中のHTMLを描くエンジンもあれば、空白のままにするエンジンもあります。
- ページのCSSカスタムプロパティは届きません。
currentColorは初期色に解決され、通常は黒です。
1つ目への対処は、変換前にアセットをSVGへインライン化することです。多くのビルドパイプラインでは1行の変更で済み、そうでなければ手作業の編集になります。
形式の選び方
透過やフラットな色を含むものにはPNG。ベクター画像の大半がこれに当たります。ファイルをWebサイトに載せ、より小さくしたいときはWebP。対応は今や普遍的です。JPEGは、背景が不透明で描画が写真調の場合だけにします。アルファチャンネルがなく、透過のcanvasをJPEGでエンコードすると黒くなるためです。
SVG
<svg viewBox="0 0 64 64" width="64" height="64">…</svg>
PNG
drawing-512.png 512 × 512 pixels transparent background 9.4 KB
SVGからPNGへが対応するオプションとエッジケースは？
| パラメータ | 型 | デフォルト | 動作とエッジケース |
|---|---|---|---|
| 幅 | ピクセル | 512 | 出力の幅。高さは、viewBoxから取った描画本来のアスペクト比に従います。2:1の描画を幅512にすると、高さは256になります。 |
| 倍率 | 1× | 2× | 3× | 4× | 1× | 幅に掛け合わせます。Retina用アセットに便利です。512を2×にすると1024ピクセルになり、@2xというファイル名が意味する内容になります。 |
| 形式 | PNG | WebP | JPEG | PNG | PNGは透過を保つ可逆形式です。WebPは同じ品質ならより小さくなります。JPEGにはアルファチャンネルがまったくないため、エンコード前に透過背景が単色で塗られます。 |
| 背景 | 透過 | 単色 | 透過 | PNGとWebPでは透過。それ以外の値では、まず色が塗られます。JPEGでは必須であり、描画が背後の明るいページを前提としている場合にも便利です。 |
| 固有サイズ | 検出 | 属性、次にviewBox | width/heightから読み取り、なければviewBoxにフォールバックします。どちらも存在しない場合はその旨が明示されます。使われるサイズが描画本来のものではなく、推定値になるためです。 |
| 外部アセット | 読み込まない | 破棄 | リンクされた画像、Webフォント、インポートしたスタイルシートは、イメージコンテキスト内では解決されません。描画がそれらに依存している場合は、先にSVGへインライン化してください。 |
| スクリプト | 実行されない | — | SVG内のスクリプトは実行されません。これは制限ではなくセキュリティ上の性質であり、描画をページに注入せずイメージとして読み込む理由です。 |
| 出力の上限 | ピクセル | 4096 × 4096 | 約16メガピクセルを超えると、スマートフォンではcanvasの確保が単に遅いのではなく失敗します。そのため、空のファイルを出力する代わりに、メッセージとともにエクスポートを拒否します。 |
よくある質問
4×でもPNGはシャープになりますか？
はい。これがリサイズとの違いです。SVGはターゲットのピクセルサイズのままブラウザに渡され、ベクターエンジンがその解像度ですべての曲線をラスタライズします。小さいレンダリングの拡大は既存ピクセル間を補間して縁がにじみますが、こちらは新しいディテールが生まれます。唯一の制限は描画の書き方です。ちょうど1単位の線は、canvasが大きくなるほど細くなります。
Webフォントが表示されません。なぜですか？
描画はイメージとして読み込まれ、イメージは隔離されたドキュメントだからです。フォント、画像、スタイルシートを、どこからも取得できません。リモートの@font-faceは破棄され、テキストはシステムフォントにフォールバックします。文字を保ちたいなら、エディタでテキストをアウトライン化するか、変換前にSVG内へbase64のdata URIとしてフォントを埋め込んでください。
透過SVGがJPEG出力では黒くなるのはなぜですか？
JPEGにはアルファチャンネルがないからです。新規のcanvasは透過であり、透過ピクセルにはエンコードする情報がないため、黒くなります。SVGからJPEGへの変換ツールに寄せられる不満の筆頭がこれです。このツールの背景オプションは、まさにその理由で先に色を塗ります。透過が必要なら、PNGかWebPを使ってください。
どのサイズでエクスポートすべきですか？
表示されるサイズに、表示先スクリーンのデバイスピクセル比を掛けたものです。2×ディスプレイで表示する24ピクセルのアイコンには、48ピクセルのファイルが要ります。Retina画面で800 CSSピクセルを占めるヒーロー画像には1600が要ります。「念のため」4096でエクスポートすると、ページを読み込むたびに帯域を消費する割に、正しいサイズのファイルがすでに持っているもの以上の何も得られません。
ツールがサイズを推定したと表示されます。どういう意味ですか？
SVGにwidthもheightもviewBoxもなく、形を知る手がかりがないという意味です。エクスポートが失敗するのではなく何かを出力するように512×512が仮定され、どの値を使ったかを画面が示すので、幅を自分で設定できます。ソースにviewBoxを1行追加することが根本的な解決です。
描画データはアップロードされますか？
いいえ。SVGはdata URLとしてエンコードされ、ブラウザ自身のcanvasでレンダリングされ、タブ内でPNGへエンコードされます。ネットワークパネルにリクエストは表示されません。ここで変換される描画には、未公開のロゴやブランドアセットが少なくないため、この点は重要です。