SVGとは、Scalable Vector Graphicsの略である。ベクターグラフィクスは、数値を使って表現する画像を意味する。ベクター（=ベクトル）は、方向と大きさを表す数値のセットことである。

JGPやPNGなどの画像形式が色情報をバイナリ形式で保持するのに対し、ベクター画像はテキスト形式で数値データ（ベクター）を保持し、適宜コンピュータに計算させて画像を表示する。このため拡大・縮小しても画質が下がらないという特徴を持つ。

ベクター画像とラスター画像

コンピュータで扱われる二次元画像は、大きくベクター画像とラスター画像に分けられる。SVGはベクター画像の一種である。他に、AIやPDF（の一部）などもベクター画像に該当する。

ラスター画像は、JPGやPNG、BMPなど、格子状（ラスター状）に色情報を持つ画像形式を指す。大まかな違いを以下にまとめる。

比較項目 ベクター画像 ラスター画像
使用が向くケース ロゴ・テキストなど比較的単純な画像 複雑なグラデーションを持つイラスト、写真
主なデータ テキスト バイナリ
エディタで手書き 知識があれば可能 ムリ
拡大・縮小 強い 弱い
画像サイズ 同じものを表現する場合、ラスター画像より小さい（ただし複雑すぎると逆転する） 大抵の場合、ベクター画像より大きい

SVGのはじまり

SVGは、ベクター画像形式をインターネットで使うべく、W3Cによって提唱された。

ベクター画像の有用性は、早くからWebの分野でも注目されていた。1998年には、W3Cと競合するベクター画像形式が6つあったそうである。それらは名だたる企業がグループで、あるいは独自に開発・提案していたものだった。混沌とした状況を打破するため、W3CはSVGのワーキンググループを発足させた。ただ、W3Cによる変更を快く受け入れてくれるものもあれば、そうでないものもあった。

ワーキンググループは、それぞれの仕様の共通項（ベジェ曲線、マスク、合成など）に目を向け、新しい言語をゼロから開発することにした。大体のブラウザが読み込めて、テキストエディタで編集もでき、拡張性にも優れることなどから、開発言語にはW3Cが標準化しているXMLが選ばれた。

それからなんだかんだあって、2001年9月5日に、こんにちに至るSVGの土台、SVG 1.0が公開された。こんにちはSVG。

SVGの構成要素

SVGは画像を表示するための言語である。xxx.htmlと同じように、xxx.svgという拡張子のファイルも、テキストエディタで内容を編集できる。

SVGは、大まかに以下の3種類の画像を扱う。

  • ベクターグラフィック図形（直線、曲線から構成されるパスなど）
  • 画像（ラスタ画像、ベクター画像など）
  • 文字

これらをグループ化したり、変形したり、合成したりして画像を形作る。また、HTMLのようにスタイルを付けたり、JavaScriptなどのスクリプト言語を使って任意に操作することもできる。

作り方

SVGファイルを使うもっとも手軽な方法は、適当なグラフィックエディタで画像を作成し、SVG形式で出力することである。例えば以下は、無料かつ高機能で知られるツールである。

名称 概要
Inkscape ベクターグラフィックに特化したデスクトップアプリ
Svgator ベクターグラフィックに特化したオンラインツール
Figma オンラインでもオフラインでも使えるWebデザインツール

また、コードで作成する場合は、テキストファイルに必要なタグを書いてxxx.svgという名称で保存すれば良い。例えば以下のような具合である。

html
<svg>
  <circle cx="50" cy="50" r="50" fill="gray" />
  <text x="50" y="55" font-size="16px" text-anchor="middle" fill="white">
    Hello, SVG
  </text>
</svg>

ただ、複雑な画像を手打ちでがんばると目が死ぬ。頭もやられてしまうかもしれない。画像自体は適当なツールを活用するのが無難であろう。その上で、SVG要素やSVGインタフェースのリファレンスなどを参照して調整すれば良い。

使い方

SVGは、Webで使うために開発された。そのため、Webページに埋め込むのが主たる使い方である。方法としては、以下の2つが挙げられる。

  • svgタグをHTMLコード中に直書きする。
  • SVGファイルをimgタグ、あるいはCSSのbackground-imageプロパティでパスを指定して読み込む。

後者の方法だと、JavaScriptでは操作できない点に注意が必要である。

参考