SVGとは？ベクター形式をわかりやすく解説

1. SVGとは？

SVGとはスケーラブルベクターグラフィックス（Scalable Vector Graphics）の略で、XMLを基盤とするオープンなベクターグラフィックス形式で、W3Cが標準化しています。PNGやJPGが画像を画素の格子として記録するのに対し、SVGは数式で図形を描き表します。直線、円、ベジェ曲線——それぞれが座標とパスのコマンドとしてファイルに書き込まれます。

だからこそSVGは拡大してもぼけることがありません。ブラウザは画素を引き伸ばすのではなく、新しいサイズで数式をもう一度描くだけだからです。「ベクター」が意味しているのはこのことです。

2. SVGとPNG / JPGの違い

項目	SVG	PNG / JPG
画像の記録方式	数学的なパス（ベクター）	画素の格子（ラスター）
拡大したとき	歪まず無限に拡大できる	ジャギーとぼけが出る
ファイルサイズ	シンプルな図形ならごく小さい（数KB）	解像度とともに比例して増える
編集のしやすさ	テキストとして編集・配色変更・アニメーションできる	画像編集ソフトが必要
向いている用途	アイコン、ロゴ、イラスト、グラフ	写真や複雑なライティング

3. SVGは主に何に使われるか

• Webサイトのアイコンとロゴ：1つのSVGでどの画面密度にも対応し、Retinaディスプレイでも鮮明に保たれます；
• イラストとグラフ：EChartsやRechartsといったデータ可視化ライブラリは標準でSVGを出力します；
• 印刷と彫刻：レーザー彫刻機、ビニルカッター、UVプリンターはSVGのパスを広く受け付けます；
• アニメーション：SVGのパスはCSS / SMIL / JavaScriptで直接制御でき、線を描く効果などが実現できます。

4. SVGはどうやって開いて編集する？

主要ブラウザ（Chrome / Edge / Firefox / Safari）ならSVGファイルを直接開けますし、IllustratorやFigma、Inkscape（無料）などのデザインソフトで編集することもできます。配色を変える、背景を消す、アートのうち一部だけ消したい、という程度ならPolySVG オンラインSVGエディタを使えば、ソフトをインストールせずに済みます。

5. PNG / JPGをSVGにするには？

PolySVG 画像→SVGツールを使います。ビットマップをアップロードすれば、自前のモデルが色量子化・輪郭トレース・曲線フィットを自動処理し、数秒で編集可能なSVGが得られます。ワンクリックで背景も除去できます。すべて無料で、登録も不要です。

まとめ：SVGは「数式で描く」形式なので、アイコン・ロゴ・拡大が必要なものには自然に適しています。写真的内容はJPG / WEBPのほうが向いています。