SVG → PNG 変換

使い方

1. SVG ファイルをドロップ、または SVG マークアップを貼り付け。
2. 倍率を調整（1× で固有サイズ）。
3. 背景を選択 — 透過 / 白 / カスタム色。
4. ダウンロードで PNG を保存。

よくある質問

なぜ既定が 200×200？

SVG に width / height / viewBox がない場合は 200×200 にフォールバック。SVG に viewBox や明示サイズを入れればその値が使われます。

PNG でフォントが違って見える

ブラウザはユーザーのシステムにあるフォントで SVG をラスタライズします。カスタムフォントを使う場合は data: URL で埋め込むか、ベクターツールでテキストをパスに変換してください。

SVG はアップロードされる？

いいえ。SVG はブラウザの Canvas で解析・ラスタライズされます。サーバーに送信されません。

SVG 内の外部画像は扱える？

URL 参照の画像は CORS で読み込めない場合があります。SVG 内の外部画像は data: URL として埋め込んでください。

どの倍率で書き出すべきですか？

画像が使われる画面の密度に合わせてください。1x は CSS ピクセルのサイズ、2x は現代のスマートフォンやノートパソコンの大半をカバーし、3x は最も高密度なスマートフォンの表示向けです。インターフェイスではなく文書やスライドに入れる PNG なら、2x で書き出して縮小されるに任せるのが無難な既定です。

PNG がぼやけるのはなぜ？

小さすぎるサイズでラスタライズしてから拡大したからです。SVG 自体には解像度が無いので、PNG の鮮明さは書き出しの時点で完全に決まります。あとから PNG を大きくするのではなく、倍率を上げて書き出し直してください — 後からの拡大は既にあるものを補間できるだけです。

SVG の色やスタイルが PNG で失われるのはなぜ？

ファイル自身が持っているものだけが描画できるからです。外部スタイルシートにあるスタイル、ページから継承していた CSS カスタムプロパティ、埋め込まれず参照されているだけのフォントは、SVG が単独で描画される時点でいずれも利用できません。スタイルをマークアップ内にインライン化し、テキストをパスへ変換すれば、書き出しは設計したとおりになります。

関連ツール