SVG は Scalable Vector Graphics の略です。ピクセルではなく命令として記述された画像のための、W3C によるオープン標準です。「ここに円を描く」「この曲線に沿う」「この形をこの色で塗る」「この単語をこの書体で表示する」といった指示で構成されます。画像は命令の集合なので、どれだけ拡大・縮小してもぼやけたりギザギザになったりせず、ロゴ、アイコン、地図、グラフなどに SVG がよく使われるのはそのためです。
SVG が画像を保存する仕組み
SVG ファイルは XML であり、どのエディタでも開ける読み取り可能なテキストです。<path> 要素には描画コマンドのコンパクトな文字列が入り、<rect>、<circle>、<polygon> はそれぞれ矩形・円・多角形を描画します。<text> には実際に選択可能なテキストが入り、<g> は要素をグループ化して一緒に移動やスタイル変更をできるようにします。viewBox 属性は座標系を定義し、これによって描画全体がきれいにスケーリングされます。
テキストで構成されているため、SVG は非常によく圧縮できます。gzipped SVG（拡張子 .svgz が付く場合もあります）は、元のサイズのごく一部になることがよくあります。テキストであるということは、SVG を CSS でスタイリングしたり、アニメーションさせたり、スクリプトで制御したりできるということでもあります。ブラウザは SVG を不透明な画像ではなく、ドキュメントの一部として扱います。
この最後の機能には、知っておくべきセキュリティ上の側面があります。SVG には <script> 要素を含めることができます。ユーザーがアップロードできる形式として SVG を受け付ける場合は、必ずサニタイズするか、スクリプトが実行されない形で配信する必要があります。そのため、ラスター形式はすべて受け付ける一方で、SVG は拒否するサイトもあります。
SVG は写真を格納する形式としては適していません。内部にラスター画像を埋め込むことはできますが、その場合は XML で包まれたピクセル画像になるだけで、スケーリングのメリットは得られません。
SVG が保持するメタデータ
SVG には専用の <metadata> 要素があり、標準で中身が細かく決められていないため、エディタは多くの情報を書き込みます。最も一般的なのは Dublin Core 用語を使った RDF で、dc:title、dc:creator、dc:date、dc:description、dc:rights とライセンス URI などが含まれます。<title> と <desc> 要素はルートや個々の図形にも置くことができ、スクリーンリーダー向けのアクセシビリティ用テキストも兼ねます。
さらに、エディタ自身の管理情報もあり、通常はこれが最も大きな部分を占めます。Inkscape は独自の名前空間を一式書き込みます。ドキュメントウィンドウの位置とサイズ、ズームレベル、最後に保存したときのカーソル位置、ガイド線、グリッド設定、レイヤー名と可視状態、そして inkscape:version 文字列などです。Illustrator は独自のドキュメント識別子や履歴を含む XMP パケットを埋め込みます。これらはいずれも描画自体には関与しません。
ここから実用的なポイントが 2 つあります。エディタのデータはファイル全体の大部分を占めることが多いため、公開前に SVG を最適化アプリに通すと、サイズが半分になることもよくあります。そしてレイヤー名はあなたが入力したテキストです。<g inkscape:label="client logo v3 REJECTED"> のような名前は画像上では見えませんが、ファイルを開けばそのまま見えてしまいます。
SVG を使うべき場面
写真ではなく描いたものには SVG を使いましょう。ロゴ、アイコン、図、グラフ、イラスト、地図などです。1 つのファイルであらゆる画面密度に対応できるため Web に適しており、任意のサイズに拡大して印刷できるため印刷用にも適しています。
写真や、階調が連続している画像には PNG または JPG を使用してください。SVG に対応していない、あるいは対応が不十分な古いソフトウェアでも開けるようにする必要がある場合は、フラットなラスター画像も書き出しましょう。また、公開前にはエディタのメタデータを削除してください。ファイルサイズを小さくできるほか、レイヤー名には公開を想定していない情報が含まれていることもあるためです。