SVGとは｜PNG・JPEGとの違いと、開けないときの変換方法

SVGとPNG・JPEGは何が違うのか

PNGやJPEGは、色のついた点（ピクセル）を格子状に並べて絵を記録します。これをラスタ形式と呼びます。対してSVGは「半径50の円を、この位置に、この色で描く」という作図の指示を文字で記録した形式です。表示するときにその指示を読んで描き直すため、どれだけ拡大しても輪郭がぼやけません。

SVGの中身はXMLというテキストなので、メモ帳で開くとタグが並んでいるのが見えます。これが「SVGをメモ帳で開くと文字化けしたように見える」正体で、ファイルが壊れているわけではありません。ラスタ形式どうしの違いはPNG・JPEG・WebPの違いと使い分けにまとめています。

SVGが使える場所・使えない場所

トラブルのほとんどは「渡した先がSVGに対応していない」ことから起きます。先に対応状況を把握しておくと、渡す前に変換すべきかどうかが判断できます。

投稿フォームでSVGが弾かれるのは、容量や見た目の問題ではなく安全上の理由です。SVGはテキストなので中にスクリプトを書き込むことができ、受け取る側のサイトでそれが動くと困るため、あらかじめアップロードを禁止しているサービスが多くあります。自分が作ったSVGでも同じ扱いになるので、投稿用途では最初からPNGを用意しておくほうが早いです。

SVGをPNG・JPEGに変換する手順

SVGは拡大しても劣化しないぶん、PNGに変換するときは「どの大きさで書き出すか」を自分で決める必要があります。ここがPNGどうしの変換といちばん違う点です。

1. 1

   SVGに幅と高さが入っているか確認する

   テキストエディタで開き、先頭の<svg>タグにwidthとheightがあるか見ます。なければ書き足すか、viewBoxの値と同じ比率で指定します。指定がないSVGは、変換時に既定のサイズで扱われて小さく書き出されることがあります。

2. 2

   必要な仕上がりサイズを決める

   Web用なら表示したい幅の2倍、印刷用なら必要なピクセル数から逆算します。SVG側のwidth・heightを目標サイズに書き換えてから変換すると、そのサイズのPNGが得られます。

3. 3

   変換ツールにドラッグする

   画像フォーマット変換ツールにSVGを読み込ませ、出力形式にPNGを選びます。処理はブラウザの中で完結し、画像はサーバーに送信されません。

4. 4

   背景の扱いを決める

   PNGなら背景が透明のまま残ります。JPEGは透過を保持できないため、透明部分は白で塗りつぶされます。白背景に置くと困る素材はPNGのまま使ってください。

開けない・崩れるときの切り分け

SVGの不具合は「開けない」「開いたが見た目が違う」の2種類に分かれます。症状から原因を絞ると、直し方が決まります。

いちばん多いのはフォントの問題です。SVGの中でテキストが文字のまま保持されていると、開いた端末にそのフォントがない場合に別の書体へ置き換わり、幅が変わってレイアウトが崩れます。人に渡すSVGは、書き出し時に文字をアウトライン化しておくと確実です。ロゴを差し替えるときの確認項目はロゴのリニューアルにまとめています。

PNGからSVGに戻せるのか

結論からいうと、自動では戻せません。PNGはピクセルの集まりなので、「ここは円」「ここは文字」という情報が残っていません。変換ソフトが行うのは、色の境目を推定して輪郭線を引き直すトレースという処理で、元の図形を復元しているわけではありません。

• 単色でくっきりした形（シルエット、単純なマーク）は、トレースでもそれなりの結果になります。
• 細い線やグラデーション、影のついたロゴは、輪郭が波打ったり色数が増えたりして破綻しやすいです。
• 文字はパスになるため、あとから文言や書体を直せません。
• JPEGを元にすると、圧縮のノイズまで図形として拾ってしまいます。

つまり、ロゴを長く使うつもりなら、最初にSVGを受け取っておくのがいちばん確実です。制作を依頼するときは、SVGと、書き出し済みのPNG（大・中・小）をセットでもらう形にしておくと、Web・資料・SNSのどこに使うときも作り直さずに済みます。

よくある質問

SVGファイルはどうやって開けばいいですか？

いちばん簡単なのはブラウザにドラッグ＆ドロップする方法です。ChromeでもSafariでもそのまま画像として表示されます。ダブルクリックでコードが開いてしまうのは、既定のアプリがテキストエディタになっているためで、ファイルが壊れているわけではありません。編集したい場合はIllustratorやInkscape、Figmaなどのベクター編集ソフトで開きます。人に渡すときは、相手の環境で開けるとは限らないのでPNGも添えると親切です。

SVGとPNGはどちらを使うべきですか？

自分のWebサイトに置くロゴやアイコンならSVG、他人やサービスに渡す画像ならPNGが基本です。SVGは拡大しても劣化せず、単純な図形ならファイルも小さく済みますが、SNSや投稿フォーム、Googleスライドなど受け付けない場所が残っています。写真はどちらも向かず、JPEGやWebPを使ってください。迷ったら、SVGを元データとして保管し、使う場所ごとにPNGを書き出す運用にすると管理が楽です。

SVGを印刷すると文字がずれるのはなぜですか？

SVGの中に文字がテキストのまま入っていて、印刷する端末にそのフォントが入っていない場合、別の書体に置き換えられるためです。書体が変われば文字幅も変わるので、行が折り返したり枠からはみ出したりします。書き出すときに文字をアウトライン化（パス化）すれば、図形として扱われるので崩れません。印刷所に入稿する場合は、そもそもPDFやAI形式を指定されることが多いので、事前に対応形式を確認してください。

PNGをSVGに変換できるツールはありますか？

トレースという処理で近いものを作ることはできますが、元のSVGが復元されるわけではありません。単色のシルエットやシンプルなマークなら実用になることもありますが、細い線やグラデーション、文字を含むロゴでは輪郭が乱れます。なお当サイトの画像フォーマット変換ツールが出力できるのはPNG・JPEG・WebPで、SVGへの書き出しには対応していません。SVGが必要なら、制作元に元データを請求するのが確実です。