2005年09月19日(月)更新

さらら: え゛っ? SVG(エス・ブィ・ジー)?

たけち: あっ。そんなに驚かなくっても。。。。SVGは、二次元図形を表現するためのXMLに従った表現形式なんだよ。

さらら: ふ〜ん、そうなんだ。でも、二次元図形って、私たちがよく知っているgifとかjpegとかとは違うの?

たけち: あっ、gifやjpegとかのビットマップ画像とは違って、四角形・円・楕円・テキストといった二次元の図形情報から作られるんだ。

さらら: あっ。そうなの。で、そのSVGって、やっぱりW3Cで作った仕様なの?

たけち: SGVの仕様について言うと、SVG 1.0が、2001年9月4日にW3Cの勧告になったんだ。

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

二次元図形を表現する仕様です。米国アドビ社などの提案によってできました。

さらら: へぇ〜。でも、二次元図形の情報をXML形式のSVGにすると何がいいのかしら?

たけち: うん。さららはもうXMLのいい点は分かっているよね。二次元図形についてもそのいい点がでてくるんだよね。

他のXMLドキュメントに組み込める

XHTMLドキュメントに組み込んで、ブラウザできれいな図形を表現できます。

さらら: そうなんだぁ〜。でも、XMLからSVGに変換したり、SVGからSVGに変換したりなんて、ぜんぜんイメージがわかないわ。

たけち: そうだね。やっぱり具体的なものを見ていかないとピンとこないかもね。これらのことは後でサンプルを見ながら学んでいこうね。

さらら: うん。そうしてね。

たけち: 細かな仕様については次回以降にするとして、今回はどんなものかをみてみようね。で、簡単なサンプルを見るためには、SVG Viewerが必要なんだ。

さらら: えっ?! そっ、そうなの。。。

たけち: Internet ExplorerなどのブラウザにはSVGドキュメントを表示する機能が無いので、別にSVG Viewerというソフトをインストールする必要があるんだ。msxmlのインストールをしたみたいにね。

さらら: そっか・・・

たけち: SVG Viewerのインストールについては、このページの下に■補足: SVG Viewerのインストールについてとして載せておいたからね。ここでは、Adobe社のものを使うね。

たけち: じゃあ、すっごく簡単なSVGドキュメントの例を次にみてみようね。四角形と円だけのSVGドキュメントだよ。SVG Viewerをインストールされてない方にも分かるように、どんな図が表示されるかを参考に載せておきますね。

たけち: じゃ、この二次元図形を表す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="8cm" height="4cm" xmlns="http://www.w3.org/2000/svg">

  <rec style="fill:blue;" x="50" y="20" width="200" height="100"/>
  <circle style="fill:yellow;" cx="180" cy="100" r="50" />

</svg>

さらら: あっ。細かいことはわからないけど、rectが四角形でcircleが円を表すのね。styleのfill:blueって青で塗るってことなのね、きっと。

たけち: そうそう。雰囲気は分かるよね。細かいことは次回以降で見ていこうね。じゃあ、このSVGドキュメントをsample.svgというファイルにして、実際に(Adobed社の)SVG Viewerで見てみよう。次のところにembed要素をつぎのように書いておくね。

<embed src="sample.svg" name="SVGEmbed" height="200" width="300" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/">

さらら: あっ、見えた見えた。。。なんだかSVGっておもしろそうだわ。

たけち: 次回からは、SVGをいろいろなサンプルをつくって見ながら学んでいこうね。いろいろと面白い表現もできるからたのしいよ、きっと。

さらら: うん!! いっしょに勉強しましょ。

次回はSVGドキュメントの書き方の基本です。 .... (^ ^*