SVG PNG 変換 — 好きな倍率で透過のまま
倍率または幅を指定してSVGをPNG・JPG・WebPに変換するブラウザーツール
ブラウザー内で処理・アップロード不要
ここにSVGファイルをドロップ
SVGファイル1つ（10MBまで）をPNG、JPG、WebPに変換します。ファイルがブラウザーの外に送信されることはありません。
PNGとWebPは透明を保ちます。アイコンは2〜4倍で保存すると高解像度の画面でもくっきり表示されます。
どんなツールか
SVGのベクター画像を、PNGなどのふつうの画像に変換するツールです。SVGはどんな大きさでもくっきり表示できますが、チャットアプリやオフィスソフト、SNS、多くのアップロードフォームでは使えません。倍率か幅を選んでPNGで保存すれば、どこでも使えます。ファイルをドロップしても、SVGコードを貼り付けてもよく、透明は保たれます。
使い方
- ファイル を選んでSVGをドロップするか、コードを貼り付け を選んで
<svg>で始まるコードを貼り付けます。 - 形式 でPNG、JPG、WebPを選びます。
- サイズ で1×〜4×を選ぶか、幅をピクセルで入力します。
- 背景は透明のままにするか、色で塗りつぶします。JPGは常に塗りつぶされます。
- プレビューを確認して PNGを保存 をクリックします。
しくみ
- 元のサイズ：ルートの
<svg>のwidthとheight（px、pt、mm、cm、inはCSSピクセルに換算）を使います。片方しかない場合は、もう片方をviewBoxの比率から求めます。パーセント指定はサイズとして使いません。 - 拡大縮小：widthとheightを出力サイズに設定し、viewBoxがなければ元のサイズから補うため、図全体がそれに合わせて拡大縮小されます。
- 描画：ブラウザーがSVGを画像として描画し、その結果をキャンバスにコピーします。このモードでは外部ファイルは読み込まれず、スクリプトも実行されません（SVGを画像として扱うときのセキュリティ規則）。
- 警告：外部参照、文字（フォント）、foreignObject、スクリプト、アニメーションは事前に知らせます。アニメーションは最初のフレームで保存します。
- 上限：1辺16,384px、iPhone・iPadでは16,777,216画素です。超える場合は縮小して出力します。
変換例
| SVG | 設定 | 結果 |
|---|---|---|
| icon.svg（viewBox 0 0 24 24） | 4倍のPNG、透明 | icon.png 96×96、透明 |
| logo.svg（width 200、height 80） | 幅1000px | logo.png 1000×400 |
| chart.svg（サイズ指定なし） | 2倍のJPG、白 | chart.jpg 600×300 |
Webサイト用のアイコン一式はファビコン作成ツールで、PNGをさらに別の形式にするなら画像形式変換を使ってください。
よくある質問
倍率はどれくらいにすればよいですか？
Web用のアイコンやロゴなら2倍でたいてい足ります。印刷や高解像度の画面向けには3倍か4倍を使ってください。サイズを正確に決めたいときは「幅を指定」で1024pxなどを入力すると、高さは縦横比に合わせて決まります。
変換したらフォントが変わりました。
SVGを画像として描画するとき、ブラウザーはSVGの外にあるフォントファイルを取得しないため、文字は端末にインストールされているフォントで表示されます。デザインを保つには、先にIllustrator、Figma、Inkscapeで文字をアウトライン（パス）化してください。
画像の一部が欠けています。
SVGが参照している外部のファイル（別のアドレスにある画像やCSS）は、セキュリティ上の理由で読み込まれないため、その部分は空になります。ツールが一覧を表示するので、data URIとしてSVGに埋め込んでからもう一度お試しください。
SVGにサイズの指定がない場合は？
widthとheightがなければviewBoxのサイズを、どちらもなければブラウザーの既定値300×150pxを使います。倍率をかける前に、どれを基準にしたかをページに表示します。
SVGはサーバーに送信されますか？
されません。読み込みも描画もブラウザーの中で行います。
