SVGにはピクセルが存在しないため、これは変換ではなくレンダリングです

このサイトの他の変換ツールは、すでに存在するピクセルを移動させます。しかし、このツールは異なることを行い、その違いこそがこのページを読む価値のある理由です。SVGは画像そのものを保持しているわけではありません。SVGは「ここに円を描く」「このパスをこのグラデーションで塗りつぶす」「この座標にテキストを配置する」といった指示を保持しています。これをPNGにするということは、あなたが指定したサイズでその指示を実行することを意味します。元のピクセルグリッドが存在しないため、引き伸ばされたり推測されたりすることはありません。

そもそもなぜPNGが必要なのか

SVG形式は優れていますが、ほとんどの環境で受け入れられていません。メールクライアントはSVGを表示しません。Officeに埋め込もうとするとトラブルになります。SNSや多くのアップロードフォームでは完全に拒否され、デザイン以外のソフトウェアではテキストファイルとして扱われがちです（実際その通りです）。PNGは誰でも受け入れてくれる形式です。

大きなサイズでもここでは無料

写真を拡大すると、元々存在しなかったピクセルが作り出されるため、2倍ではぼやけ、10倍では完全に崩れてしまいます。しかし、ベクターをレンダリングする場合、そのような上限はありません。24ピクセルのアイコンを1024ピクセルでレンダリングしても、それは24ピクセルのアイコンを引き伸ばしたものではなく、1024ピクセル用に再計算された同じ描画です。実際にテストしたところ、24×24のアイコンが1024×1024で元の色そのまま、エッジもなめらかなアンチエイリアスで返ってきました。

このことから実用的なアドバイスがあります。実際に使う最大サイズでレンダリングしてください。得られるPNGはそこから固定のピクセルグリッドになるためです。大きくしても数ミリ秒しか余分にかかりません。

サイズはあなたが決めるか、ファイルが決めるか

幅を入力すれば、その幅に合わせて縦横比を保ったまま描画されます。2:1のロゴに400×400を指定すれば、400×200のきれいな画像が得られ、潰れた正方形にはなりません。256、512、1024、2048のワンクリックプリセットや、SVG自体が宣言しているサイズでレンダリングする「オリジナル」も選べます。たとえば200×100を宣言しているファイルでは、「オリジナル」で正確に200×100で返ってきました。上限は一辺16,384ピクセル、全体で64メガピクセルで、これは8,000×8,000のレンダリングにも対応します。

透過、しかも半透明も対応

PNGは本物のアルファチャンネルを持っているため、背景が透明なロゴはそのまま透明な背景で返ってきます。スライドや商品ページに白い枠なしで配置できます。良いレンダラーと雑なものの違いは「半透明」への対応です。ソフトシャドウやフェードしたエッジ、半透明設定の図形などです。50%の不透明度で宣言された図形は、出力でアルファ値128（ちょうど半分）となりました。すべてのレンダリングが正しいRGBA画像として返ってきます。透過をなくしたい場合は、背景設定を単色に切り替え、カラーピッカーから好きな色を選んでください。

テキストとグラデーション ― よく壊れる2つの要素

サーバー側のSVGレンダリングは、2つの典型的な問題で失敗します。フォントが見つからず、テキストが消えるか別の書体になります。また、idで参照されるグラデーションが解決されず、図形が単色または黒で返ってきます。両方を検証しました。テキストはきれいなアンチエイリアス付きで描画され、url()で参照された線形グラデーションも正しく色が移り変わりました。もしサーバーにないフォントが指定されていた場合は、代替フォントが使われ、その旨が結果に表示されます。後から気づく心配はありません。

他人のSVGをアップロードしても安全

SVGには合法的にJavaScriptを含めたり、インターネット上のリソースを参照したりできます。これがメールプロバイダーがSVGをブロックする理由であり、知らない人から送られてきたファイルには注意が必要です。ここでのレンダリングは専用のベクターエンジンで行われ、ヘッドレスブラウザは使いません。スクリプトは一切実行されず、外部参照も取得されません。ファイル内の何も実行されず、外部に通信したり、何かを読み取ったりすることはありません。返ってくるのは純粋な静的状態の描画です。そのためアニメーションは最初のフレームだけが描画され、動くことはありません。

高速かつ再現性あり

有名なGhostscriptのトラ虎（94.5KBの複雑なベジェパス）は、SVGレンダラーの定番ベンチマークですが、512ピクセルのPNGに53ミリ秒でレンダリングできました。同じファイルを2回レンダリングしてもバイト単位で同一の出力となるため、結果を正確に再現できます。圧縮された.svgzファイルも直接読み込み、拡張子がなくてもファイルのバイトから形式を判別してレンダリングします。

アイコンセットをまとめて一括変換

複数のファイルを同じ設定でレンダリングし、元のファイル名のまま1つのZIPで返します。icon.svgという名前のファイルが3つあれば、icon.png、icon_1.png、icon_2.pngとして返り、上書きされることはありません。壊れたファイルやSVGでないファイルはスキップされ、結果に名前が記載されるだけで他のファイルの処理には影響しません。

得られるもの

• 小さい画像を引き伸ばしたものではなく、指定したサイズでレンダリングされたPNG
• 縦横比が維持され、伸びたり潰れたりしない
• 半透明やソフトシャドウも含めた完全なアルファ、または任意の背景色
• テキストやグラデーションも落とさずに描画、フォント代替も通知
• スクリプト実行や外部参照取得が一切なく、未知のSVGでも安全にアップロード可能
• アカウント不要、透かしなし、ファイルは1時間後にサーバーから削除

次にやることは？

4,000ピクセルのレンダリングは大きなファイルになるため、PNG圧縮がページ掲載前の定番ステップです。さらにWeb用にするならPNGからWebP変換が便利です。ベクターも保持したい場合は、SVG圧縮でエディタの不要データを先に削除できます。