SVGファイルとは?

SVGの正体

SVGをテキストエディタで開くと、読めるテキストであることが分かります。プレーンなタグ形式であるXMLで書かれていて、すべての形が数値と単語で記述されています。path要素は輪郭をなぞります。rectは長方形を描きます。テキスト要素には選択可能な本物の文字が入っています。固定された点の格子に焼き込まれているものは何もありません。

仕掛けはそれだけです。写真はピクセル数が決まっているため、拡大するとぼやけてブロック状になります。SVGには固定解像度がありません。拡大縮小すると数式が再計算されるだけなので、ロゴは名刺でも看板でも同じように鮮明に見えます。少数の形でできたフラットなアートなら、何百万もの色付きの点ではなく短いレシピを保存しているだけなので、ファイルもたいてい非常に小さくなります。

SVGが得意なこと

SVGが真価を発揮するのは、ロゴ、アイコン、ウェブグラフィックです。ロゴファイル1つが必要なあらゆるサイズに対応するので、10種類ものPNGを書き出す必要がありません。アイコンは高解像度画面でもくっきり鮮明なままです。整った形で構成されたチャート、図解、イラストもすべてこの形式に向いています。

写真にはあまり向きません。顔や風景の写真には数式で記述できるきれいな形がないため、そこではJPGやPNGのようなラスター形式が適切です。目安としては、ペンで描けそうなものならSVGが合い、カメラから出てきたものなら合わない、と考えてください。

SVGの開き方と編集方法

開くのは簡単です。最近のウェブブラウザはすべてSVGを読めるので、ファイルをChrome、Safari、Firefox、Edgeにドラッグすればすぐに表示されます。ただしそれは表示であって編集ではありません。形や色、テキストを変えるには、この形式を理解するベクターエディタが必要です。

エディタによってはインストールとライセンスが必要です。ブラウザだけで済ませることもできます。Rayziaなら rayzia.com/vector/ で無料でSVGをオンラインで開いて編集でき、クラウドに保存すると選ぶまでファイルはあなたのデバイスに留まります。編集中のドキュメントは終始本物のSVGなので、書き出されるものは描いたものそのままで、途中の変換で濁ることがありません。

誰のものでもないオープン標準

SVGは特定企業のソフトに縛られた独自形式ではありません。HTMLやCSSを手がけるのと同じ団体、W3Cが管理するオープン標準で、その歴史は20年以上に及びます。どんなツールも自由に読み書きできます。

これは長い目で見て重要です。クローズドな形式のファイルは、それを作ったソフトが消えたり所有者が変わったりすると閉じ込められる恐れがあります。SVGのようなテキストベースのオープン標準なら、何年経ってもブラウザで開けますし、対応するツール間で作業を失わずに自由に移動できます。

よくある質問