svgのfeature文字列について

svgでは機能毎にfeature文字列と呼ばれる識別子が定義されています．これを利用することでsvgを表示する環境（webブラウザなど）毎に表示する内容を切り替えることができます．


例）http://www.w3.org/TR/SVG11/feature#SVG-dynamic

この値の利用の仕方には主に2つあります．

• switch要素と組み合わせる．
  requiredFeatures属性を図形要素に追加し，条件となるfeature文字列を指定すると，その機能をサポートしている時のみ，その図形がスクリーンに描画されます．スクリプトを使わずに処理の分岐を行えます．
  （正確には，switch要素直下の要素の中で，requiredFeatures属性のチェックがtrueとなった先頭の要素が描画される）

例）

<svg viewBox="0 0 400 20" width="400px" height="20px" style="display:inline;">
    <switch>
        <text y="20" requiredFeatures="http://www.w3.org/TR/SVG11/feature#SVG-dynamic">このブラウザはoperaですか？</text>
        <text y="20" requiredFeatures="http://www.w3.org/TR/SVG11/feature#SVG-static">このブラウザはchromeですか？</text>
        <text y="20">このブラウザはfirefoxですか？</text>
    </switch>
</svg>

• document.implementation.hasFeatureメソッドを実行する．
  スクリプトからブラウザがサポートしている機能をチェックすることができます．
  例）document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#SVG-dynamic", "1.1");

何かと使い途が有りそうな機能なのですが，一つ困ったことがあります．それはブラウザが返す値がかなりバラバラなのです．あくまで自己申告値であったり，「サポートしている」と判定する基準が曖昧なのでこれは仕方のない事です．下に実際にfeature文字列毎の判定値をまとめました．

※http://www.w3.org/TR/SVG11/featureを先頭に追加して下さい．

個別機能	対応する要素, 属性	static	animation	dynamic	firefox	chrome	opera
#SVG	#SVG-static, #SVG-animation, #SVGDOM-dynamicの何れかをサポートする．	○	○	○	false	true	true
#SVGDOM	上記に関わるdomオブジェクトをサポートする．	○	○	○	false	true	true
#SVG-static	static列の機能をサポートする．	○			false	true	true
#SVGDOM-static	上記に関わるdomオブジェクトをサポートする．	○			false	true	true
#SVG-animation	animationの機能をサポートする．	○	○		false	true	true
#SVGDOM-animation	上記に関わるdomオブジェクトをサポートする．	○	○		true	true	true
#SVG-dynamic	dynamic列の機能をサポートする．	○	○	○	false	false	true
#SVGDOM-dynamic	上記に関わるdomオブジェクトをサポートする．	○	○	○	false	false	true
#CoreAttribute	id, xml:base, xml:lang, xml:space属性	○	○	○	true	true	true
#Structure	svg, g, defs, desc, title, metadata, symbol, use要素	○	○	○	true	true	true
#ContainerAttribute	enable-background属性	○	○	○	false	true	true
#ConditionalProcessing	switch要素, requiredFeatures, requiredExtensions, systemLanguage属性	○	○	○	true	true	true
#Image	image要素	○	○	○	true	true	true
#Style	style要素	○	○	○	true	true	true
#ViewportAttribute	clip, overflow属性	○	○	○	true	true	true
#Shape	rect, circle, line, polyline, polygon, ellipse, path要素	○	○	○	true	true	true
#Text	text, tspan, tref, textPath, altGlyph, altGlyphDef, altGlyphItem, glyphRef要素	○	○	○	false	true	true
#BasicText	text要素	○	○	○	true	true	true
#PaintAttribute	color, fill, fill-rule, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-width, color-imterpolation, color-rendering属性	○	○	○	false	true	false
#BasicPaintAttribute	color, fill, fill-rule, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-width, color-rendering属性	○	○	○	true	true	true
#OpacityAttribute	opacity, stroke-opacity, fill-opacity属性	○	○	○	true	true	true
#GraphicsAttribute	display, image-rendering, pointer-events, shape-rendering, text-rendering, visibility属性	○	○	○	true	true	true
#BasicGraphicsAttribute	display, visibility属性	○	○	○	true	false	true
#Marker	marker要素	○	○	○	true	true	true
#ColorProfile	color-profile要素	○	○	○	false	false	false
#Gradient	linearGradient, radialGradient, stop要素	○	○	○	true	true	true
#Pattern	pattern要素	○	○	○	true	true	true
#Clip	clipPath要素, clip-path, clip-rule属性	○	○	○	true	true	true
#BasicClip	clipPath要素, clip-path属性	○	○	○	true	true	true
#Mask	mask要素	○	○	○	true	true	true
#Filter	filter要素, 原始フィルター要素全て	○	○	○	false	true	true
#BasicFilter	filter, feBlend, feColorMatrix, feComponentTransfer, feComposite, feFlood, feGaussianBlur, feImage, feMerge, feMergeNode, feOffset, feTile, feFuncR, feFuncG, feFuncB, feFuncA要素	○	○	○	false	true	true
#XlinkAttribute	xlinkに関わる属性群	○	○	○	true	true	true
#Font	フォント定義に関わる全ての要素	○	○	○	false	true	true
#BasicFont	font, font-face, glyph, missing-glyph, hkern, font-face-src, font-face-name要素	○	○	○	false	true	true
#ExternalResourcesRequired	externalResourcesRequired属性	○	○	○	false	true	true
#Extensibility	foreignObject要素	○	○	○	true	true	true
#Animation	animate, set, animateMotion, animateTransform, animateColor, mpath要素		○	○	true	true	true
#Hyperlinking	a要素			○	true	true	true
#Script	script要素			○	true	true	true
#View	view要素			○	false	true	true
#Cursor	cursor要素			○	false	true	false
#GraphicalEventsAttribute	onfocusin, onfocusout, onactivate, onclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onload属性			○	true	true	true
#DocumentEventsAttribute	onunload, onabort, onerror, onresize, onscroll, onzoom属性			○	true	true	true
#AnimationEventsAttribute	onbegin, onend, onrepeat, onload属性			○	true	false	true

このようにブラウザによって相当の違いがあることが判ります．

それではこの機能はどのように利用すべきなのでしょうか？
結論から言うと，現時点ではあまり使わないほうが良いと思います．なんだか身も蓋も無い結論ですが，積極的に使うには不確定要素が多すぎて手に負えません．唯一利用価値が有りそうな使い方としてはブラウザの判定です．スクリプトを介さずにブラウザを判定することができるというのは魅力的です．しかしこれもブラウザの実装が進めば内容が変化するのは目に見えているのでこれもあまり良い使い方ではありません.

---

svgのfeature文字列チェッカ
実際にdocument.implementation.hasFeatureメソッドを実行し，お使いのブラウザでの判定結果を表示します．

個別機能	対応する要素, 属性	static	animation	dynamic	result
#SVG	#SVG-static, #SVG-animation, #SVGDOM-dynamicの何れかをサポートする．	○	○	○
#SVGDOM	上記に関わるdomオブジェクトをサポートする．	○	○	○
#SVG-static	static列の機能をサポートする．	○
#SVGDOM-static	上記に関わるdomオブジェクトをサポートする．	○
#SVG-animation	animationの機能をサポートする．	○	○
#SVGDOM-animation	上記に関わるdomオブジェクトをサポートする．	○	○
#SVG-dynamic	dynamic列の機能をサポートする．	○	○	○
#SVGDOM-dynamic	上記に関わるdomオブジェクトをサポートする．	○	○	○
#CoreAttribute	id, xml:base, xml:lang, xml:space属性	○	○	○
#Structure	svg, g, defs, desc, title, metadata, symbol, use要素	○	○	○
#ContainerAttribute	enable-background属性	○	○	○
#ConditionalProcessing	switch要素, requiredFeatures, requiredExtensions, systemLanguage属性	○	○	○
#Image	image要素	○	○	○
#Style	style要素	○	○	○
#ViewportAttribute	clip, overflow属性	○	○	○
#Shape	rect, circle, line, polyline, polygon, ellipse, path要素	○	○	○
#Text	text, tspan, tref, textPath, altGlyph, altGlyphDef, altGlyphItem, glyphRef要素	○	○	○
#BasicText	text要素	○	○	○
#PaintAttribute	color, fill, fill-rule, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-width, color-imterpolation, color-rendering属性	○	○	○
#BasicPaintAttribute	color, fill, fill-rule, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-width, color-rendering属性	○	○	○
#OpacityAttribute	opacity, stroke-opacity, fill-opacity属性	○	○	○
#GraphicsAttribute	display, image-rendering, pointer-events, shape-rendering, text-rendering, visibility属性	○	○	○
#BasicGraphicsAttribute	display, visibility属性	○	○	○
#Marker	marker要素	○	○	○
#ColorProfile	color-profile要素	○	○	○
#Gradient	linearGradient, radialGradient, stop要素	○	○	○
#Pattern	pattern要素	○	○	○
#Clip	clipPath要素, clip-path, clip-rule属性	○	○	○
#BasicClip	clipPath要素, clip-path属性	○	○	○
#Mask	mask要素	○	○	○
#Filter	filter要素, 原始フィルター要素全て	○	○	○
#BasicFilter	filter, feBlend, feColorMatrix, feComponentTransfer, feComposite, feFlood, feGaussianBlur, feImage, feMerge, feMergeNode, feOffset, feTile, feFuncR, feFuncG, feFuncB, feFuncA要素	○	○	○
#XlinkAttribute	xlinkに関わる属性群	○	○	○
#Font	フォント定義に関わる全ての要素	○	○	○
#BasicFont	font, font-face, glyph, missing-glyph, hkern, font-face-src, font-face-name要素	○	○	○
#ExternalResourcesRequired	externalResourcesRequired属性	○	○	○
#Extensibility	foreignObject要素	○	○	○
#Animation	animate, set, animateMotion, animateTransform, animateColor, mpath要素		○	○
#Hyperlinking	a要素			○
#Script	script要素			○
#View	view要素			○
#Cursor	cursor要素			○
#GraphicalEventsAttribute	onfocusin, onfocusout, onactivate, onclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onload属性			○
#DocumentEventsAttribute	onunload, onabort, onerror, onresize, onscroll, onzoom属性			○
#AnimationEventsAttribute	onbegin, onend, onrepeat, onload属性			○