1. SVGの基本

2005.11.09　株式会社四次元データ　藤本将光

SVG 1章　SVGの基本

本章では、まず、「SVGとは？」において、SVGの概要を述べています。次に、SVG文書の基本的な表記方法について解説しています。また、「簡単なサンプル」において、実際のサンプルを見ながら、SVG文書について簡単な説明を行っています。

1.1. SVGとは？

SVGとはScaleable Vector Graphicの略で2次元グラフィックをXML形式で記述するための規格です。2001年9月にW3C勧告として公開されています。

SVGではJPEG、GIF、PNG等と異なり、ラスター形式で画像を表現するのではなく、ベクター形式で画像を表現しています。そのため、使用者の環境に依存せず、最適な画像を表現することが可能となります。例えば、画像の作成時や印刷時の画像の拡大・縮小、あるいは携帯の端末画面の使用時における表示画面の大きさや解像度などの制限に関わらず、画像情報の損失がなく、高品質な描画を表示することができ、実利的な応用が期待されます。また、SVGファイルは、XML文書であるため、文書表現によって、簡単に描画が可能であること、作成した文書を他のXML文書に容易に組み込むことが可能であり、XHTMLとの連携によって、Webブラウザへの応用が意識されています。さらに、SVGは単なる画像表記だけではなく、アニメーション化や、イベントを発生させるなどの表現が可能であり、静的な表現形態だけでなく、動的で、また、対話的な機能を備えています。現在のところ、SVGファイルは、Adobe社の画像編集ソフト（Illustrator）で扱うことができるなど、実用面における対応も進んでいます。

なお、実際にSVGを表示させるためには、Adobe社のSVG ViewerをIEにプラグインする必要があります。Adobe SVG Viewer3.0が無償で利用でき(Windows,Mac版のみ）、以下のAdobe社のホームページからインストールすることができます。

Adobe SVG Viewer3.0

1.2. SVG文書の表記方法(Internet Explorer)

SVGはXML形式の文書であるので、あらかじめ、XML宣言を行う必要があります。
SVG文書の記述方法には、以下の2通りの方法があります。

1.親ドキュメント（XML形式の別のウェブページ）の文書に埋め込む方法

（例）
<?xml version="1.0" standalone="yes"?>
<parent xmlns="http://example.org" xmlns:svg="http://www.w3c.org/2000/svg">
      <svg:svg>
         ...  SVGの記述
      </svg:svg>

2.単独のSVGファイルとして文書を作成する方法

（例）
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20050606 Stylable//EN" 
           "http://www.w3.org/TR/2005/06/REC-SVG-20060606/DTD/svg10.dld">
      <svg>
         ...  SVGの記述
      </svg>

また、単独のSVGファイルとして作成した場合、embedタグによってHTML文書の中に組み込むことができます。

(例)
<body>
      <embed src="SVGファイル名（url）" width="600" height="300" name="theSVG">
</body>

ただしこの表記を使ったSVGは、Internet Explorerで表示させることはできますがFirefoxで表示させることができません。Firefoxで表示させる方法については９章で扱います。

1.3. 簡単なサンプル

では、実際の例を見て見ましょう。このサンプルでは単独のSVGファイルとして文書を作成しています。

このサンプルでは、赤線の四角形、青色の円、白色の「4DD」のテキストをsvg要素によって描画しています。
下に、このサンプルのソースを示します。

<?xml version="1.0" standalone="no"?>   ･･･(1) 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20050606 Stylable//EN" 
     "http://www.w3.org/TR/2005/06/REC-SVG-20060606/DTD/svg10.dld">  ･･･(2)
<svg width="300" height="300" >  ･･･(3)
<rect x="10" y="10" width="200" height="200"  
                             fill="none" stroke="red" />  ･･･(4)
<circle cx="110" cy="110" r="50" fill="blue" />  ･･･(5)
<text x="90" y="115" stroke="white" fill="white"  
              font-family="MS-Gothic" font-size="30px">4DD</text>  ･･･(6)
</svg>

(1)において、XML宣言を行い、(2)でDTD参照を行っています。(3)でSVG画像の表示領域を設定しています。また、(4),(5),(6)の部分でSVGの内容を記述しています。実際(4),(5),(6)で使用しているSVG要素、属性の記述ルールについては、次章以降で解説を行っていきます。