スケーラブルなSVGベクターをすぐに使えるPNG画像に変換
SVGファイルは完成した絵ではなく、指示書です。テキストエディターで開くと、パス・シェイプ・フィル・曲線を記述したXMLが見つかります。ブラウザがそれに従って、要求されたどんなサイズでもアートワークを新しく描きます。PNGはその逆で、固定された幅と高さに凍結された色付きピクセルのグリッドです。一方を他方に変換することをラスタライズといい、このツールはそれをすべてブラウザ内で行います。出力サイズを選ぶと、SVGがHTMLキャンバスに描画され、PNGが返ってきます — ファイルがデバイスから出ることは一切ありません。
ベクターとラスターをわかりやすく説明
核心的な違いは解像度の扱い方です。SVGはピクセルではなく数式を保存しているため、解像度に依存しません。ファビコンから看板までロゴをスケールしても、すべてのエッジが数学的にシャープになるよう再計算されます。PNGにはそのような自由がありません。ピクセルが焼き付けられているため、ネイティブサイズを超えて拡大するとビューアーが既存の点を引き伸ばさなければならず、ラスター画像が劣化する際の特有のぼかしと階段状の縁が現れます。
そのトレードオフは両方向に働きます。ベクターはクリーンなシェイプで作られたロゴ・アイコン・フラットなイラストに無敵で、ファイルも通常は小さいです。PNGのようなラスターフォーマットはグラデーション・柔らかい影・写真的な細部をより自然に扱え、そして何より — ほぼすべてのものに理解されます。ラスタライズするとき、SVGの無限のスケーラビリティを、1つの選択したサイズでPNGの普遍的な互換性と引き換えています。
そもそもなぜSVGをラスタライズするのか
SVGがそれほどきれいにスケールするなら、なぜ変換するのでしょうか？互換性が通常の答えです。SVGを受け付けない場所が数多く存在します。多くのメールクライアントはSVGを除去するか表示を拒否し、ドキュメントエディターやプレゼンテーションソフトウェアはフラットな画像を求め、マーケットプレイスや広告ネットワークはPNGかJPGを要求し、ほとんどのSNSプラットフォームはベクターのアップロードを無視します。一部のコンテンツシステムはセキュリティ上の理由からSVGを完全にブロックします。SVGはスクリプトを埋め込める形式だからです。
2つ目の理由は、固定サイズのアセットが必要なときがあるからです。アプリのアイコン・サムネイル・Open Graphプレビュー画像・印刷物はすべて正確なピクセル寸法を前提としています。PNGはアートワークをその目標に固定し、ベクターを別の方法で解釈するビューアーによるサプライズなしに、どこでも同じように表示されます。ソースSVGをプラットフォームが要求する正確なサイズに変換することが、一貫した結果への最もクリーンな道筋であることが多いです。
適切なエクスポート解像度の選び方
PNGはきれいにスケールアップできないため、エクスポート時のサイズがベクターよりはるかに重要です。小さすぎると現代の画面でぼやけて見え、大きすぎると帯域幅を無駄にします。シンプルな目安：画像が最大で表示されるサイズを決め、少なくともそのサイズで、理想的には高精細ディスプレイ向けにそれ以上でレンダリングしてください。
標準的な画面では1x — アートワークの名目上のサイズで十分です。高DPIとRetinaディスプレイは同じスペースに約2倍のピクセルを詰め込むため、2xエクスポートでアイコンやグラフィックがぼやけずシャープに保たれます。印刷・ポスター・非常に大きなディスプレイには3xまたは4xが余裕をもたらします。ソースがベクターであるため、大きくエクスポートしても品質は落ちません — 曲線は単純により高いピクセル数でフラット化される前に再計算されるだけです。迷ったら大きめにレンダリングしてください。大きいPNGは縮小できますが、小さいPNGを拡大しても細部は回復できません。
透過もそのまま引き継がれます
PNGは完全なアルファチャンネルをサポートしているため、透過は変換後も維持されます。SVGに背景フィルがなければ、生成されたPNGもその領域が透明になるため、ロゴやアイコンがどんな色の上にも醜い白いボックスなしにきれいに乗ります。代わりに単色背景が必要な場合は、変換前にSVGに背景を追加してください。いずれにせよ、ベクターで見えているものがPNGで保持されます。だからこそPNG — JPGではなく — がアイコン・バッジ・オーバーレイの自然な変換先です。
すべてのデータはデバイス上に留まります
このコンバーターはキャンバスAPIを使ってブラウザ内でローカルコードとして実行されます。SVGはサーバーに送信されることなく、読み込まれ、描画され、エクスポートされます。アップロードもキューも、アートワークのコピーが他者のストレージに保存されることもありません。これはあなたにとって速く、未公開のブランディングや契約下の内部図面など、第三者に渡したくないものに対しても安全です。終了後は画像ツールを探してみてください — WindowsファビコンアセットをビルドするなEば、PNG to ICOコンバーターが次の自然なステップです。
よくある質問
PNGはSVGと同じくらいシャープに見えますか？
エクスポートするサイズでは、はい。ベクターは選択した解像度で新しくレンダリングされるため、エッジはシャープに保たれます。違いは、元のSVGはその後いつでも拡大できますが、PNGを拡大するとぼけてしまう点です。
変換で透過は維持されますか？
はい。PNGはアルファチャンネルを持つため、SVGの透明な領域はPNGでも透明のまま残ります。単色で塗りつぶしたい場合は、先にSVGに背景を追加してください。
どの解像度を選ぶべきですか？
画像が表示される最大サイズ以上にしてください。標準的な画面には1x、RetinaおよびHigh-DPIディスプレイには2x、印刷や大型グラフィックには3xまたは4xが適切です。ソースがベクターであるため、大きくレンダリングしても品質は落ちません。
SVGをどこでも使えばいいのでは？
多くのメールクライアント・ドキュメントエディター・マーケットプレイス・SNSプラットフォームはSVGを受け付けないか、正しく表示しません。PNGはほぼどこでも使えて、アートワークを予測可能な固定サイズに固定します。
ファイルはどこかにアップロードされますか？
いいえ。すべてブラウザのローカルで実行されます。SVGがサーバーに送信されることはなく、アップロード・保存・追跡は一切ありません。
PNGをSVGに戻すことはできますか？
忠実には変換できません。ラスタライズで元の数式が失われるため、元に戻すにはピクセルを新しいベクターパスにトレースしなければなりませんが、ソースに一致することはほとんどありません。元のSVGをマスターファイルとして保存しておいてください。