SVG は右に示したようなグラフィックの描画に用いる、 XHTML に似ている XML 言語です。これは、必要な線や図形を指定する、既存のラスタ画像に手を加える、あるいはそれら両方を組み合わせることで画像を作成するのに用いられます。画像やその部品は、外見を完全に変えるためにトランスフォーム、合成、フィルタ適用を行うこともできます。
SVG は、いくつかの競合するフォーマットが W3C に提案されたものの承認されなかった後の 1999 年頃に生まれました。仕様書は長い間存在していますがブラウザへの採用はかなり遅く、そのために今日 (2009 年) の Web で用いられている SVG コンテンツは少ない状態です。利用可能な実装でさえ、その多くは HTML:Canvas や完全なアプリケーションインタフェースとしての Adobe Flash のような競合技術ほど速くない状態です。SVG は実装の一部において、利用が可能な DOM インタフェースを含むことと、デフォルトでブラウザが動作するのにサードパーティの拡張機能を必要としないという利点があります。それを使用するかしないかは、たいていそれを使う目的に依存します。
基本的な構成要素
HTML はヘッダ、段落、テーブルなどを定義する要素を提供します。同様に SVG は円、長方形、単純あるいは複雑な曲線などの要素を提供します。シンプルな SVG ドキュメントは svg ルート要素およびグラフィックを構成するいくつかの基本的な図形のみから成ります。加えて g があり、これはいくつかの基本的な図形をグループ化します。
ここから始めて、SVG 画像を複雑にしていくことができます。SVG はグラデーション、回転、フィルタ効果、アニメーション、JavaScript との連携などをサポートします。しかしこれら言語の追加機能すべては、グラフィックエリアを定義する比較的小さな要素のセットに依存します。
始める前に
アプリケーション固有のファイルと同じように SVG を扱うことが出来る Inkscape のような free な、たくさんの draw アプリケーションがあります。しかし、このチュートリアルでは、信頼できる XML か (あなたが選んだ) テキストエディタを期待しています。このチュートリアルは、SVG の内部を理解したい人向けに作られています。一度 SVG を手書きでマークアップすることは、良い経験になります。それでも、最終的なゴールは意識するべきです。すべての SVG ビューアが同じということはなく、それらアプリが SVG 仕様や SVG と併せて用いる他の仕様 (JavaScript や CSS) を異なるレベルでサポートしているため、あるアプリ向けに記述した SVG がほかのアプリでは同じように表示されない可能性があります。
SVG は現行の全ブラウザでサポートされているわけではありません (あと一息ではありますが)。SVG ビューアのかなり完全な一覧が SVG Wiki にあります。Firefox はバージョン 1.5 から一部の SVG コンテンツをサポートしており、その後のリリースごとにサポートレベルが向上しています。うまくいけばこのチュートリアルと共に MDC が、開発者が Gecko とほかの主要な実装との間の違いを把握することの助けになるでしょう。
始める前に、XML もしくは HTML のような他のマークアップ言語の基本を理解するべきです。もし、XML に精通していなければ、以下に心にとめておく指針があります:
- SVG 要素および属性は、XML が (HTML とは異なり) 大文字小文字を区別するため、ここで示したとおりに入力しなければ成りません。
- SVG の属性値は、たとえ数値でも引用符で囲まれなければなりません。
SVG の仕様は巨大です。このチュートリアルは、初めの一歩を踏み出すためだけの範囲を担当しています。一度 SVG の基本に精通したら、知りたいことを見つけるために『SVG 要素リファレンス』 と、『Interface Reference』(FIXME: デッドリンク) を見てみるべきです。
SVG の種類
2003 年に勧告が成立して以降、最新の "完全な" SVG バージョンは 1.1 です。これは SVG 1.0 の上に構築したものですが、実装を容易にするためにモジュール化が進みました。SVG 1.1 の第 2 版が現在策定中です。"完全な" SVG 1.2 は、次の SVG のメジャーリリースを意味していました。それは将来の SVG 2.0 のために破棄され、そして SVG 2.0 は現在鋭意開発中であり構成要素をいくつかの緩く結合した仕様に分割する、CSS 3 と似た手法をとっています。
完全な SVG 勧告からは離れて、W3C のワーキンググループは 2003 年に SVG Tiny と SVG Basic を導入しました。これら 2 つのプロファイルは、主にモバイルデバイスを対象にしています。SVG Tiny は、性能が低い小型デバイス向けに図形要素をもたらすでしょう。SVG Basic は完全な SVG が持つ機能の多くを提供しますが、実装が難しい機能や描画負荷の高い機能 (アニメーションなど) は含みません。2008年に、SVG Tiny 1.2 が W3C 勧告になりました。
SVG 印刷の仕様の計画があり、これは複数のページや高度なカラーマネージメントのサポートを追加する予定でした。この作業は休止しています。