目次

• SVGとは
• DOCTYPEの宣言
• SVGキャンバス
• 基本図形を描く
• 塗りつぶし

SVGとは

SVG（Scalable Vector Graphics）は、XMLベースのベクターグラフィックスです。テキストファイルなので、簡単な図形ならばエディタだけでさっと描けてしまいます。JavaScriptやCGIなどとの連携もしやすく、Flashよりもずっと手軽なので、大きな可能性を秘めていると思います。

OperaとFirefoxはSVGに正式対応しています。Firefoxはまだ開発段階のようで一部の機能が使えません。現段階ではOperaの表示が一番安定しているようです。IEでは、AdobeのSVG Viewerをインストールすると表示できるようになります（2005年で開発が止まっています）。

参考URL

• Scalable Vector Graphics (SVG) 1.1 Specification
• Scalable Vector Graphics (SVG) 1.1 仕様（日本語訳）
• Mozilla SVGプロジェクト
• Operaの機能と特徴: SVG
• svg.org

DOCTYPEの宣言

SVGはXMLなので、DOCTYPEを宣言します。

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
	"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

standalone属性は、外部DTDを使用しているので明示的にnoを指定していますが、省略しても構いません。もし外部DTDを使用しない場合は、yesを指定します。

SVGキャンバス

SVGキャンバスとは、図形を描画する領域のことです。これを、svg要素で指定します。

<svg width="500px" height="500px" version="1.1"
	xmlns="http://www.w3.org/2000/svg">
</svg>

SVGで使用できる長さの単位は、em、ex、px、pt、pc、cm、mm、in、%です。数値の単位を省略すると、pxとして扱われます。

キャンバスの幅と高さはそれぞれwidth属性とheight属性で指定します。この領域からはみ出た部分には、何も描画されません。

SVG 1.1を使う場合、version属性には1.1を指定します。xmlns属性にはXML名前空間を指定します。

基本図形を描く

さっそく図形を描いてみましょう。

図形の種類

SVGには6種類の基本図形が用意されています。

• 長方形（角丸を含む）
• 円
• 楕円
• 直線
• 折線
• 多角形

では、それぞれの図形の描きかたを説明します。

長方形

長方形の描画にはrect要素を使います。始点のx座標とy座標をそれぞれx属性とy属性で、長方形の幅と高さをそれぞれwidth属性とheight属性で指定します。また塗りつぶし色はfill属性で、境界線の色はstroke属性で指定します。

色の指定方法は、CSS2に互換しています。 16進数表記の#rgbと#rrggbb、整数表記のrgb(255,255,255)、パーセント表記のrgb(100%,100%,100%)、そして色名表記があります。境界線の太さはstroke-width属性で指定します。

サンプルコード

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

<rect
	x="50px"
	y="50px"
	width="162px"
	height="100px"
	fill="lightgray"
	stroke="orange"
	stroke-width="5px" />

</svg>

サンプル画像

• rect_01.svg

角丸の長方形

長方形を角丸にするには、rx属性（角丸のx軸半径）とry属性（角丸のy軸半径）を指定します。

サンプルコード

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

<rect
	x="50px"
	y="50px"
	width="162px"
	height="100px"
	rx="10px"
	ry="10px"
	fill="lightgray"
	stroke="orange"
	stroke-width="5px" />

</svg>

サンプル画像

• rect_02.svg

円

円の描画にはcircle要素を使います。円の中心のx座標とy座標をそれぞれcx属性とcy属性で、半径をr属性で指定します。

サンプルコード

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

<circle
	cx="100px"
	cy="100px"
	r="50px"
	fill="lightgray"
	stroke="orange"
	stroke-width="5px" />

</svg>

サンプル画像

• circle_01.svg

楕円

楕円の描画にはellipse要素を使います。楕円のx軸半径とy軸半径を、それぞれrx属性とry属性で指定します。その他の属性は円と同じです。

サンプルコード

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

<ellipse
	cx="130px"
	cy="100px"
	rx="80px"
	ry="50px"
	fill="lightgray"
	stroke="orange"
	stroke-width="5px" />

</svg>

サンプル画像

• ellipse_01.svg

直線

直線の描画にはline要素を使います。直線の始点のx座標とy座標をそれぞれx1属性とy1属性で、終点のx座標とy座標をそれぞれx2属性とy2属性で指定します。

サンプルコード

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

<line
	x1="50px"
	y1="50px"
	x2="212px"
	y2="150px"
	stroke="orange"
	stroke-width="5px" />

</svg>

サンプル画像

• line.svg

折線

折線の描画にはpolyline要素を使います。points属性で複数の点のxy座標を指定すると、それらの点を結ぶ折線が描画されます。

サンプルコード

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

<polyline
	fill="none"
	stroke="orange"
	stroke-width="5px"
	points="50,50 200,50 200,200 50,200
		50,100 150,100 150,150 100,150" />

</svg>

サンプル画像

• polyline_01.svg

多角形

多角形の描画にはpolygon要素を使います。points属性で複数の点のxy座標を指定すると、それらの点を結ぶ多角形が描画されます。

サンプルコード

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

<polygon
	fill="lightgray"
	stroke="orange"
	stroke-width="5px"
	points="100,50 150,50 150,100 200,100
		200,150 150,150 150,200 100,200
		100,150 50,150 50,100 100,100" />

</svg>

サンプル画像

• polygon_01.svg

塗りつぶし

塗りつぶしの種類

塗りつぶしは、次の4種類があります。

• 単色
• 透明度を持つ単色
• グラデーション（線形と円形）
• パターン（画像をタイル状に配置）

単色

単色の塗りつぶし色は、fill属性で指定します。

不透明度を持つ単色

不透明度の指定には、fill-opacity属性を使用します。0.0（不透明度0%）から1.0（不透明度100%）の範囲で指定します。

互いに関連のある複数の要素をg要素で囲むと、明示的にグループ化できます。グループ化することで文書構造が明確になります。

サンプルコード

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

<g>
	<circle
		cx="125px"
		cy="100px"
		r="50px"
		fill="#f00"
		fill-opacity="0.5"
		stroke="#000"
		stroke-width="2px" />

	<circle
		cx="100px"
		cy="143px"
		r="50px"
		fill="#0f0"
		fill-opacity="0.5"
		stroke="#000"
		stroke-width="2px" />

	<circle
		cx="150px"
		cy="143px"
		r="50px"
		fill="#00f"
		fill-opacity="0.5"
		stroke="#000"
		stroke-width="2px" />
<g>

</svg>

サンプル画像

• fill-opacity_01.svg

線形グラデーション

線形グラデーションの描画にはlinearGradient要素を使用します。グラデーションの始点のx座標とy座標をそれぞれx1属性とy1属性に、終点をx2属性とy2属性に%単位で指定します。IDをid属性に指定します。

グラデーションの色の指定はstop要素を使用します。色の位置をoffset属性に、色をstop-color属性に指定します。なお透明度の指定にはstop-opacity属性を使用します。

ほかのオブジェクトからIDを使って参照するオブジェクトは、defs要素で囲みます。

サンプルコード

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

<defs>
	<linearGradient
		id="white_black"
		x1="0%"
		y1="0%"
		x2="100%"
		y2="100%">
			<stop offset="10%" stop-color="white" />
			<stop offset="50%" stop-color="black" />
			<stop offset="90%" stop-color="white" />
	</linearGradient>
</defs>

<rect
	x="50px"
	y="50px"
	width="400px"
	height="400px"
	fill="url(#white_black)" />

</svg>

サンプル画像

• linearGradient_01.svg

円形グラデーション

円形グラデーションの描画にはradialGradient要素を使用します。座標系をgradientUnits要素に指定しますが、userSpaceOnUseを指定した場合は、グラデーションを適用する図形を基準とした座標系になります。円形グラデーションの外周をcx要素、cy要素、r要素に指定します。円形グラデーションの焦点をfx要素とfy要素に指定します。

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

<defs>
	<radialGradient
		id="white_black"
		gradientUnits="userSpaceOnUse"
		cx="50%"
		cy="50%"
		r="50%"
		fx="50%"
		fy="50%">
			<stop offset="0%" stop-color="white" />
			<stop offset="100%" stop-color="black" />
	</radialGradient>
</defs>


<rect
	x="50px"
	y="50px"
	width="400"
	height="400"
	fill="url(#white_black)" />

</svg>

サンプル画像

• radialGradient_01.svg

パターン

パターンでの塗りつぶしにはpattern要素を使用します（Firefox2.0.0.3はパターンに対応していません）。

パターンの幅と高さをそれぞれwidth属性とheight属性に指定します。そしてパターンに使用する画像をpattern要素内に記述して、塗りつぶしを適用するオブジェクトからIDで呼び出します。

サンプルコード

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

<defs>
	<pattern
		id="polka-dot"
		patternUnits="userSpaceOnUse"
		width="20px"
		height="20px">
		<circle
			cx="5px"
			cy="5px"
			r="5px"
			fill="orange" />
	</pattern>
</defs>

<rect
	x="50px"
	y="50px"
	width="200px"
	height="200px"
	fill="url(#polka-dot)" />

</svg>

サンプル画像

• pattern_01.svg