ホーム > X-Plus > XML Square >  スタンダーズ

この記事を送る はてなブックマークに追加する BuzzurlにブックマークBuzzurlにブックマーク Yahoo!ブックマークに登録
テキストリンクコードを取得する

スタンダーズコーナー:W3C規格解説 「SVG」

2001年09月27日作成 

W3C規格解説
SVG(Scalable Vector Graphics)1.0
   

(株)日本ユニテック
村上 泰介

SVGとは、ベクター・グラフィックスやイメージやテキストといった、2次元のグラフィックスをXMLで表現するための規格で、9月4日に勧告となりました。(http://www.w3.org/TR/SVG/)画像の表示にはよくJPEGやGIFが使われますので、SVGとの比較を通して、その特徴について説明します。

  • XMLデータ
     JPEGやGIFはバイナリデータとなるのに対して、SVGはXMLデータとなるので、様々なツールでの作成や編集が容易であり、ファイルのサイズも小さくなります。

  • ベクター方式
     画像の表現には、色の強さや参照番号を数値化するラスター方式と、直線や曲線のパラメータによるベクター方式があります。JPEGやGIFはラスター方式であり、SVGはベクター方式です。

  • スクリプト
     SVGは途中にスクリプトを埋め込むことで、その内容を実行することができます。

  • アニメーション
     SVGはFlashのようなアニメーションを表現することができます。

  • SVG Viewer
      JPEGやGIFとは異なり、SVGの表示には専用のSVG Viewerが必要です。ブラウザで表示する場合はプラグインをダウンロードします。(注1)

それでは、実際にSVGのサンプルを示します。次のようなSVGデータをSVG Viewerで表示します。
-サンプルファイルtest.svgのダウンロード(このファイルはZIP形式で圧縮されています)-

<?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="600" height="200" viewBox="0 0 600 200"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <desc>Example rect01 - rectangle with sharp corners</desc>
    <rect x="50" y="50" width="500" height="100"
fill="none" stroke="blue" stroke-width="2"/>
    <rect x="200" y="70" width="200" height="60"
fill="yellow" stroke="navy" stroke-width="10"/>
</svg>

すると、次のような四角形が表示されます。

これは簡単な例で、上記の特徴でも述べたように複雑なアニメーションも表示できます。SVGは、JPEGやGIFやFlashの特色を備え、なおかつXML形式であるということから、今後かなり普及することになると思われます。最大のネックはブラウザで表示するのにプラグインが必要ということです。それがクリアされれば一気に浸透することでしょう。

(注1)たとえばAdobe社はIEやNNのためのプラグインを提供しています。 (http://www.adobe.com/svg/viewer/install/main.html
・Adobe Acrobat Reader 5.0をインストール時にSVG Viewerもインストールされるようです
・SVGは、Adobe Illustrator 9.0 およびAdobe GoLive(R) 5.0でサポートされています。


関連サービス

標準化仕様の動向調査
最新動向を伝えるDXメールニュース (無料)



この記事と関連の高い記事

関連キーワード:SVG


関連キーワード:XML関連規格




ページトップへ戻る