SVGについて

について

画像作成園田勇一
文章作成曽原寿允

SVGとは

・SVGとはScalable Vector Graphicの略で２次元グラフィックをXML形式で記述するための言語。

・XML形式の文章でグラフィックを表現できるため、エディタとブラウザさえあれば開発できる。

・ベクター画像なので拡大・縮小が容易にでき、拡大しても鮮明に表示できる。

・最新バージョンは 1.1 （2003年1月14日）

SVGプラグインのインストール

現在、標準でSVG機能をサポートしているのは mozillaというブラウザのみ。
Internet ExplorerやNetscapeでSVGを見るにはプラグインのインストールが必要となる。
様々なプラグインが無償で提供されている。

Adobe SVG Viewer
　*ただし、WindowsとMacのみで、ブラウザのバージョンはInternet Explorerは4以上 Netscapeは4.5-7に対応
日本語のWindowsXP対応の最新バージョンは3.01

ダウンロードはAdobe (http://www.adobe.co.jp/svg/) から自分の言語とプラットフォームにあったプラグインをダウンロード。

ダウンロードした SVGView.exe をダブルクリックすると自動的にインストールされる。

SVGの作り方

[1] TEXTエディタなどで記述する方法

[2] SVG形式で保存可能なグラフィックソフトを用いる方法

[3] 他の画像フォーマットからSVGに変換する方法など。

ここでは[１]の方法を簡単に紹介

１． TEXTエディタを起動する（ここではメモ帳を使用）

２． XMLの宣言とDTDの参照
　　SVG文章はXML文章なので最初にXML宣言文が必要。

*DTDとは文章構造を指定するための仕様、指定方法、または指定した情報のこと。

<?xml version="1.0"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

と入力

３．図形のデータを記述する

例１．テキストの表示

２で紹介した文章に続けて
<svg width="400" height="300" version="1.1">
<text x="10" y="100" font-size="20pt">
SVG Document
</text>
</svg>

と入力

すると右のように表示される

まずSVG全体の大きさを指定
widthは横 heightは縦の長さ

テキストを描画するにはtextタグを使用
属性x,yはテキストの左上部分の座標

例２．図形の描画

図形を描画するには次のタグを使用する

＜基本図形を表すタグの一覧＞

タグ	図形
rect	長方形
circle	円
ellipse	楕円
line	直線
polyline	折れ線
polygon	多角形

＜主なpaint属性＞

属性名	意味
fill	図形の外郭内部を指定された色で塗りつぶす
stroke	図形のパスを指定された色で塗りつぶす
stroke-width	パス線の太さを指定します（ピクセル単位）

例えば

と入力する

すると、右のような図形が描画される

円の属性で

cxは円の中心x座標
cyは円の中心y座標
rは半径を表す

４．保存

SVGを記述し終わったら保存する

エディタで「名前を付けて保存」を選択し
拡張子を".svg"として保存すればSVGファイルが作成される。

完成！

保存後プラグインの入ったブラウザなどで確認を。

この他にも様々な図形を描画することができる

グラデーションサンプル

アニメーションサンプル

SVGにはアニメーションやグラデーションを作成したり、フィルタ機能もある。
JavaScriptと組み合わせたり、画像にリンクを貼り付けたりもできる。

参考ホームページ

[1]AdobeのSVG紹介ページ http://www.adobe.co.jp/svg/

[2]SVG入門 http://www.asahi-net.or.jp/~uf4k-nkjm/SVG

[3]SVG1.1勧告日本語版 http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/

[4]よちよち歩きのSVG 万華鏡 http://homepage2.nifty.com/toshkish/

[5]IT用語辞典 e-Words http://e-words.jp