SVGをPNGに変換 - 無料・任意サイズ・ブラウザー内で完結

SVG は絵ではなく、描画の指示書です。どんな大きさでも鮮明なのはそのためで、表示のたびに図形が計算し直されます。PNG に変換するとは、その指示を一度だけ、ひとつの寸法で実行し、結果を画素の格子に凍結することです。この形式最大の利点を手放すのですから、代わりに何が手に入るのかをはっきりさせておく価値があります。

SVGをPNGに変換する手順

1. 1 .svg ファイルをアップロード欄にドロップします。
2. 2 出力幅を指定します。1x・2x・4x ボタンはファイルに書かれた寸法を基準にします。寸法がない場合は 1024 ピクセルから始めます。
3. 3 「変換する」を押して PNG をダウンロードします。透明な部分は透明のまま残ります。

選んだ寸法が上限になります

このページで実際に決めるべきことはこれだけです。SVG には立ち返るべき元の解像度がありません。入力した幅が、その画像が到達しうる最も鮮明な状態になります。あとから PNG を拡大すれば、他のラスター画像と同じようにぼやけます。安全な習慣は、表示サイズの 2 倍で書き出すこと。これで高精細ディスプレイまで賄えます。そして将来もっと大きく必要になりうるものには SVG そのものを取っておいてください。ファイル自体に幅がない場合は 1024 ピクセルから始めます。これは妥当な既定値であって、意味のある「原寸」ではありません。

PNG が本当に必要な場面

いまだに SVG を受け付けない場所は多く、たいていは正当な理由があります。SVG はスクリプトを含みうるため、見知らぬ相手からのアップロードを受け付けるシステムは端から拒否しがちです。もっとも多いのはソーシャル用のプレビュー画像で、og:image や Twitter カードはラスターを求めます。ほかにも、メールのテンプレート、アプリストアやマーケットプレイスの掲載素材、印刷の工程、古いデザインソフト、ゲームや canvas の素材、そして周囲のレイアウトを組むために固定の画素寸法が要るものすべて。いずれも制約は受け取り側にあり、あなたのファイルにあるわけではありません。

フォントと外部参照は付いてきません

安全のため、ブラウザーは SVG をサンドボックス内で描画します。スクリプトは実行されず、外部リソースも読み込まれません。これは正しい挙動ですが、ここでは目に見える影響があります。SVG が Web フォントを参照していれば、文字はシステムフォントに置き換わり、形が崩れます。外部画像へリンクしていれば、その画像は表示されません。周囲のページの CSS に依存していれば、そのスタイルは失われます。対処法は、変換前にファイルを自己完結させること——文字をアウトライン化し、画像を埋め込むことです。これは SVG を誰かに渡す前にも、どのみち必要な作業です。