はじめに

SVGは、Android2.0系やIE8では対応していませんので、今の段階で気軽には使いづらい技術です。しかし、iOS Safari向けのWebページなど、限られた環境に向けては効果を発揮します。今回はマークアップエンジニアが知っておくべきSVGの仕様や使い方を見直してみましょう。

画像でありテキストである

「SVG＝スケーラブルなベクター形式」は、SVGの大きな特徴です。このことは多くの人が認識しているでしょう。

SVGにはソースコードが存在し、これにより画像が描かれているという特徴もあります。つまり、SVGは画像でありコードなのです。例えば、ChromeでSVG形式の画像をブラウザで直接表示すると、「View Page Source」から、SVG画像のソースコードを表示することができます。ソースコードの内容については後述します。

HTMLに曲線をもたらす

SVGのソースコードは、HTMLと同じくタグでマークアップします。そして、HTMLとSVGのソースコードは混ぜて使うことができ、HTMLの拡張としても扱うことができます。例えば、次のサンプルは、HTMLにSVGを混ぜた例です。図形のクリックできる範囲に注目してみてください。

gzipが効く

PNG、JPEGなどのビットマップ画像はバイナリーのデータです。一方で、SVGはテキストデータです。そのため、SVGにはgzip圧縮が機能します。SVGファイルは軽量ですが、サーバから配信される際には圧縮され、デスクトップ上でのファイルサイズから、さらに2/3ほどの容量*になります。

SVGの利点

SVGはスケーラブルなため、小さなサイズのSVG画像を大きく引き伸ばしても劣化しません。これは、モバイル端末において、ピンチアウト（拡大）をしたときや、Retinaディスプレイなどのピクセル密度の高い画面でも画素が劣化しません。

また、前述したようにSVGはテキストデータのため、gzip圧縮が有効です。つまり、ビットマップ画像を使うよりも、ダウンロードの速度が速くなりパフォーマンスが改善します。

これらの特徴から、SVGはマルチデバイスの対応にとても相性がよさそうであることがわかります。しかし、そこにはひとつの壁があります。SVGは、IE8、Android2系では利用できません。IE9以降、Android3.0以降から対応しています。ですので、事前にWebサイト／アプリケーションのターゲットブラウザ対象を確認し、これさえ解決すれば、SVGを採用することに意味が出てくるでしょう。

SVGの書き方

SVGは画像ですが、内容はXMLでHTMLの親戚のようなコードです。もちろんテキストエディタを使えば、SVGを書くことができます。

ここでは簡単な書き方をご紹介します。

ここにあるサンプルのソースコードは、次のとおりです。

<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
  <circle cx="150" cy="200" r="100" fill="#06f"></circle>
</svg>

ネームスペース

1行目では、xmlns属性により、SVGのネームスペースを表しています。svgタグ配下では、すべての要素が「http://www.w3.org/2000/svg」に属す要素、つまりSVGの要素として扱われます。このXMLネームスペースはXMLの仕組みです。(ネームスペースはURLですが、ただの識別子の文字列であり人名でいう名字のようなものです。URLを入力して開くページには意味がありません)

例えば、HTMLにはa要素がありますが、SVGにもSVGのa要素があります。同名の要素が混ざらないようにするため、ネームスペースという仕組みを用いています。このネームスペースをミスタイプしてしまうと、SVGではないまったく別の言語の要素となってしまうので注意しましょう。

widthとheight

1行目では同じくwidthとheight属性が指定されています。これは、ビューポート、つまり「窓」の大きさを決めています。

viewBox属性

viewBox属性は「窓の中の座標」を決めています。

widthが512、heightが512に対して、viewBox="0 0 512 512"と指定しています。つまりviewportは、次のようになります。

• 左上の座標が x: 0, y: 0
• 右上の座標が x:512, y: 0
• 右下の座標が x:512, y:512
• 左下の座標が x: 0, y:512

viewBox属性の値を変えると、窓に対する座標の扱いをずらすことができます。上記のように、ビューポートの大きさとビューボックスの座標を一致させておくと、座標1を1pxとして扱うことができます。

circle要素

2行目には円を描くためのcircle要素があります。属性値はそれぞれ次の意味を持ちます。

• cxは中心のx座標(center xを意味する)
• cyは中心のy座標(center yを意味する)
• rは半径の長さ(radiusを意味する)
• fillは塗り色

これにより<circle cx="150" cy="200" r="100" fill="#06f"></circle>の行はviewBoxにより作られた座標系上の（150, 200）を中心に、半径100の円が描かれているわけです。

なお、SVGでは長さはすべて座標を示します。そのためpx（ピクセル）などの単位をつけることができません。

その他の要素

このほかもSVGにはたくさんの要素があり、例えばpath要素という自由な曲線を扱うことができる要素も存在します。SVGの図形では主にpath要素を使うことになりますが、複雑な曲線を描くにはコードを書いて図形を完成させるという方法は現実的ではありません。Adobe IllustratorやInkscapeはSVGの書き出しに対応しており、これらのツールを使って図形をデザインすれば、直感的にデザインし、意図した通りのSVGファイルを手に入れることができるでしょう。ツールを使ったSVGファイルの作成方法は、本シリーズの次回からご紹介します。

埋め込み方法

ここまで、SVGファイルの内容をご紹介しました。SVGファイルは単体で使うよりも、HTMLに埋め込んでこそ、Webコンテンツの一部となりその真価を発揮します。埋め込む方法は複数あります。

画像としてHTMLに埋め込む

SVGは画像ですので、HTMLに画像として埋め込むことができます。使い方はPNGやJPEGを埋め込むのと同じく、img要素として埋め込みます。

<img src="path/to/image.svg" alt="" width="320" height="320">

画像としてCSSに埋め込む

SVGは画像ですので、CSSでbackground-imageなどから、画像として参照することもできます。

.box{
  background-image: url(path/to/image.svg);
}

要素として埋め込む

SVGはタグとしてHTMLに混ぜて使うこともできます。HTML内にsvg要素を配置すると、その配下ではSVGの世界となります。svgタグには、widthとheightを明示しておきます。HTMLに埋め込む際には、SVGのxmlns属性を省略することもできます（もちろん、書いてもかまいません）。省略した場合、svg要素の子孫要素はxmlns="http://www.w3.org/2000/svg"に属する要素として扱われます。

<div>
  <svg width="320" height="320">
    <circle cx="100" cy="100" r="100" fill="red">
  </svg>
</div>

この場合、SVGもDOMを形成します。ですからJavaScriptでDOM操作も可能です。DOMツリーの様子は次のようになっています。

もちろん、JavaScriptでSVGファイルをAjaxにより取得し、HTML内にappendすることも可能です。

外部メディアとして埋め込む

SVGは外部オブジェクトとして、object要素やembed要素として埋め込むこともできます。ただし、ほかの方法が充実しているため、この方法はあまり利用することはないでしょう。

<object data="path/to/image.svg" width="150" height="150" codetype="image/svg+xml">代替コンテンツ</object>

<embed src="path/to/image.svg" width="150" height="150" type="image/svg+xml">

なお、object要素、embed要素ともにHTML5の仕様に含まれています。

まとめ

SVGはとても特殊で画像でありコードであるという性質を持っています。画像の性質を活かせば、劣化しない特性を利用できます。コードの性質を活かせば曲線を活かしたUIを作ることもできます。ちなみに以前、リアルタイムでグラフを表示するUIを作るために、aiファイルから「SVGのコーディング」を仕事で扱ったこともあります。こんなふうに、Webに新たなUIを取り入れる際には、SVGにも注目してみるとおもしろいでしょう。