昔、辞典を作成する際に、SVGの要素がブラウザにおいて、どれくらいサポートされているのか調べたことがありました。今でも時々、調べることがあるのですが、サポートは三段階に分けることができます。
第一段階:SVGの核となるもの
- svg要素
- g要素（defs要素）
- path要素
- title要素
- linearGradient要素
- radialGradient要素
- stop要素
多くのブラウザやビューアで対応している要素が以上のものです。
この7つの要素（defs要素を入れれば、8つ）だけで、いろんなSVG画像を表現できます。おそらく、画像を編集したいというだけの人は、他の要素を使う機会なんてめったにないでしょう。
第二段階:SVGの基本的な画像
第一段階に加えて、
- circle要素
- ellipse要素
- rect要素
- polyline要素
- polygon要素
- image要素
- use要素
- symbol要素
- a要素など
これらは基本的な形やハイパーリンクを提供できるので、重宝します(path要素でも代用できます）。ここまでは、多くのブラウザで対応できますし、混乱もありません。問題は第3段階からです。
第三段階:SVGの拡張
明らかに、静止画像の域を超えてしまうのが、この段階です。つまり、SVGを拡張した形となっています。ブラウザも対応がまちまちです。
SVG Animation（アニメーション）
文字通り、画像を動かすアニメです。script要素をはじめ、animate要素などがあります。
SVG Font(フォント)
フォントをSVGで記述することができるようになります。text要素やfont要素で実現できます。ここまでくると、SVGは「画像」ではなくて、「文書」と呼んでいいくらいです。
SVG Filter（フィルター、あるいはエフェクト）
光源とか、ぼかしとか。画像にさまざまな効果を与えることができます。
モバイル対応を謳っているSVG Tinyにおいて、フィルターを除く第3段階までサポートするようになっています。ですが、第3段階からは明らかに、ハードルが高くなっていっています。
XSLがXSLT（XMLを別のXMLアプリケーションに変換する言語）とXSL-FO(スタイルシートをXML化したもの）に分かれたように、
- 静止画像や地図用のSVG（第2段階まで)
- SVGアニメーション
- SVGフォント
- SVGエフェクト
と仕様を目的別に分割していけばいいのに、と思った次第です。
