SVGドキュメントの書き方の基本

2002年2月3日(日)更新

■SVGの書き方(基本)

たけち: じゃあ、SVGドキュメントの書き方の基本を学ぼうね。

さらら: えぇ。でも、難しくないかしら・・・

たけち: SVGドキュメントはもちろんXMLドキュメントのひとつだから、基本的には同じなんだよ。

さらら: あっ、そっ、そうだわね。

たけち: 図に載せてみようね。

さらら

SVGドキュメントの基本形式

たけち: 二つのパターンを載せているんだけど、一つは、SVGだけでドキュメントを構成する場合で、もうひとつは、XHTMLの中にSVGの要素を組み入れたりする場合なんだよ。

たけち: うん。どちらにしても、１行目は、XML宣言だね。DTDの宣言をするか、xmlns属性でSVGの名前空間を指定するかの違いだね。

さらら: そうね。

たけち: ただ、ここでは、HTML/XMLの表示はMicrosoft社のInternet Explorer, SVGの表示はAdobe社のSVG Viewerを使うから、実際には、SVGを表示したいところに、次のように書くんだ。

<embed src="SVGファイル名.svg" name="SVGEmbed" height="領域の高さ" width="領域の幅" type="image/svg-xml" pluginspage="http://www.adobe.co.jp/svg/viewer/install/">

■SVGの基本的な要素

たけち: じゃあ、SVGの基本的な要素を紹介しようね。

さらら: 基本的な要素って、円とか四角とか、そういうもののことね。

たけち: そうそう。次のリストを見て。よく使われそうなものだよ。

さらら
図形タグ名主な属性
矩形rectx="x座標", y="y座標", width="幅", height="高さ"
円circlecx="中心のx座標", cy="中心のy座標", r="半径"
楕円ellipsecx="中心のx座標", cy="中心のy座標",
rx="x軸径", ry="y軸径"
直線linex1="開始点x座標", y1="開始点y座標",
x2="終端点x座標", y2="終端点y座標"
折れ線polylinepoints="xy座標のペア, ・・・・・"
多角形polygonpoints="xy座標のペア, ・・・・・"
テキストtextx="x座標", y="y座標",
font-family="フォント名", font-size="文字サイズ"

■SVGの基本的な要素のサンプル

たけち

さらら: 私たちがよく知っている図形なのね。よかった・・・難しい図形がでてくるのかと思った。

たけち: じゃあ、ちょっと安心したところで、今回は簡単なサンプルで雰囲気を感じてみようね。

さらら: えぇ。

たけち: じゃあ、それぞれの図形要素がひとつずつ表示されるSVGドキュメントのリストを載せておくね。
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="12cm" height="12cm" xmlns="http://www.w3.org/2000/svg">

  <desc>Basic Element and Text</desc>

  <rect style="fill:skyblue;" x="50" y="20" width="200" height="50"/>
  <circle style="fill:yellow;" cx="200" cy="100" r="50" />
  <ellipse style="fill:green;" cx="120" cy="200" rx="80" ry="40" />
  <line stroke="navy" x1="80" y1="150" x2="350" y2="150" />
  <polyline stroke="navy" fill="none" points="100,280 250,200 300,260" />
  <polygon fill="yellow" points="100,300 250,360 300,280" />
  <text x="80" y="340" fill="black" font-size="32" font-family="MS-Mincho">textです。</text>

</svg>

さらら: うん。だいたいの雰囲気はわかるわ。これくらいの図形だったら真似して書けばいいのよね。

たけち: そうだね。細かいことは、次回以降にして、今回は雰囲気だけ分かればいいからね。じゃあ、これのリストを"basic.svg"というファイルにして、"basic.html"というXHTMLドキュメントに組み込んで表示してみようね。"basic.html"のリストを次に載せておくね。

(注) *.svgでは、"SHift-JIS"ではなく"UTF-8"としています。
"basic.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>SVGの基本的要素の例です</title>
  </head>
  <body>
    <p>■SVGの基本的要素の例です。</p>
      <embed src="basic.svg" name="SVGEmbed" height="400" width="400" type="image/svg-xml" pluginspage="http://www.adobe.co.jp/svg/viewer/install/">
    <p>※簡単ですよね。</p>

  </body>
</html>

たけち: じゃあ、次のリンクをクリックしてみて。

SVGの基本要素のサンプル用xhtmlファイル basic.html

※Adobe社のSVG Viewerがインストールされていると下のイメージのように表示されるはずです。

Adobe社のSVG Viewerがインストールされているとこのように表示されるはずです。

さらら: あっ、見えたわ。だいたい想像していたとおりに表示されたわ。

たけち: 次回からは、もっと詳しく学んでいこうね。

さらら: えぇ。もっと色々なサンプルを見てみたいわ!!

次回はSVGの座標です。 .... (^ ^*

さらら

■補足: XML宣言の、standalone="yes/no"

さらら: standalone="yes"とか"no"ってなぁに?

たけち: そのXMLドキュメントに指定してある別のところにある(外部)DTDを実際に参照しに行かなくちゃいけないときには、standalone="no"ってするんだ。で、その必要がないときには、standalone="yes"って書くんだ。standalone属性を指定してないときは、standalone="no"って解釈されるんだよ。

さらら: ふぅ〜ん。。。わざわざ遠くのDTDを見にいく必要が無いときは、standalone="yes"なのね。

たけち: あっ、遠いかどうかは・・・・ (^ ^;