スタートアップ SVG

第2回 SVG実習

この記事を読むのに必要な時間:およそ 5.5 分

前回はSVGの概要を解説したので,今回はSVGの具体的な書き方をざっくりと見ていきます。

と,その前に前回のおさらいとして,SVGをウェブページで用いる方法を2つにまとめます。

  1. SVGをXMLとして記述し,svgファイル(もしくはdataスキームなど)をobjectタグなどで埋め込むか,もしくはXHTMLを用いてHTMLに埋め込む(Firefox 4.0betaやIE9ppなどはHTML(XHTMLでない)に直接記述することも可能)
  2. JavaScriptから動的にSVGを作る

SVGをXMLとしてあらかじめ記述しておく方法は画像フォーマットとしても利用できますし,InkScapeのようなグラフィカルなインターフェースで作成したものを表示するのに向いています。一方,JavaScriptでSVGを描画する方法は動的に図を描けるので,データを元にグラフを描くといったケースに適していますし,Raphaelを用いることでIE 6~8にも対応することができます。

この特集では,svg単体の書き方,JavaScriptから動的にSVGを描く方法,さらにRaphaelで描く方法という順番で見ていきます。まずはSVGを単体で描くときの決まりごとを見ていきます。

文書型とルート要素

SVG文書はXML文書でもあるので,XML宣言,文書型宣言,ルート要素の3つを軸に構成されます。XML宣言は文書の文字コードがUTF-8かUTF-16で,XMLのversionが1.0,スタンドアロン文書宣言がnoという条件を満たしていれば省略が可能です。

続いて,SVGの文書型宣言は次のとおりです。

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
        "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

そしてルート要素はsvgです。svg要素に指定できる属性はDocument Structure - SVG 1.1 (Second Edition) で定義されているように数多くありますが,特に重要なのは名前空間の宣言です。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

このように,svgの名前区間と,必要に応じてxlinkの名前空間などを定義します。また,width属性とheight属性では図形の基本サイズを定義します。width="32px" height="32px" のように指定すれば,32×32pxのキャンバスに図形を書く事になります。

以上を元に,骨組みとなるSVGの基本構造は次のとおりです。

<?xml version="1.0" standalone="no" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
        "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="32px" height="32px"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
</svg>

なお,svg要素にはviewBoxという属性を指定できます。このviewBoxは原点の座標と1pxの長さを定義することができます。例えば,上記のようにwidth,heightを32pxに設定したSVG文書をブラウザなどで表示すると画面右上に32pxのサイズでSVGが表示されますが,ここでwidth,heightの指定を100%に変え,viewBox="0 0 32 32" という指定を加えると,画面にいっぱいにSVGが表示されるようになります。

<?xml version="1.0" standalone="no" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
        "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 32 32"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <svg:circle cx="16" cy="16" r="16" style="fill:red;" />
</svg>
width="32px" height="32px"
viewBox="0 0 32 32"

XLinkとは

ここで簡単にXLinkについて説明します。XLinkとはXML文書間のリンクを実現するための仕様です。文書間のリンクというとHTMLのaタグ(ハイパーリンク)が思い浮かぶかと思いますが,その機能拡張版と言えます。

その機能・仕様の詳細な説明は長くなってしまうので省略しますが,SVGでのXLinkの主な使い方は,あるところで定義した要素などの対象を別の場所からそこにあるかのように使いまわすといったケースによく用いられます。

XLinkのサンプルコード

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="200"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <circle id="C" cx="20" cy="20" r="20" style="fill:red;" />
  </defs>
  <use xlink:href="#C" x="20" y="20" />
  <use xlink:href="#C" x="80" y="80" />
  <use xlink:href="#C" x="140" y="140" />
</svg>
XLinkのサンプル

このように,要素や自体を使いまわすことができるのがXLinkの特徴の1つです。

SVGの基本図形

大まかに外枠を抑えたので,ここからはSVGでの描画方法の具体例を見ていきます。まずは基本的な図形のサンプルです。

四角形の描画

rectという要素で四角形を描画することができます。x,y属性で座標を,width,height属性で大きさを定義します。

rectのサンプルコード(SVG)

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <rect x="20" y="20" width="160" height="160" style="fill:skyblue;" />
</svg>

rectのサンプルコード(SVGDOM)

var root = document.getElementById('S-sample4');
var SVG = 'http://www.w3.org/2000/svg';
// svg要素を作る
var svg = document.createElementNS(SVG,'svg');
svg.setAttribute('width', '120');
svg.setAttribute('height', '120');

// rect要素を作成
var rect = document.createElementNS(SVG,'rect');
rect.setAttribute('x', '20');
rect.setAttribute('y', '20');
rect.setAttribute('width', '80');
rect.setAttribute('height', '80');
// 塗りつぶし色を指定
rect.setAttribute("fill", "lightpink");
// 文書に追加
svg.appendChild(rect);
root.appendChild(svg);

rectのサンプルコード(Raphael)

var root = document.getElementById('R-sample4');
// ベースとなる要素を作る
paper = Raphael(root, 120, 120);
// rectを作成
var rect = paper.rect(20, 20, 80, 80);
// 塗りつぶし色を指定
rect.attr("fill", "greenyellow");
// 枠線をなしに
rect.attr("stroke", "none");
rectのサンプル(SVG)
rectのサンプル(SVGDOM)
rectのサンプル(Raphael)

著者プロフィール

太田昌吾(おおたしょうご,ハンドルネーム:os0x)

1983年生まれ。JavaScriptをメインに,HTML/CSSにFlashなどのクライアントサイドを得意とするウェブエンジニア。2009年12月より、Google Chrome ExtensionsのAPI Expertとして活動を開始。

URLhttp://d.hatena.ne.jp/os0x/

コメント

  • SVGのサイズ

    hoge.svgのような外部SVGファイルでの画像も拡大や縮小は出来ますか?
    <object data="hoge.svg" type="image/svg+xml">
    例えばこの場合です。

    Commented : #1  shinriyo (2012/01/27, 14:15)

コメントの記入