SVGをPNGに変換すると真っ白になる原因と確かめる順番

SVGをPNGにしたら中身が消えた。この症状はひとつの原因ではなく、少なくとも6つの別々の原因から起きます。

先に結論を書くと、確かめる順番は「読み込めているか」「大きさは合っているか」「中身が描かれているか」の3段階です。上から順に見ていけば、たいてい2つ目までで原因にたどり着きます。

まず、見え方を言葉にする

「真っ白」とひとことで言っても、実際の見え方はいくつかに分かれます。ここを分けるだけで原因はかなり絞れます。

見え方	疑う原因	段階
画像そのものが表示されない	名前空間の指定が無い / XMLとして壊れている	読み込み
一部だけ抜けている	外部のファイルを参照している	中身
文字が別の書体になっている	書体を読み込む指定が効いていない	中身
白い四角だけが出る	図形の色が背景と同じ / 座標が枠の外にある	中身
とても小さいPNGになる	大きさが書かれていない	大きさ
拡大したのに絵が大きくならない	座標の枠が無い	大きさ

順番を守る理由は単純で、読み込めていないものは中身を調べても分からないからです。

段階1: そもそも読み込めているか

画像として一切表示されないときは、中身の話ではありません。ファイルが画像として認められていない状態です。

名前空間の指定が抜けている

いちばん多い原因です。SVGの先頭には、これがSVGであることを示す決まった1行の指定が要ります。

デザインツールから正しく書き出せば必ず入ります。抜けやすいのは、コード中で組み立てたSVGや、ページから要素をコピーして保存したファイルです。

抜けている場合は、書き出し元の設定を見直すのが根本の直し方です。急ぐときはSVG→PNG変換が補って変換するので、まず結果を見てから判断できます。

XMLとして壊れている

タグの閉じ忘れ、属性値の引用符の閉じ忘れ、余分な文字の混入。どれも画像として読めなくなります。

テキストエディタで開いて、末尾が閉じタグで終わっているかを見てください。編集の途中で保存したファイルは、末尾が途切れていることがあります。

段階2: 大きさの読み方が合っているか

読み込めているのに小さい、あるいは拡大しても絵が大きくならないときは、大きさの読み取りを疑います。

大きさが書かれていないと300×150pxになる

画像の大きさが決まらないとき、ブラウザは既定の300×150pxを使います。これは仕様で決まった値です。

図の中に縦横の比だけが書いてあれば、その比を保ったまま300×150pxに収まる大きさになります。24×24のアイコンが150×150pxで出るのはこのためです。

つまり「小さすぎる」は壊れているのではなく、基準が小さいだけです。倍率を上げるか、実寸を打てば済みます。

根本から直すなら、書き出し元でSVGに幅と高さを持たせてください。同じファイルを何度も変換するなら、こちらのほうが早く済みます。

拡大したのに余白だけ増える

幅と高さを大きくしても絵が大きくならないときは、座標の枠の指定が無い状態です。

枠が無いと、図の中の座標がそのままの寸法として扱われます。指定した幅は絵の外側だけが広がり、結果として余白が増えます。

書き出し元で枠を持たせるのが確実です。手元で急ぐなら、枠を補って変換するツールを使ってください。

段階3: 中身が描かれているか

読み込めていて大きさも合っているのに白い。ここまで来たら中身の話です。

外部のファイルは読み込まれない

画像として読み込んだSVGは、外部の写真や書体を取りに行きません。これは実装の手抜きではなく、決まりごとです。

W3Cの仕様は、この状態を「外部参照を解決してはならない、スクリプトを実行してはならない」と定めています。安全のための決まりなので、変換サイトを変えても結果は同じです。

直し方は2つです。写真は画像そのものをSVGの中へ埋め込む、文字は図形に変換してから書き出す。どちらも書き出し元の設定で切り替えられます。

図形の色が背景と同じ

白い図形を白い背景に描いていれば、当然ながら何も見えません。透明な背景で書き出すと、白い図形は白い紙の上で消えます。

背景に単色を敷けるツールなら、いったん濃い色を敷いて確かめてください。図形が浮かび上がれば、これが原因です。

座標が枠の外にある

図形の座標が、表示される枠の外に置かれていることがあります。編集中に要素を動かした痕跡が残っている場合などです。

これはコードを読むだけでは見分けがつきません。実際に描いてみて、何も写っていないことを確かめるしかない種類の原因です。

それでも原因が絞れないとき

ここまでで当たらなければ、動きのある指定を疑ってください。アニメーションを使ったSVGは、開始状態の1コマとして書き出されます。

最初の状態が「透明」や「大きさ0」から始まる作りなら、書き出した絵は空になります。開始状態の値を確かめてください。

描画をコードに任せているSVGも同じです。画像として読み込むときコードは動かないので、図形が1つも生まれません。

確かめる順番のまとめ

1. 画像として表示されるか（名前空間・XMLの壊れ）
2. 大きさは意図どおりか（既定の300×150px・座標の枠）
3. 中身は描かれているか（外部参照・書体・色・座標）
4. 動きのある指定の開始状態はどうなっているか

この順番で見れば、原因の切り分けに迷いません。手元のSVGがどれに当たるかを一度に調べたいときは、SVG→PNG変換が該当箇所を一覧で出します。

操作そのものの手順はSVGをPNGに変換して高解像度で書き出すまでの手順にまとめてあります。

参考・出典

• SVG 2 — Conformance Criteria（Processing modes） — W3C （2026-09-05 閲覧）
• CSS Images Module Level 3 — Default Sizing Algorithm — W3C （2026-09-05 閲覧）

本記事は上記の公的機関・公式情報源を参考にしています。最新の情報は各リンク先をご確認ください。