画質を落とさずSVGをPNGに変換する方法

SVGはピクセルでできているわけではありません。「ここに線を引く」「この図形をこの色で塗る」といった命令の集まりなので、どんなサイズで描画しても完璧にシャープなままです。ロゴやアイコンにSVGがよく使われるのはそのためです。名刺の上でもビルボードの上でも、同じファイルがくっきりと表示されます。

PNGはその逆で、固定されたピクセルグリッドです。たとえば512ピクセル幅で書き出したら、それがそのまま結果になります。元のサイズを超えて拡大すると、写真を拡大したときのようにブロック状に粗くなります。SVGをPNGに変換するというのは、これらの描画命令を固定グリッドに変換することであり、この工程はラスタライズと呼ばれます。

PNGはピクセルサイズが固定されているため、単一の「劣化なし」なSVGからPNGへの変換方法というものは存在しません。実際には解像度を選んでいるのであり、そこから画質が決まります。コツは、実際の使い道に対して十分な解像度で描画することです。

目安としては、表示サイズの二倍から三倍で書き出すとよいでしょう。ロゴをページ上で200ピクセル幅で表示するなら、400または600ピクセルで書き出せば、高解像度画面でもくっきりとしたシャープさを保てます。印刷用に使う場合はどうでしょうか？その場合はさらに大きなサイズにしましょう。本当に画質が落ちてしまう唯一の失敗は、小さく書き出しすぎたものを後から拡大することです。

変換はすべてお使いの端末上で行われるため、ファイルがアップロードされることはありません。

• SVG → PNG 変換ツールを開き、SVGファイルをドロップします。
• 出力サイズを設定します。希望するピクセル幅を入力してください（数値が大きいほどシャープになりますが、ファイルサイズも大きくなります）。
• PNGを書き出してダウンロードします。

すべてブラウザ内で完結するため、ページを読み込んだ後にオフラインにしても問題なく動作します。これは、SVGがサーバーに送信されていないことの証明でもあります。アカウント登録も不要で、透かしも入らず、変換回数の制限もありません。

SVGにはよく透明な背景が設定されており、それはそのまま引き継がれます。PNGに書き出しても透明な部分は透明のままです。PNGはアルファチャンネルに対応しているためです。ロゴの背後に突然白い箱が現れることはありません。

どのピクセル幅を選べばよいか迷ったら、画像が実際にどこで表示されるかを基準に考えましょう。ファビコンなら64ピクセルほどで十分な場合もありますが、ヒーロー画像には2,000ピクセル以上必要になることもあります。迷ったときは、少し大きめのサイズにしておきましょう。あとからPNGを圧縮してファイルを軽くすることはできますが、小さく書き出しすぎた画像に後からディテールを足すことはできません。あとでJPGが必要になった場合も、PNG → JPG変換は一瞬で完了します。