概要

HTML はヘッダー、段落、テーブルなどを定義する要素を提供します。同様に SVG は円、長方形、単純あるいは複雑な曲線などの要素を提供します。シンプルな SVG 文書は <svg> ルート要素およびグラフィックを構成するいくつかの基本的な図形のみから成ります。加えて <g> があり、これでいくつかの基本的な図形をグループ化します。

ここから始めて、 SVG 画像を複雑にしていくことができます。SVG はグラデーション、回転、フィルター効果、アニメーション、JavaScript との連携などに対応しています。しかし、言語のこれらすべての追加機能は、グラフィック領域を定義するこの比較的小さな要素セットに頼っています。

無料で SVG をネイティブファイル形式として使用することができる描画アプリケーションは、 Inkscape など、数多くあります。しかし、このチュートリアルは信頼できる XML エディターかテキストエディターを（お好みで）使っています。この考えは SVG を理解したい人に SVG の内部構造を学んでもらうことであり、それはマークアップで手を汚すことによって行うのが最善です。しかし、最終的な目標に注意してください。 SVG ビューアーはすべて同じではないので、あるアプリで書いたものが別のアプリでまったく同じように表示されない可能性は十分にあります。なぜなら、 SVG 仕様書や、 SVG と一緒に使用している別の仕様（つまり、 JavaScript や CSS）で対応しているレベルが異なるからです。

SVG は現行のすべてのブラウザーで対応しており、場合によっては 2、3 バージョン前のブラウザーでも対応しています。かなり完全なブラウザーの対応表は Can I use で得られます。 Firefox は バージョン 1.5 からいくつかの SVG コンテンツに対応しており、それ以降リリースされるたびに対応レベルは上がっています。ここのチュートリアルと共に、 MDN が開発者が Gecko と他の主要な実装の違いを把握する手助けになることを期待しています。

始める前に、XML もしくは HTML のような他のマークアップ言語の基本を理解するべきです。もし、XML に馴染みがないのであれば、以下に心にとめておく指針があります。

• SVG 要素および属性は、XML が (HTML とは異なり) 大文字小文字を区別するため、ここで示したとおりに入力しなければなりません。
• SVG の属性値は、たとえ数値でも引用符で囲まれなければなりません。

SVG は巨大な仕様です。このチュートリアルは基本に応じたものです。慣れることができたら、要素リファレンスとインターフェイスリファレンスを使用して、他に必要なことを探すことができるはずです。

2003 年に勧告が成立して以降、最新の「完全な」 SVG バージョンは 1.1 です。これは SVG 1.0 の上に構築したものですが、実装を容易にするためにモジュール化が進みました。 SVG 1.1 第 2 版は 2011 年に勧告となりました。「完全な」 SVG 1.2 は SVG の次のメジャーリリースを意味していました。これは現在開発が進められている 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 印刷の仕様の計画があり、これは複数のページや高度なカラーマネージメントの対応を追加する予定でした。この作業は中止になりました。

• 前のページ
• 次のページ