SVGファイルとは？形式・拡張子・用途と開き方

SVGとは：ファイル形式のしくみ

SVGは、XMLで書かれたテキストファイルです。ピクセルごとの色を保存する代わりに、「ここに円を描く」「この点を通るパスを描く」「この色で塗る」といった命令を保存します。ブラウザや編集ソフトはその命令を読み、表示するサイズに合わせて画像を描きます。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="#C8F031"/>
</svg>

このコードだけで完全なSVGになります。100×100単位の範囲に、ライムグリーンの円をひとつ描いたものです。テキストなので、SVGはコードエディタで開いたり、検索したり、圧縮したり、手で書き換えたりできます。

SVGはWorld Wide Web Consortium（W3C）のオープンな標準規格で、最初に公開されたのは2001年です（W3C）。最新のブラウザはすべて、プラグインなしでSVGを表示できます。

SVGファイルの拡張子

SVGファイルの拡張子は.svg、メディアタイプはimage/svg+xmlです。.svgzという圧縮版もありますが、中身は同じファイルをgzipで圧縮したものです。カッティングマシンのソフトやフォント制作ツールでもSVGが使われますが、形式は同じです。

SVGファイル形式の主な用途

Webサイトやアプリのロゴ・アイコン。1つのファイルで、どの画素密度の画面でもくっきり表示されます。
イラスト、グラフ、地図。拡大したり大きく印刷したりする必要があるものに向いています。
アニメーションやインタラクティブな図。図形ごとにCSSでスタイルを付けたり、JavaScriptで変化させたりできます。
カッティングマシンやレーザーカッター。図形の輪郭に沿って動きます。
ファビコン。最新のブラウザで使えます。

SVGは写真には向いていません。写真は色調が連続して変化するため、SVGで表すには細かな図形が何百万も必要になります。写真の保存には、JPGやWebPのほうがはるかに効率的です。

SVGファイルの開き方

SVGはどのWebブラウザでも開けます。ChromeやFirefox、Safari、Edgeのウィンドウにファイルをドラッグするだけです。画像とコードを並べて見たいときは、当サイトのSVGビューアを使ってください。絵柄を編集するなら、Inkscape（無料）、Figma、Adobe Illustratorなどのベクター編集ソフトを使います。Windowsのエクスプローラーは拡張機能を入れるとSVGのサムネイルを表示でき、Macではスペースキーを押すとクイックルックでプレビューできます。

SVGとPNGの違い

	SVG	PNG
構成要素	図形と座標	ピクセル
拡大・縮小	どのサイズでもくっきり	拡大するとぼやける
透過	あり	あり
テキストとして編集	できる	できない
向いているもの	ロゴ、アイコン、図解	スクリーンショット、細かい画像、SVGを受け付けない場所

変換はどちらの方向にもできます。PNG→SVG変換はピクセルを図形にトレースし、SVG→PNG変換は図形を好きなサイズのピクセル画像に書き出します。

SVGファイルについてのよくある質問

SVGはベクターファイルですか？

はい。SVGはScalable Vector Graphicsの略で、ピクセルではなく図形を保存します。

SVGファイルに写真を入れられますか？

SVGにはビットマップ画像を埋め込めますが、中の写真がベクターになるわけではなく、拡大するとぼやけます。

SVGファイルは安全に開けますか？

SVGにはスクリプトを入れることができ、ブラウザで直接開くと実行されます。出どころのわからないファイルは、当サイトのビューアのように画像として描画するツールで開いてください。

SVGファイルのサイズが大きいのはなぜですか？

デザインツールがメタデータや桁数の多い小数を書き込むためです。SVG圧縮ツールを使えば、絵柄を変えずにそれらを取り除けます。