|
■ SVGの基本について
SVG（Scalable Vector Graphics）は、ＸＭＬで２次元の絵を記述する為の
言語であり、テキストや直線や曲線・図形の描画などを行う事ができます。
また、画像以外にも様々なデータをＸＭＬで記述する事も可能です。以下に
、ＳＶＧで記述する図形の要素を挙げてみます。
| rect |
指定された始点・縦・横の大きさに矩形を描画 |
| circle |
指定された中心点を半径の大きさに円を描画 |
| ellipse |
指定された中心点と縦横の半径の大きさに楕円を描画 |
| polyline |
点を複数指定して折れ線を描画 |
| polygon |
点を複数指定して多角形を描画 |
| line |
２点間に直線を描画 |
| text |
指定位置にテキストを描画 |
更にこれに、スタイルシートやアニメーション属性などを加える事で、様々な
表現が可能になります。また、それぞれの要素の属性は以下をご覧下さい。
| rect |
width="幅"／height="高さ"／x="x座標"／y="y座標" |
| circle |
cx="中心のx座標"／cy="中心のy座標"／r="半径" |
| ellipse |
cx="中心のx座標"／cy="中心のy座標"／rx="x軸の長さ"／ry="y軸の長さ" |
| polyline |
points="x・y座標,x・y座標,・・・ |
| polygon |
points="x・y座標,x・y座標,・・・ |
| line |
x1="開始点のx座標"／x2="終了点のx座標"／y1="開始点のy座標"／y2="終了点のy座標" |
| text |
x="x座標"／y="y座標"／font-size="フォントサイズ"／font-family="フォント名" |
SVGはXML文書の一つですから、XML文書と同じようにXML宣言から始まります。
encoding属性には「UTF-8」を指定します。（Adobe SVG ViewerではシフトJISを使用できないため）
そしてSVGで使用する事のできる要素や属性に関するスキーマ（要素や属性の配列に関して明確に記述したもの）
が定義されているSVGのDTDを指定します。
では、前回簡単な例で使用した「svg01.svg」を詳しく見てみることにします。
以下のファイルをご覧下さい。(前回のものと同じ文書に少しだけ付け加えています。）
■ svg01.svg
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<rect style="fill:#33cc33;" x="20" y="20" width="30" height="30"/>
</svg>
■ ＸＭＬ宣言
<?xml version="1.0" encoding="UTF-8" ?>
はじめにＸＭＬ文書と同様にＸＭＬ宣言から始まります。
「Adobe SVG Viewer」では「シフトJIS」を使用することができない為、
「encoding」属性には「UTF-8」を指定します。
XMLパーサが外部のDTDをチェックしなければ、正しく内容を認識
できない場合は「standalone」属性に「no」を指定し、
それ以外の場合は「yes」を指定します。
この属性を省略した場合は「no」を指定したものとみなされます。
但し「Adobe SVG Viewer」は「yes」を指定すると正しく表示できない事があるようです。
■ ＤＴＤの指定
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
次に、SVGのDTDを指定します。ここでは要素や属性の配列などに関してなど、SVGのスキーマが定義されています。
■ ＳＶＧビューポート（描画領域）と名前空間の指定
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
・・・この間は描画領域内の定義を記述・・・
</svg>
ＳＶＧのＳＶＧビューポート（描画領域）に関する定義と名前空間
の指定を記述します。
ＳＶＧビューポートとは、ＳＶＧの画像を表示する領域の事です。
左上の原点から「width」で描画領域の原点からの横幅を指定、
「height」で描画領域の原点からの縦幅を指定します。
ここでは単位は「ピクセル」で記述していきますが、他の単位でも指定することができます。
名前空間の指定には
「xmlns="http://www.w3.org/2000/svg"」と記述します。
■ 描画領域内の記述
<rect style="fill:#33cc33;" x="20" y="20" width="30" height="30"/>
描画領域内に描画する図形などの定義を行います。上記の各属性の意味は以下の通りです。
- rect ・・ 矩形を表示。
- style="fill:#33cc33;" ・・ fillは図形内部を指定色で塗りつぶします。
- x="20" ・・ 左上（始点）x座標。
- y="20" ・・ 左上（始点）y座標。
- width="30" ・・ 図形の幅（始点からの横幅）
- height="30" ・・ 図形の高さ（始点からの縦幅）
では、簡単なSVG文書を作成してみます。今回は前回作成したものよりも少しだけ複雑な図形を
表示させて見ます。以下のファイルをご覧ください。
ファイル名は「svg02.svg」とします。
■ svg012.svg
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">
<polygon style="fill:#ff6699;" points="
70,20 55,50 20,50 40,80 20,120 70,100 120,120 100,80 120,50 85,50 70,20"/>
<text x="44" y="85" font-size="35px">XML</text>
</svg>
上記の例では、多角形の画像とテキストを描画しています。
出来上がったsvg文書をクリックしてください。ブラウザが立ち上がって図形が表示されるはずです。
「svg012.svg」の実行結果は以下のようなものになります。
|
