- 2008年7月 8日 13:41
- Introduction
IEでSVGを見るためにはプラグインが必要です。ここで紹介するSVGは、W3CのWeb標準に則ったもので最も普及しているAdobe SVG Viewer 等で見ることができます。
SVG Viewer:
SVG(Scalable Vector Graphics)は、W3Cによってデザイン、開発された強力なオープンソースのベクターグラフィック言語です。Web標準化され、数多くの機能を持ったテキストベースのXML文法を使って記述されます。
ビットマップ形式
ビットマップグラフィックス(Bitmap graphics)のクラスに属するものををラスターグラフィックス(Raster graphics)と呼びます。ラスターグラフィックスは画像のピクセル(Pixel=Picture element)のマトリックス情報を格納する形式で描写されます。よってラスターイメージは、画像が拡大されたとき描写される画素数（ピクセル数）が少なくなるため画質が落ちます。
| 拡張子 | Name(正式名称) |
|---|---|
| JPEG(.jpg) | Joint Photographic Experts Group |
| GIF(.gif) | Graphics Interchange Format |
| PNG(.png) | Portable Network Graphics |
ベクターグラフィックスはXML文法で、イメージやフォントの形の位置、大きさ、色などを明確なXML文法を元に指定して描写されますので、拡大されても画質が落ちることは基本的*1にありません。
*1円の描写には円周率が用いられますが、円周率を3.14...から最後まで正確に求めることは不可能ですので完全な円を描くことはできません。そのような理由から計算されるπは一定の範囲に納められてますのでカーブの画質の限界はあります。
下の画像は円を描いたものです。円は"circle"タグを使って描きます。
上のSVG画像は、IE+Adove SVG Viewerプラグインで、Altキーを押したままマウスでドラッグさせると動かすことが出来ます。またCtrlキーを押したままクリックでズームイン、Ctrl+Shiftを押してクリックでズームアウトします。(FIreFoxでは、特定の属性がサポートされていないようです。）
このコードは上の円とテキストを描いたXMLコードです。XML文の中にSVGタグを入れて、その中で図形やテキストなどのコードを記入します。
<circle ...></circle> <---要素(エレメント)
cx="125" cy="125" r="50" <---"Circle"要素の属性(アトリビュート)
テキストタグの中の、circle with dasharray stroke をコンテンツと呼びます。
"Circle"要素の各属性のプロパティ値
cx属性のプロパティ値 = 125 (円の中心のX軸 (指定された範囲内の左からの距離))
cy属性のプロパティ値 = 125 (円の中心のY軸 (指定された範囲内の上からの距離))
r属性のプロパティ値 = 50 (円の半径)
strokeプロパティの値 = Blue
stroke-widthプロパティの値 = 75
strokeプロパティの値 = Blue
......
またこれらのstyleに関する属性は、style属性にまとめて書くことが出来ます。
Animation
シンプルなアニメーションは、SMIL animation で動かしたり色を変化させたりすることが出来ます。またJavaScript に少し似た ECMAScript と呼ばれるプログラム言語でブラウザ上でゲームや複雑なアニメーションを実現することが出来ます。ECMAは、European Computer Manufacturers Association を略した呼び名です。
- Newer: Chapter 2 : SVG Fill & Stroke properties
- Older: test
