てもとツール

SVG→PNG変換｜高解像度で書き出し、真っ白の原因も調べる

SVGを貼るだけでPNGに書き出すツール。倍率と実寸のどちらでも指定でき、大きさを何から決めたかを表示します。外部参照やWebフォントなど画像化で落ちる箇所を先に名指しし、書き出したPNGが空でないかまで確かめます。

ブラウザ内処理 公開
（ここへドラッグ＆ドロップもできます）

変換したい SVG を貼り付けてください

ファイルを選んでも、コードを貼り付けても構いません

このツールについて

使い方・特徴・補足情報

SVG→PNG変換とは

SVG→PNG変換は、SVGのコードやファイルをPNG画像に書き出すツールです。

倍率と実寸のどちらでも大きさを指定でき、拡大してもふちがぼやけません。

変換の前に、画像化すると落ちる箇所を調べて一覧にします。外部のファイルを参照する部分やWebフォントの指定が対象です。

書き出したあとには、PNGの画素を数え直します。中身が写らず透明なままの絵をそのまま渡さないためです。

大きさを何から決めたかも画面に出します。width属性なのかviewBoxの比なのかが分かると、思ったより小さい原因をすぐ追えます。

SVGはブラウザの中だけで読み込み、ファイルの中身を外部へ送る仕組みは持っていません。

こんな人におすすめ

SVGのアイコンやロゴを扱う人

楽になること

SVGをPNGへ書き出すこと

避けたい手間

中身が欠けたまま出てしまうこと

解決できる困りごと

  • 変換したPNGが真っ白だったとき、原因が外部参照なのか書体なのかを手作業で探し直す必要がなくなる
  • デザインツールを開かずにロゴを2倍・4倍のPNGへ書き出せるので、資料へ貼るたびの往復が減る
  • 大きさを書いていないSVGが300×150pxで出てしまう理由が画面に出るため、設定を当てずっぽうで変えずに済む
  • 拡大したいのにviewBoxが無くて絵が切り取られる失敗を、変換の前に気づける
  • 書き出したPNGが空になっていないかを開いて確かめる手間が、画素の検算で済む

使い方

  1. SVGのコードをテキストエリアに貼るか、SVGファイルを枠に入れます。
  2. 「読み取った大きさ」で基準サイズと、その根拠を確かめます。
  3. 倍率のボタンを押すか、幅か高さのpxを打って出力サイズを決めます。
  4. 背景を透明のままにするか、単色を敷くかを選びます。
  5. 診断カードに出た項目を読み、落ちる部分がないか確かめます。
  6. プレビューと画素の検算を見てから「PNGを保存」を押します。

使用例

アイコンを4倍のPNGにする

viewBoxだけを持つSVGの例です。基準サイズが何から決まったかと、倍率をかけた実寸が並びます。

入力

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <circle cx="12" cy="12" r="10" fill="#2563eb"/>
</svg>
倍率: 4x

出力

読み取った大きさ: 150 × 150 px（viewBoxの比から）
出力: 600 × 600 px
icon_600x600.png

外部の写真を参照したSVGを調べる

画像化で読み込まれない参照が入った例です。変換は止まらず、落ちる箇所だけが一覧に出ます。

入力

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="300">
  <image href="https://example.com/photo.png" width="400" height="300"/>
  <text x="20" y="40" font-family="Noto Sans JP">見出し</text>
</svg>

出力

致命: 外部のファイルを参照する image が 1 件（画像化では読み込まれません）
情報: 書体を名前で指定しています（端末に無いと別の書体に置き換わります）
読み取った大きさ: 400 × 300 px（width / height 属性から）

名前空間が抜けたSVGを補って変換する

xmlnsが無いSVGの例です。既定では補って変換し、補ったことを画面で知らせます。

入力

<svg viewBox="0 0 100 50"><rect width="100" height="50" fill="#111"/></svg>

出力

致命: 名前空間（xmlns）の指定がありません
xmlns を補って変換しました
出力: 300 × 150 px

活用シーン

資料に貼るロゴをPNGでもらい直す

SVGしか手元にないロゴを、スライドや文書に貼れるPNGへ書き出します。倍率を上げれば印刷にも耐えます。

アイコン素材をアプリ用の実寸にそろえる

配布サイトから落としたSVGを、512pxや1024pxのPNGへそろえます。幅を打てば高さは比のまま付いてきます。

SNSの投稿画像に図版を使う

図解のSVGを大きめのPNGにして、投稿画像の素材にします。背景を単色にすると白背景の枠にもなじみます。

真っ白になったPNGの原因を切り分ける

他のサイトで変換したら中身が消えたSVGを貼り、落ちる箇所の一覧を見ます。参照か書体かが分かれば直せます。

デザインツールが手元に無い環境で書き出す

共用のパソコンや外出先でも、ブラウザだけでPNGを作ります。インストールの申請を待たずに済みます。

最適化したSVGの見た目が変わっていないか確かめる

軽量化の前後をそれぞれPNGにして並べます。同じ大きさで書き出すと、線の欠けに気づきやすくなります。

技術的な解説

補足: 仕組み

ルートの<svg>タグと属性は、DOMを使わずRegExpで切り出しています。

基準サイズはCSSの既定の大きさ算出に合わせました。viewBoxしか無い場合は比だけを取り出します。

書き出す前に、複製したSVGへwidthとheightを書き込みます。ブラウザ間で解釈が割れるのを防ぐためです。

描画はBlob URLを<img>に読ませ、CanvasのdrawImageへ渡します。

検算はgetImageDataで画素を読み、最大20万点に間引いて数えます。

もっと詳しく

外部参照が読み込まれないのは仕様どおり

<img>に入れたSVGは「secure static mode」という決まりで処理されます。

この状態では外部ファイルの参照を解決せず、スクリプトも動きません。

つまり外部の写真やWebフォントが出ないのは、変換ツールの手抜きではありません。別のサイトで変換しても同じ結果になります。

直す方向は1つで、参照をやめて中身をSVGに埋め込むことです。画像はデータURL、文字はパスへ変換すると欠けなくなります。

大きさを書いていないSVGが300×150pxになる理由

画像の大きさが決まらないとき、ブラウザは既定の300×150pxを使います。

viewBoxがあると縦横比だけが決まるので、その比を保ったまま300×150pxに収まる形になります。

24×24のアイコンが150×150pxで出るのはこのためです。小さすぎると感じたら、倍率を上げるか実寸を打ってください。

根本から直すなら、SVGのルートにwidthとheightを書き足すのが確実です。

SVG最適化ツールとの使い分け

当サイトにはSVGプレビュー・最適化ツールもあり、役割が違います。

最適化はSVGのまま軽くする作業で、拡大してもぼやけない利点を残したまま容量を削ります。

こちらはSVGを画素の絵に変える作業です。PNGにした時点で拡大の余地は無くなり、倍率を上げるほど容量も増えます。

貼る先がSVGを受け付けるなら最適化だけで足ります。受け付けない相手に渡すときだけPNGにしてください。

よくある質問

PNGにすると画質は落ちますか？

指定した大きさで描き直すので、その大きさの中では劣化しません。ただしPNGにした後で拡大するとふちがぼやけるため、大きく使う予定があるなら書き出しの時点で倍率を上げてください。

文字が別の書体に変わってしまいます。

画像として読み込むときはWebフォントが適用されず、端末にある書体で代わりに描かれます。書体を固定したいなら、元のデザインツールで文字をパスへ変換してから貼り付けてください。

変換したPNGが真っ白になります。

診断カードに致命の項目が出ていないか確かめてください。外部参照・スクリプト・名前空間の欠落が主な原因で、項目が0件のときは図形の座標がviewBoxの外にある場合があります。

背景を白にするにはどうしますか？

背景の指定を「単色」に切り替えて色を選んでください。透明のまま保存すると、白い場所に貼ったときだけ問題なく見え、暗い背景では文字が読めなくなることがあります。

どのくらいの大きさまで書き出せますか？

1辺8,000pxかつ合計4,000万画素までです。これを超える指定は黙って縮めず、上限を超えていることをエラーで知らせます。

複数のSVGをまとめて変換できますか？

このツールは1枚ずつ丁寧に調べる作りなので、まとめての変換には対応していません。枚数が多いときは画像一括加工ツールを使ってください。

SVGはどこかに送信されますか？

読み込んだSVGは端末の中だけで処理し、コードやファイルの中身を外部へ送る仕組みは持っていません。書き出しも開いているブラウザの中で終わります。

参考・出典

本ツールの計算式・判定基準は上記の公的機関・公式情報源を参考にしています。最新の情報は各リンク先をご確認ください。

関連記事

このツールの使い方や活用例をブログでも紹介しています。

関連ツール

同じカテゴリの他のツールも合わせてどうぞ。