SVGを初心者のためにシンプル解説。
SVG学習辞典 ＞SVGとは何か
以下において、グラフィックとは、文字、図、絵など様々な意味を含んだ言葉を指していることに注意してください。
SVG(エス ブイ ジー）とは標準のグラフィック規格であり、Scalable Vector Graphics(スケーラブル ベクター グラフィックス）の頭文字を取ったものです。いろいろと特徴がありますが、大きく次の3つの柱を基本にしています。
スケーラブルだとか、XML（エックスエムエル）だとか新しい言葉が登場しましたので、それを以降で詳しく説明していきましょう。
グラフィックと言っても、画像のことだけではありません。SVGでは、フィルタ効果、フォント代替のサポートもしているため、文書としても立体画像としても劣らない表現が可能になっています。また、アニメーション化や、マウスで触ると動き始めたりするダイナミック（動的）かつインタラクティブ（対話的）な表現も可能です。
また、自分で様々な絵や画像を作り出すことも可能ですし、ホームページのように簡単に画像を取り込むこともできるのです。
SVGは豊富な表現のため、いくつもの使い方（注1）が想定されています。
スケーラブルとは、W3Cの仕様によると、「拡大縮小が可能」であることと、「印刷でもモバイルでもできるだけ高品質な表示が可能」と言う意味で使っているようです。
言い換えると、SVGはどんな機器でも最適な表示が可能なのです。どうして、このようにスケーラブルであるかというと、二つ理由があります。
ベクター（もしくはベクトル）画像の技術は様々なところで見かけます。有名なのはフォント（true typeなど）やフラッシュです。これらは、どのように拡大してもなめらかな線を表示することができ、また、データ量もそれほど大きくなりません。
もちろん、XMLをベースにしているSVGでは、ベクター画像ではない画像(PNGなど）もハイパーリンクにより埋め込んで表示できます。さらに、その画像を加工して表示することも可能になります。元の画像には手を加えないため、好き勝手に編集できて非常に便利なのです。
SVGはXMLをベースにしているため、いくつかの既存の技術を使うことができます。その前に、理解できない人のために、分かりやすくXMLが何かを説明しておきましょう。
XMLはExtensible Markup Lnaguageの略です。W3Cが勧告して以来、急速に広まっていきました。
XML仕様は、単語などは設定しておらず、あくまで<>などを利用したタグの構文と文法、つまり、使い方を規定しているだけです。ですから、タグの名前を自分たちで勝手に作ることができます。以下に少しだけ例をお見せしましょう。
<管理> <住所>東京都</住所> <名前>名無しの権兵衛</名前> </管理>
こんな風に、ルールと文法を守れば、タグを好き勝手に作り出すことができます。しかし、個人が好き勝手に作り出すと色々とまずいので、名前を作る際は、業界団体や標準化団体が提案していくのが普通です。それを基本にして、個人が勝手にXMLを拡張していくでしょう。SVGもW3Cという国際的規模の団体（企業コンソーシアム）が勧告したものなのです。（注２）
SVGはXMLの構文を利用して、作っています。したがって、DOMやスタイルシート（CSS）を用いることが可能になるのです。（注3）
このように、XML関連の技術を応用することができるのです。応用することができるので、SVG1.2からはRCC（Rendering Custom Contents）やsXBL（SVG's eXtensible Binding Language)という技術が脚光を浴びています。
以上のように、SVGについて触れてみました。もし、興味をお持ちの方は、例を配したSVG学習辞典を見てください。
以下はちょっと難しい話である上に私独自の考えです。理解できない部分が登場するかもしれません。読み飛ばしていただいても結構です。
XMLでは内容とプレゼンテーション（表示方法）を分離することが目的の一つになっています。どうして、わざわざ分離をするのかは、第9話の「HTMLとは何か」や「スタイルシートって何？」を読んで、HTMLやスタイルシートの事を理解してください。分かりやすくするために、実例を挙げます。
昔からあるHTMLは見た目ではなくて、文書の構造から作っていきます。例えば、p要素は段落を意味し、h1要素は見出しを意味し、そういった要素を書いていくのです。ですから、見た目のデザインを作るにはスタイルシートの力を借りる必要があるのです。MathML（数学用マークアップ言語）など他のXML応用も、内容はあらかじめXMLで記述しておき、表示はスタイルシートに任せています。
このように内容とプレゼンテーションを分離するのが普通なのです。
一方、SVGでは、内容そのものが表示を決められるグラフィックなのです。SVGは一つの要素が一つのグラフィックを表現します。例えば、polygon要素は多角形を、circle要素は円を表現します。また、それらを組み合わせて一つのグループにすることも可能です。このように見た目で作っていくのです。(次の図を参照）
このようにSVGにおいて、要素は一つずつ「グラフィカルなオブジェクト」を表現していきます。さらに、そのオブジェクトを構造化することも可能になります。
グラフィカルなオブジェクトは単なる絵、もしくはレイヤーに過ぎませんが、名前を付けたり、意味を付加できます。従って、ビジュアル面や見た目からデザインしていき、後で、オブジェクトの意味や名前を付ける方法が実現します。すなわち、XMLを構築していくのと大差ないのです。
従って、見た目から何か、デザイン作品を作っていきたい人にはSVGが重宝されるかもしれません。事実、GUIなどの部品にSVGを使おうとする試みもあるようです。
ここでは、SVGの誤解を質疑応答の形式で示していきたいと思います。
A: 違います。SVGはFlashではありません。確かに、アニメなど色々と同じ事ができますが、二つは同じ物ではありません。FlashがSVGを表示するか、SVGがFLASHを埋め込むかもしれませんが、根本的に異なります（注：FLASH Lite1.1がSVG Tinyに対応しています）。ベクター画像という点、アニメができるという点において、「Flashと似ている、より優れている」とSVGを紹介するサイトもあります。
また、PDFやJavaと同じ事ができますが、異なるのだということを理解しておいて下さい。
A: 違います。XMLアプリケーションの一種です。ちなみに、XHTMLもXMLアプリケーションの一種ですが、HTMLはSGMLアプリケーションです。極端な表現を用いるなら、XHTMLとSVGは兄弟で、HTMLとSVGは異母兄弟です。
A: 少し違います。XMLのデータ形式は人間が理解できると言う意味で、「読める」のです。XMLを読みやすくするためには、スタイルシートなどの力を借りた方がいいでしょう。
A:SVGは単なる標準化データ形式です。ですから、競合や代替は考えられていません。しかし、もし例えば、FLASHがSVGを埋め込むようになったら、FLASHに使われるJPEG（写真を除く）やGIFなどは不要になるかもしれません。
A:何とも言えません。上の回答を見ていただければ分かるように、代替として使えるかもしれませんが、代替として保証が付いているのではないのです。私は、WordやPDFやFLASH、DXFやTEXを勧めています。
もっとも期待されている分野は、モバイル携帯であり、日本や世界各地で、現実に対応が進んでいる。http://www.xml.com/pub/a/2004/08/18/sacre.html
実際に使われたり、思いついたりしたものでは、イラスト、CAD、地図、グラフ図、UML、設計図、ウェブページの代替、Webアニメ、アプリケーションの表現、モバイル用の画像など、とにかく様々である。使い方を提案するよりも、実際にその分野で使ってみる事をお勧めする。
