スマートフォン向けのWebサイトやWebアプリを中心に、「SVG」がいま再注目されています。単なる画像フォーマットを超えて、最近ではさまざまな表現に広く活用されるようになりました。 本連載では、SVGの概要から基本的な使い方、Web制作での活用方法までをじっくり解説。CSSによる装飾やJavaScriptとの連携など、すでに使っている人がもっと使いこなすためのテクニックも紹介します。（編集部）
Webの表現を広げるSVGの魅力
SVGと聞くと、「単なるベクターの画像でしょ」と思う方も多いでしょう。確かにSVGは「Scalable Vector Graphics」の略なので、ベクター形式の画像フォーマットであることには間違いありません。
一方で、SVGには、PNGやJPEGといった、他の画像フォーマットとは異なる魅力があります。SVGをWebページに使うことで、これまでのHTMLやCSSだけでは実現できなかった表現できるのです。いくつか例を見てみましょう。
HTMLだけではできないテキスト表現
デモ1（画像をクリックするとデモを表示します）
最初に紹介するのは、SVGを使ったテキスト表現のデモです。SVGを使うと上のデモのような凝ったテキスト表現ができます。「Nice Text」の文字はPhotoshopで作った画像に見えますが、実はテキストをSVGで表示しています。
テキストなので選択もコピーもできますし、テキストエディターで内容を打ち替えられます。CMSなどでページを生成する動的なWebサイトでも、魅力的な見出しを作れます。
地図などの斜め、曲線を活かしたUI
デモ2（画像をクリックするとデモを表示します）
SVGの曲線の力を活かせば、地図のような複雑な形状の選択もスマートに実現できます。上の地図を表示するデモでは、各地方の形に沿って反応するホバー効果をつけています。それぞれの領域ごとにリンク先となるURLも設定できます。
モーフィングアニメーション
デモ3（画像をクリックするとデモを表示します）
SVGならではの、パス情報を活かしたアニメーションもできます。上のデモでは、マウスをホバーすると、アイコンの形状がなめらかにアニメーションしながら変わります。
どうでしょうか？ 「ただの画像」ではない、SVGの表現力を感じられましたか？ これらが、どのような仕組みで動いているのかは、この連載で後々解説するとして、今回は「SVGって何？」のおさらいから進めていきましょう。
SVGの性質をおさらい
SVGは、最初に述べたようにベクター画像のフォーマットです。ベクター画像に対して、PNGやJPEGのような画素（ピクセル）で構成する画像形式を「ラスター画像」と呼びます。
ピクセルの集合によって表現されるラスター画像の場合、拡大するとぼやけた表示になってしまいますが、ベクター画像の場合はピクセルの概念が無いため、どんなに拡大してもくっきりとした表示が保たれます。
ラスター画像はピクセルの塗りつぶしが画像になる。ベクター画像は点と点の間を結ぶ線が画像になる
画素がないのになぜ画像を表示できるのでしょうか？ SVGファイルの内部には、点の座標が記録されており、それらの点と点の間にブラウザーが線を引くことで、画像を表示しているのです。
画像を拡大すると、点と点の距離は離れますが、その間に引かれる曲線は自動で計算されます。そのため、どんなに拡大してもくっきりとした表示を保てるのです。
SVGのファイルをテキストエディターで開いてみると、もう1つのおもしろい特徴がわかります。
SVGの画像（左）をエディターで開いたところ（右）。ハンバーガーの画像もタグで構成されているのがわかる
HTMLを書いた経験があれば、親近感を感じるのではないでしょうか。そうです、SVGはHTMLと同じく「タグ」で構成された、マークアップ言語なのです。少し違うのは、内容のほとんどが数字で構成されていること。これらの数字は、先ほど解説した、点の座標です。
このように、SVGはベクター画像という特徴を持ち、かつ、マークアップ言語でもあるという、普段Web制作をしている人にとってはとても親しみやすい存在なのです。
