SVG→PNG 変換ツールとは？
ベクター SVG ファイルを任意の解像度の PNG・JPEG・WebP ラスター画像に変換します。サイズ、フォーマット、背景を選んで画像をダウンロードできます。
1 枚でも一括でも .svg をドロップするだけで即プレビュー、必要なサイズもそのまま指定できます。縦横比のロックで形が崩れず、背景は透明でも単色でも選択可能。出力は PNG(可逆・透明対応)、JPEG(軽量・白背景)、WebP(最新フォーマットで最も小さい)。1x〜4x のスケールプリセットで 1 枚のアイコンを Retina から超高精細サイズまで一気に書き出せ、オプションの 1x/2x/3x ZIP ならワンクリックで 3 種類の密度をまとめて取得できます。currentColor を使ったアイコンにはインラインのカラーピッカーが表示され、ラスタライズ前に色を差し替え可能。一括処理の結果はすべて 1 つの ZIP にまとめてダウンロードします。
使い方
- 1 つまたは複数の .svg ファイルをドロップエリアに入れるか、クリックして選択してください。あとから「SVG を追加」ボタンでさらに追加できます。
- 出力する幅と高さをピクセル単位で設定し、背景色（透明またはカスタムカラー）を選択してください。
- フォーマット（PNG、JPEG、WebP）とスケールを選び、変換をクリックして指定したサイズの画像をダウンロードします。
使用するタイミング
- SNSプロフィール用に、ロゴを1024×1024・透過背景のPNGとして書き出すとき。
- 1個のアイコンSVGからアプリ用にRetina @2x・@3x のPNGを生成したいとき。
- SVGを受け付けないPowerPointに、D3やMermaidで作ったグラフを貼り込みたいとき。
結果
デザイナーが会社のロゴSVGをアップロードし、透明背景の1024×1024 PNGに変換して、SNSのプロフィール画像として使用します。
よくある質問
- 指定したサイズなのにPNGがぼやけて見えるのはなぜ?
- SVG内にビットマップが埋め込まれている(<image>要素でPNG/JPGを参照している)か、viewBoxより小さい幅を指定したかのどちらかです。ベクター描画はどのサイズでも鮮明ですが、埋め込みラスター素材は拡大されるだけなので、解像感は当然落ちます。
- 透過をオフにしたのに背景が黒くなるのはなぜ?
- 透過オフでは選択中の色がキャンバスに塗られます。デフォルトの黒のまま、または色を設定していなければ黒で書き出されます。一般的なアプリ画面用には白(#ffffff)、もしくはブランドカラーに設定してください。
- 4Kや8Kといった巨大サイズで書き出せますか?
- 可能ですが、ブラウザのcanvas上限に依存します。ChromeやFirefoxの新しい版では概ね16,384×16,384ピクセル程度です。メモリ使用量は 幅×高さ×4 byte に比例し、8Kなら描画中に200MB前後使うことがあります。重いタブは事前に閉じてください。
- SVGが参照する外部フォントは保持されますか?
- ブラウザに既に読み込まれているフォントだけが反映されます。<link>でwebフォントを参照しているSVGは、変換時にフォントを取得しません。テキスト描画の一致を保証したい場合は、書き出し前にSVG内でテキストをパス化するか、対象フォントをシステムにインストールしておきましょう。
- SVG内のCSSアニメーションやJavaScriptはどうなりますか?
- PNGは静止画なので、SMIL、CSS、JavaScriptによるアニメーションやインタラクションはフレーム0の状態に固定されます。途中のフレームが必要であれば、元のアプリでその瞬間まで再生してから書き出してください。