前回はSVGの概要を解説したので，
と，
- SVGをXMLとして記述し，
svgファイル （もしくはdataスキームなど） をobjectタグなどで埋め込むか， もしくはXHTMLを用いてHTMLに埋め込む （Firefox 4. 0betaやIE9ppなどはHTML （XHTMLでない） に直接記述することも可能） - JavaScriptから動的にSVGを作る
SVGをXMLとしてあらかじめ記述しておく方法は画像フォーマットとしても利用できますし，
この特集では，
文書型とルート要素
SVG文書はXML文書でもあるので，
続いて，
<!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.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
このように，
以上を元に，
<?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>
なお，
<?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>
XLinkとは
ここで簡単にXLinkについて説明します。XLinkとはXML文書間のリンクを実現するための仕様です。文書間のリンクというとHTMLのaタグ
その機能・
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>
このように，
SVGの基本図形
大まかに外枠を抑えたので，
四角形の描画
rectという要素で四角形を描画することができます。x,y属性で座標を，
rectのサンプルコード
<!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のサンプルコード
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のサンプルコード
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");
