SVGファイルとは

SVG はプレーンテキスト形式です。どのエディターでも開けます。 ピクセルではなく図形と座標を保存するので、どんな大きさでも鮮明なままです。看板の大きさまで引き伸ばしたロゴでも、失うものはありません。 ウェブ、ロゴと線画、編集のために使われます。

拡張子は .svg、正式名称は Scalable Vector Graphics です。ただしどちらも、そのファイルが中に何を持てるかほどには多くを語りません。このページの残りは、その中身についての話です。

W3C が 2001 年に公開しました。 仕様は SVG 1.1 です。

古さが役に立つのは、ごく実務的な理由からです。形式が古いほど、それを覚える時間が多くのプログラムに与えられてきたということだからです。

仕様書がそのまま公開されているので、中身を推し量るのではなく文書を読んで実装できます。この形式が数多くのプログラムに載っているのはそのためであり、20 年前に書かれたファイルが今も開けるのもそのためです。ただし「仕様が公開されている」ことと「使用料が要らない」ことは別の話です。中でコーデックを包んでいる形式では、特許のライセンスは仕様書が答えていない別の問題として残ります。

SVG ファイルは中身をそのまま保存します。保存し直しても何も変わらないので、開いて、直して、また保存する——それを何度繰り返しても劣化は積み上がりません。これが、渡すための形式ではなく作業のための形式である理由です。

SVG ファイルはアルファチャンネルを一緒に持てるので、ロゴの縁は後ろに何があってもなめらかなまま残ります。白い箱に閉じ込められた状態で届くことはありません。

SVG ファイルは静止した 1 枚ではなく、アニメーションまるごとを保存できます。変換の前に知っておくべきことです。1 フレームしか持てない変換先は、最初の 1 枚を取って残りを落とします。しかもたいていは、何も言わずにです。

RGBで扱えます。

1 チャンネルあたり 8 ビットは、画面が表示するぶんであり、渡すための形式がほぼ例外なく備えているぶんです。

SVG ファイルは画像の各部分を統合せずに別々のまま保ちます。これが作業用ファイルたるゆえんです。変換先になりうる形式のほぼすべてがそれを統合してしまい、その統合は取り消せません。レイヤーの入った元ファイルは残しておいてください。

Inkscape、Adobe Illustrator、Figmaが読めますし、同じ種類のプログラムならたいてい読めます。

ファイルが開かないとき、形式が悪いことはめったにありません。たいていはプログラムのほうが形式より古いのです。もっと古い形式に変換してしまうのが確実な逃げ道で、このサイトの残りの部分はそのためにあります。

これは今のブラウザーならどれでも読めます。

ですからページに置くのも、メッセージに添えて送るのも、安心してできます。相手が何をインストールしているかを考える必要がありません。

SVG は、開いて手を入れるために作られています。作業が続いているあいだはこの形式でファイルを持ち、完成したものが必要になるたびに、ここから書き出してください。

SVG は XML の文書です。テキストエディターで開くと、読める指示が並んでいます。この座標にこの半径の円を描け、このパスをこの色で塗れ、この位置にこの文字を置け、といった具合です。ファイルの中に画素は一つも存在しません。

この一つの性質が、他のどの画像形式ともこれを違うものにしています。バージョン管理で差分を取れ、手で編集でき、スクリプトで生成でき、HTML を圧縮するのと同じ gzip で圧縮でき、検索もできます。壊れた SVG はたいてい中を読めば診断できるという点も、壊れた PNG にはない性質です。

ファイルは色の値のグリッドではなく図形を記述しているため、描画する側は求められた大きさでそのつど新たに描きます。24 ピクセルで表示するロゴも、1 メートル幅で印刷するロゴも、同じファイルから来ていて、どちらでも正確です。

これがロゴ、アイコン、図、グラフには SVG が正解で、写真には不正解である理由です。写真には記述すべき図形がありません。写真を SVG に変換すると、色の付いた四角形の巨大な塊になるか、ポスター化された近似になるかのどちらかで、どちらも誰も望んだものではありません。

二つの属性が、レイアウトの中で SVG がどう振る舞うかを決めます。width と height は本来のサイズを与え、viewBox は図形が描かれる座標系を定義します。viewBox があれば、絵はページが与えたどんな枠にも合わせて拡大縮小されます。

SVG が間違ったサイズで表示されるという不満のほとんどは、ここに原因があります。固定の寸法を持ち viewBox のないファイルは CSS によるサイズ指定を無視し、デザインツールが書いた大きさのまま表示されます。アートワークに合った viewBox を加えるのはたいてい一行の修正で済み、書き出しただけのファイルを実際に使える素材に変えてくれます。

文字を含む SVG は、ウェブページとまったく同じように、フォントを名前で参照します。その書体を持たない端末では、描画する側が別のものに置き換え、字幅が変わり、慎重に配置されたロゴタイプがずれたりはみ出したりします。

標準的な対処は、文字をパスに変換することです。すべての文字が輪郭になり、どこでも見た目が保証される代わりに、文字は永久に編集も検索もできなくなります。ロゴにはこれが正しい取り引きですが、軸ラベル付きのグラフや、保守し続ける予定の図にはそうではなく、文字が生きたままのバージョンも別に残しておく価値があります。

SVG が img タグで読み込まれるのではなく HTML に直接書き込まれると、その要素はページの一部になります。CSS はホバー時にパスの色を変えられ、スタイルシートはダークモードに合わせてアイコンを調整でき、JavaScript は個々の部品をアニメーションさせられます。

img タグや CSS の背景として読み込まれた場合、これらはどれも当てはまりません。SVG は隔離された状態で描画され、ページはその中に手を伸ばせません。この違いがどちらの手法を使うべきかを決め、同じファイルがサイトのある場所ではスタイル可能で、別の場所では反応しないという状況を生みます。

これは絵ではなく文書なので、SVG は script 要素や外部参照、リンクを含められます。自分のドメインから配信され直接開かれると、そのスクリプトはサイトの権限で実行されます。これは PNG にはないクロスサイトスクリプティングの経路です。

多くのアップロードフォームが SVG を一律拒否するのはこのためで、利用者が投稿する SVG を受け付けるサイトは、それを信用するのではなく無害化すべきです。受け取る側としても知っておく価値があります。見知らぬ相手から届いた SVG は、画像というより HTML ファイルに近く、ブラウザーで開く行為は見た目ほど中立的ではありません。

Illustrator、Figma、Sketch はかなりの量の足場を書き出します。エディターのメタデータ、レイヤー名、空のグループ、小数点以下十六桁の座標、誰も参照していない定義などです。800 バイトで済むはずのアイコンが、8 キロバイトで書き出されることもよくあります。

最適化ツールは、描かれる内容を変えずにこれらをすべて取り除いてくれ、六割から八割の削減は普通です。テキストであるため通信時にもよく圧縮され、サーバーが gzip や brotli で送ればさらに縮みます。よく準備されたアイコン集の SVG が、一枚の PNG より小さいことがあるのはこのためです。

SVG は base64 のデータ URI としてビットマップを埋め込むことができ、一部の書き出し経路はそれを何も告げずに行います。この形式が表現できないエフェクトを持つ図形は画像として平坦化され、SVG で包まれます。

結果として、拡大縮小できない .svg 拡張子のファイルができあがります。中身が固定されたグリッドの画素だからです。SVG を拡大したときにぼやける場合、たいていこれが原因で、修正は書き出しの段階ではなくデザインファイルの側で行う必要があります。

固定サイズのラスターが必要で透明度が重要なら PNG です。画素数は意図的に選んでください。それを決めることが、これから手放すものだからです。PNG を受け付けない場所が行き先なら JPG で、透明度は不透明な背景色になることを受け入れる必要があります。印刷が行き先なら PDF で、どちらも図形を記述する形式なので何も失われません。

どの場合も SVG は残しておいてください。ラスター化はどれも一つのサイズについての決断であり、原本だけが他のどんなサイズも生み出せます。写真から SVG への変換は、ほとんど意味をなさない唯一の方向です。写真には記述すべき図形がそもそもありません。