伸び縮みマークアップ言語 XML
★本ページはプロモーションが含まれています★
■ SVG(Scalable Vector Graphics)

■ SVGとは

SVG(Scalable Vector Graphics)とは、その名の通りベクタ画像であり、2次元の図形をXMLで 保存する為の技術です。ベクタ画像はjpegやgif、pngなど(ラスタ画像)と異なり、四角形や楕円などの図形の情報から 表現されるので拡大縮小に関係なくブラウザできれいに表示させる事ができます。

またDOMでも扱うことができたり、CSSで色や大きさなどの指定なども可能です。

■SVG(Scalable Vector Graphics)
http://www.w3.org/TR/SVG/

但し、Internet ExplorerにはSVGを表示する機能がないので、 SVG Viewerというソフトをインストールする必要があります。 ここではAdobe社のSVG Viewerを下記のAdobe社のウェブサイトからダウンロードしてインストールすることにします。

■Adobe社のウェブサイト
http://www.adobe.co.jp/svg/viewer/install/main.html

Adobe社のウェブサイト

上記のサイトにかかれた手順で、SVG Viewerをダウンロード・インストールして下さい。

では、簡単な例を取り上げてみましょう。 以下の2つのファイルをご覧下さい。

■ svg01.svg

<?xml version="1.0" standalone="no" ?>
<!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>

■ htm01.html

<?xml version="1.0" encoding="Shift-jis" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>簡単な例</title>
</head>
<body>
 <p>■例</p>
 <embed src="svg01.svg" name="SVGEmbed" height="80" width="80" type="image/svg-xml"
 pluginspage="http://www.adobe.co.jp/svg/viewer/install/">
</body>
</html>

上記のソースについての詳しい説明はここでは説明しませんが(次回詳しく説明します) 、なんとなくわかると思います。「htm01.html」の実行結果は以下のようになります。

SVG画像表示の簡単な例


■ SVG(Scalable Vector Graphics)の基本

■ SVGの基本について

SVG(Scalable Vector Graphics)は、XMLで2次元の絵を記述する為の 言語であり、テキストや直線や曲線・図形の描画などを行う事ができます。 また、画像以外にも様々なデータをXMLで記述する事も可能です。以下に 、SVGで記述する図形の要素を挙げてみます。

rect 指定された始点・縦・横の大きさに矩形を描画
circle 指定された中心点を半径の大きさに円を描画
ellipse 指定された中心点と縦横の半径の大きさに楕円を描画
polyline 点を複数指定して折れ線を描画
polygon 点を複数指定して多角形を描画
line 2点間に直線を描画
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宣言

<?xml version="1.0" encoding="UTF-8" ?>

はじめにXML文書と同様にXML宣言から始まります。 「Adobe SVG Viewer」では「シフトJIS」を使用することができない為、 「encoding」属性には「UTF-8」を指定します。 XMLパーサが外部のDTDをチェックしなければ、正しく内容を認識 できない場合は「standalone」属性に「no」を指定し、 それ以外の場合は「yes」を指定します。 この属性を省略した場合は「no」を指定したものとみなされます。 但し「Adobe SVG Viewer」は「yes」を指定すると正しく表示できない事があるようです。

■ DTDの指定

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">


次に、SVGのDTDを指定します。ここでは要素や属性の配列などに関してなど、SVGのスキーマが定義されています。

■ SVGビューポート(描画領域)と名前空間の指定

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
・・・この間は描画領域内の定義を記述・・・
</svg>

SVGのSVGビューポート(描画領域)に関する定義と名前空間 の指定を記述します。 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」の実行結果は以下のようなものになります。

SVG画像 多角形とテキストの表示例


■ 「g」タグによるグループ化

■ グループ化する

「g」タグと呼ばれるものを使用して、描画する図形などをグループ化する事ができます。 「g」タグにstyle属性でスタイルを設定して、グループにスタイルを適用させます。

<g id="maru" style="fill:#ffcc33;stroke:#336699;stroke-width:5">
グループ内
</g>

識別しやすくする為に「g」タグに「id」属性を使用して識別名をつけます。(名前は何でも構いませんが、 同じ文書中で「id」属性に記述する識別名同じものを2度使用する事はできません。)

「style」属性を使用してスタイルを設定します。ここで設定したスタイルは、グループ内で適用されます。 「g」タグ内にさらに「g」タグを入れ子(ネスト)にして使用する事も出来ます。そういった場合、 内側の「g」タグのスタイルの方が優先されます。

  • fill:#ffcc33   ・・ 内部の色を指定
  • stroke:#336699  ・・ 枠線の色を指定
  • stroke-width:5  ・・ 枠線の太さを指定

では、「g」タグを使用した例を以下にあげてみます。 ファイル名は「svg02.svg」とします。

■ svg02.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="400" height="400" xmlns="http://www.w3.org/2000/svg">
<g id="kuro" style="fill:#000000">
 <circle cx="50" cy="50" r="30"/>
 <g id="ki" style="fill:#ffcc33;stroke:#000066;stroke-width:3">
 <circle cx="150" cy="50" r="30"/>
 </g>
 <circle cx="250" cy="50" r="30" style="fill:#009966"/>
</g>
</svg>

上記の例では、gタグのなかに更にgタグを設定しています。 <g id="kuro" style="fill:#000000"> で内部を黒で塗りつぶすスタイルを設定、<g id="daidai" style="fill:#ffcc33;stroke:#000066;stroke-width:3"> では内部を薄い黄色に枠線を青色にして3ピクセルで表示させます。 一番最後のstyle="fill:#009966"では、 「circle」要素の内部に直接スタイルを指定しています。

この例では、3つの円を色や枠線を変えて表示させています。「svg02.svg」の表示結果は以下のようになります。 また、Adobe SVG Viewerをインストールしていれば以下のページから上記のサンプルのsvgファイルを見ることが出来ます。

svg02.svgのサンプルページ

SVG画像 gタグを使用した表示例


■ 図形の座標変換 transform属性

■ transform属性

transform」属性を使用すると、図形の座標の変換を行う事ができます。 「transform」属性に指定する値によって、図形を拡大したり、移動・回転する事ができます。 この属性に指定する値の一覧は以下の通りです。

変換方法 パラメータ 説明
translate tx ty 平行移動
matrix a b c d e f 変換行列を指定して変換
rotate rotate-angle cx cy 回転
scale sx sy 拡大・縮小
skewX skew-angle X軸方向の歪み変換
skewY skew-angle Y軸方向の歪み変換

例えば、描画画像を平行移動させようと思うならば、 「transform="translate(100,0)"」といった感じに 指定し、この場合だと右に平行移動することになります。 複雑になるのでグループごとに指定するとよいでしょう。 ではもう少し詳しく見てみることにします。

  • translate・・(tx,ty)
    X軸、Y軸に対し指定した数値分平行に移動する。tyを省略した場合tyは0となる。

  • matrix・・(a,b,c,d,e,f)
    6つの値からなる(3×3の変換行列)変換行列の形で指定する。
    変換行列についてはここを参照。

  • rotate・・(rotate-angle,cx,cy)
    cx、cyに指定した座標(cx,cy)中心に、指定した「rotate-angle」度回転する。cx、cyが省略された場合は 元の座標の原点が中心になる。

  • scale・・(sx,sy)
    sx、syの拡大縮小を指定する。syが省略された場合はsxと同じとなる。

  • skewX・・(skew-angle)
    X軸に沿って、「skew-angle」度歪む。

  • skewY・・(skew-angle)
    Y軸に沿って、「skew-angle」度歪む。

では以下に簡単なtransform属性を使用した例をあげてみます。 ファイル名は「svg03.svg」とします。

■ svg03.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="400" height="400" xmlns="http://www.w3.org/2000/svg">
<g id="kuro" style="fill:#000000">
 <circle cx="50" cy="50" r="30"/>
<g id="ki" style="fill:#ffcc33;stroke:#000066;stroke-width:3"
 transform="translate(0,70)">
 <circle cx="150" cy="50" r="30"/>
</g>
 <circle cx="250" cy="50" r="30" style="fill:#009966"/>
</g>
</svg>

上記の例は、前回使用したgタグ使用例サンプルのファイルの中に transform="translate(0,70)" を付け足しただけのものです。「translate」はX軸、又はY軸に対して指定した数値分平行移動を行います。 ここでは中央にある円に対し、(0,70)で、X軸に対して0ピクセル、Y軸に対しては70ピクセル 平行移動を指定しています。

以下の画像はtransform属性を指定しない例と指定した「svg03.svg」の表示結果です。 また、Adobe SVG Viewerをインストールしていれば以下のページから上記のサンプルの「svg03.svg」ファイルを見ることが出来ます。

svg03.svgのサンプルページ

■ transform属性未指定
SVG画像 transform属性未指定

■ transform属性指定
SVG画像 transform属性指定


«««« back           next »»»»
 
XMLとは
XML文書作成の大まかな流れ
XML文書の記述
XML文書ブラウザでの表示
XSLTスタイルシートの適用
XSLTの構造
XML文書の宣言
文字コードの設定
タグ付けのルール
要素名・属性の指定について
階層構造
実体参照・文字参照について
その他・コメントや処理
DTDの記述
名前空間の指定
情報をデータ化する
階層構造の作成
データからXML文書を作成する
会員情報の記述ルールを定義したDTD..
個々のXML文書を作成する
外部実体参照
テンプレートルール
XSLTスタイルシートを記述する 【ノード】
構造を変換する仕組み
テンプレートルールの定義
テンプレートの動作確認
XPathの仕組み  【XPathの関数】
XPathの表記方法
テキストの抽出  xsl:value-of
ノードのコピー  xsl:copy-of
テキストの生成  xsl:text
コメントの生成  xsl:comment
要素の生成  xsl:element
属性の生成  xsl:attribute
属性値の生成  【属性値テンプレート】
出力方法の指定  xsl:output
変数1  xsl:variable
変数2  xsl:param
変数3  xsl:with-param
繰り返し処理  xsl:for-each
再帰処理  xsl:if test
データの並べ替え  xsl:sort
データに番号をつけて出力  xsl:number
条件式に一致時のみ変換処理を実施 xsl:if
複数条件を設定して処理 xsl:choose
XSLTに別のXSLT.. xsl:import xsl:include
XSLT関数について
データを1件表示
データを決められた件数だけ表示
テキストと要素混在時のテキスト抽出法
データを全て表示する
表示するデータを並べ替える
条件式を設定して表示を変える
データを表にして表示する
複数件のデータを1つの表にして表示
リンクを加える  xsl:element xsl:attribute
データをCSV形式で出力する
DOM(Document Object Model)
DOMとjavascript
ノードにアクセスする
ノードにアクセスする 2
ノードにアクセスする 3
XSLTスタイルシートを読み込む
XSLTスタイルシートの切り替え
DOMとjavascriptで検索機能を作成する 1
DOMとjavascriptで検索機能を作成する 2
DOMとjavascriptで検索機能を作成する 3
DOMとjavascriptで検索機能を作成する (XSLTスタイルシート適用)
SVG(Scalable Vector Graphics)
SVG(Scalable Vector Graphics)の基本
「g」タグによるグループ化
図形の座標変換 transform属性
アニメーションを作成する animate要素
アニメーションを作成する animate要素2
イベント
DOMとJavaScriptを使用したイベント処理
XMLとXSLTからSVGを生成する
msxsl.exeのオプション
エラーメッセージの表示
LINK
XML(eXtensible Markup Language) バナーはダウ
ンロードして
お使い下さい。




Copyright © 2004 - ykr414 . All Rights Reserved.