SVG を PNG に変換

使い方

1. 上の変換ツールに .svg ファイルをドロップするか、クリックして選択します。
2. ファイルを読み込み、本来のサイズを調べます。width/height 属性を使い、それがない場合は viewBox を使います。
3. 出力倍率を選びます。1× はデザイン時のサイズ、2×〜4× なら Retina でもくっきりした画像になります。
4. 「変換」をクリックします。ベクター画像がローカルでピクセルに描画され、PNG としてエンコードされます。
5. .png をダウンロードします。透明な背景も保たれ、スライドや SNS の投稿にすぐ使えます。

よくある質問

書き出した PNG がほかのサイトでぼやけて見えるのはなぜですか？

おそらく小さすぎるサイズでラスタライズされ、それより大きく表示されているためです。SVG はベクター形式なので、2×〜4× のサイズで書き出し直せば完全にくっきりしたままです。上の倍率オプションがそのための機能です。

PNG でも背景の透明は保たれますか？

はい。PNG はアルファチャンネルを完全にサポートしており、ラスタライザーは SVG で定義されたものだけを描画するため、何もない部分は透明のままです。

SVG に width と height がない場合、PNG のサイズはどうなりますか？

代わりに viewBox のサイズが使われ、それもない場合は 1024×1024 のキャンバスを使います。倍率の選択と組み合わせれば、大きくくっきりした画像を得られます。

外部の画像やフォントを参照している SVG も変換できますか？

確実にラスタライズできるのは、すべてが SVG 内で完結しているものだけです。外部の画像や Web フォントを URL で参照している SVG は、その部分が欠けて描画される可能性があります。このツールは意図的に外部リソースを取得しないためです。