ここではこれまでの説明から漏れた要素について述べる．svgの図形描画の品質に関わるプロパティは，今後予想される出力デバイスの高解像度化・多様化において存在価値が高まることが予想される．それ以外については何れも知らなくてもさほど問題はないし，知っていたとしても目に見えて使えると言った機能でもない．従ってブラウザでのサポートもそれほど期待できず，むしろ使わないほうがいい機能もある．
17.その他の要素と属性
switch:条件付き処理
switch要素はsvgの描画の実行環境（ブラウザや画像ビューア）によりレンダリング内容の一部・全体を変更する場合に用いる．この機能を用いることで，環境毎にアニメーションさせたり，静止画を表示させたりといった処理の振り分けを行うことが可能となる．その条件判定のために図形要素にはrequiredFeatures，requiredExtensions，systemLanguage属性が定義されており，switch要素の子要素について各属性に条件を指定しておくと，レンダリング処理時に実行環境と照らし合わされて，全ての条件に合致した最初の要素のみが描画される．従って予め切り替えたい図形群をg要素でまとめておくと良い．なおswitch要素外の要素は条件判定対象外である．
systemLanguage属性にはシステムの言語を，requiredFeaturesには実行環境に要求する機能（アニメーション再生機能等）を列挙する．requiredExtensionsはsvg仕様の範囲外の機能を必要とする場合に設定する．
- systemLanguage
- システム言語を参照し，一致したときにレンダリングを行う．
- requiredFeatures
- 動作環境におけるsvgサポート状況を調べるための機能名．以下に一覧を掲載している．
- requiredExtensions
- 動作環境がサポートする拡張機能の名称．
xhtml:http://www.w3.org/1999/xhtml
MathML:http://www.w3.org/1998/Math/MathML
上記属性を設定可能な要素：a, altGlyph, animate, animateColor, animateMotion, animateTransform, circle, clipPath, cursor, defs, ellipse, foreignObject, g, image, line, mask, path, pattern, polygon, polyline, rect, set, svg, switch, text, textPath, tref, tspan, use
但し，ユーザーエージェントが返してくる値はあくまで自己申告値であるため，ある条件が真と判定されても，実際にはその機能が利用可能かについては判らない．事実ブラウザ毎にかなりいい加減な結果となるので本格的な利用はまだまだ先となりそうだ．（実際，無くてもそれほど困らない機能ではある．）
実行例
ブラウザの言語毎に表示が切り替わる設定を施してみた．上の要素から順に条件判定が行われる．日本語環境であれば最初のEnglishとの判定が「偽」となり，2行目の判定が「真」となるはず．だが，ブラウザごとに実行結果は異なる．
ブラウザの持つ機能によって表示が切り替わる設定を施してみた．ユーザーエージェントにはサポートするsvgの機能の範囲により「SVG-dynamic」「SVG-animation」「SVGDOM-static」の何れかを返すべきとあるが，これもブラウザごとに判定結果が異なる．また，svgの参照モードとも関係しないようだ．
ブラウザの拡張機能の有無を判定する例．例えばMathMLの動作を確認し，MathMLで表示するかsvgで表示するかを切り替えると言った用途に使える．
svgの仕様において，この属性に指定可能な値としては推奨される文字列の形式（uri形式）のみを提示するに留めており，実際にどのような値を指定すべきかはsvgを利用する側で決定して良いこととなっている．例えばsvgをサポートするepubにおいては，文字列「http://www.idpf.org/2007/ops」を拡張機能文字列として扱う旨の記述がなされている．
externalResourcesRequired属性による外部リソースの判定
似たような使い途の属性としてexternalResourcesRequiredがある．これを用いると外部リソースの有無によるレンダリング判定を行える．
- externalResourcesRequired
- 外部リソースの存在が必須かどうか．
設定可能な要素：a, altGlyph, animate, animateColor, animateMotion, animateTransform, circle, clipPath, cursor, defs, ellipse, feImage, filter, font, foreignObject, g, image, line, linearGradient, marker, mask, mpath, path, pattern, polygon, polyline, radialGradient, rect, script, set, svg, switch, symbol, text, textPath, tref, tspan, use, view
externalResourcesRequired属性を設定した例．実際には存在しない画像を参照しようとしている．前者の要素ではexternalResourcesRequiredがtrueに設定されているため，描画されないはずだが…
switch要素によるブラウザ判定
ブラウザ間の動作の違いを埋めるため，ブラウザの種類を判定し処理内容を変更したい場合，お勧めはできないもののswitch要素を利用することができる．requiredFeatures属性はブラウザ毎に処理結果が異なるため，これを利用するのだ．なおrequiredFeatures属性はswitch要素でも有効のはずだが，chromeで正常に動作しないためswitch要素をg要素で囲っている．
なお，svgの参照方法（object要素・img要素）によって動作が異なることが考えられるため，十分な動作検証を行うこと．この方法はブラウザが自己申告している値を逆手にとっているため，その値が変更となった場合に動作しなくなってしまう点に注意する．また，今後ブラウザの種類が増えた場合に対処できるかは不明なため，より確実な方法が編み出されているjavascriptと組み合わせて利用すると良い．
参考・requiredFeaturesに指定可能な値一覧
svg1.1における特色機能文字列の内容を表にまとめた．いずれも先頭に「http://www.w3.org/TR/SVG11/feature」を先頭に付けるものとする．
例）http://www.w3.org/TR/SVG11/feature#SVG
- #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オブジェクトをサポートする．
| 個別機能 | 対応する要素，属性 | static | animation | dynamic |
|---|---|---|---|---|
| #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属性 | ○ |
svgビュー指定によるビュー設定の上書き
svgファイルをブラウザで開いた場合，通常はsvg要素に記述されたviewBox設定で画像が表示されるが，次に示すsvgビュー指定（svg view specification）を追加指定することでこの内容を上書きすることが出来る．
下の例では同じsvgファイルをobject要素で表示したもので，右側にはファイルのuriに続けてsvgビュー指定を追記している．svgビュー指定を追加した方ではviewBox設定が上書きされていることがわかる．
| data="sample.svg" (viewBox="0 0 300 200") | data="sample.svg #svgView(viewBox(50,50,100,100))" |
|---|---|
この仕組みを利用すると，例えば世界地図に相当するsvgをwebページに表示させておいて，後からsvgビュー指定を変更することで自由に地図の範囲を変更すると言った事が可能になる．例を示そう．下記のリンクはそれぞれ同じsvg画像を参照しているが，それぞれ別のsvgビュー指定が為されている．
svgビュー指定のパラメータ
svgビュー指定に指定可能なパラメータを以下に示す．複数の値をセミコロンで列挙することが出来る．
- viewBox
- 表示範囲の指定．viewBox(0,0,100,100)
- preserveAspectRatio
- アスペクト比の指定．preserveAspectRatio(none)
- transform
- 変形の指定．transform(scale(5))
- zoomAndPan
- ズーム・パンの指定．zoomAndPan(magnify)
- viewTarget
- svgビュー指定の適用先となる要素(つまりviewBoxが定義可能な要素)．viewTarget([要素のID])
動作例
以下に動作サンプルを示す．svgビュー指定の動作はブラウザの種類や利用する環境によって大きく動作が変化する．
#svgView(viewBox(50,50,100,100))を指定した例．
| iframe | object | embed | img | background-image |
|---|---|---|---|---|
)) |
#svgView(preserveAspectRatio(none))を指定した例．
| iframe | object | embed | img | background-image |
|---|---|---|---|---|
)) |
#svgView(transform(translate(50,50)))を指定した例．
| iframe | object | embed | img | background-image |
|---|---|---|---|---|
))) |
view:ビューの定義
svgビュー指定はsvgの利用者側で自由に指定することが出来たが，この内容はview要素としてsvg文書内部に定義しておくことが出来る．以下にview要素に設定可能な属性のリストを示す．何れも先ほどsvgビュー指定の内容に対応していることに注意しよう．
- id
- view要素に対するid.ビューの選択を行う際の識別子となる．
- viewBox
- 表示範囲の指定．
- preserveAspectRatio
- アスペクト比の指定．
- transform
- 変形の指定．
- zoomAndPan
- ズーム・パンの指定．
- viewTarget
- svgビュー指定の適用先となる要素(つまりviewBoxが定義可能な要素)．
view要素で定義したビューはそのidをuri文字列のハッシュ値として指定することで有効となる．例を示す．このsvg文書には規定のviewBoxの他に，view要素によって別の2つのビュー「veiw1」と「view2」が定義されている．
<?xml version="1.0" standalone="no"?>
<svg width="200px" height="200px" viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<!--予め定義しておいたビュー-->
<view id="view1" preserveAspectRatio="none"/>
<view id="view2" viewBox="50 0 200 200"/>
<circle id="circle" cx="60" cy="60" r="50" fill="red"/>
<polygon id="triangle" points="120,50 70,140 170,140" fill="yellow"/>
<rect id="rect" x="160" y="110" width="80" height="80" fill="blue"/>
</svg>
これらのビューを有効化するには「xxx.svg#view1」，「xxx.svg#view2」と指定する．次のリンクをクリックして動作を確かめて欲しい． 初期ビューを選択 view1を選択 view2を選択
なお動作の仕組み上htmlにおけるインラインsvgではview要素は無効となる．
グラフィック描画の品質に関わる属性
svgはベクタグラフィックであり，名目上解像度に依存しない出力結果を得られることとなっているが，これは画像出力時に実際の解像度に合わせて必ず近似処理が行われるという事でもある．従って，svgの用途に応じた近似処理を指定出来たほうが使いやすい．例えば，画像のアンチエイリアス処理はほとんどのケースにおいて良好な見た目を提供するが，同時にシャープネスが無くなるという弊害も持ち合わせており，グラフやロゴ等の描画においてマイナスの要因ともなりうる．以下に示す属性はその品質に関わるもので，値を適切に設定することでより良いグラフィック品質を期待することができる．
但しいずれもユーザーエージェントに描画処理におけるヒントを与えるだけであり，具体的な処理方法を示すものではない．つまり，どのように処理するかはwebブラウザの実装に依存するため，全ての環境において同じ見た目が得られるとは限らない点に注意しよう．
- color-rendering
- 色の演算の品質．
- auto
- 自動
- optimizeSpeed
- 速度優先
- optimizeQuality
- 品質優先
- inherit
- 親からの継承
- shape-rendering
- 基本図形の描画品質
- auto
- 自動
- optimizeSpeed
- 速度優先
- crispEdges
- エッジ強調（アンチエイリアス無効）
グラフを描画する場合など，見た目をくっきりさせたい場合に利用する． - geometricPrecision
- 幾何精度優先
- inherit
- 親からの継承
- text-rendering
- テキスト描画の品質
- auto
- 自動
- optimizeSpeed
- 速度優先
- optimizeLegibility
- 読みやすさ優先
- geometricPrecision
- 幾何精度優先（ブラウザによる自動調整を行わない．）
text要素などにアニメーションを施す際の動作の品質を改善する効果がある． - inherit
- 親からの継承
文字列の描画においてはブラウザによる暗黙的な微調整が働くため，geometricPrecisionを設定したものとそれ以外とでは若干文字列幅に差が発生している事が判る．
- image-rendering
- image要素におけるラスタ画像の描画品質
- auto
- 自動
- optimizeSpeed
- 速度優先
- optimizeQuality
- 品質優先
- inherit
- 親からの継承
- crisp-edges
- スムージング拡大(hqx等)※CSS
- pixelated
- ピクセル拡大(nearest neighbor等)※CSS
- -moz-crisp-edges
- firefoxにおいてpixelatedと同等
firefoxにおいてはoptimizeSpeedを指定した場合nearest neighbor法によるリサイズ処理を，optimizeQualityを指定した場合bilinear法によるリサイズ処理を行う．chromeでは常にアンチエイリアス処理を行う．現状，本属性は何の効果も及ぼさない．なおCSSにより内容が再定義され，新たにcrisp-edges,pixelated値が追加される予定となっている．
なお，現状では歴史的な経緯から非常にややこしいこととなっているので，できる事なら使いたくないプロパティだ．(各ブラウザが個別に実装した挙句に全く互換性がとれていないという珍しい例)
color-profile:カラープロファイルの指定
color-profile要素を用いると，画像や図形の描画を行う際のカラープロファイルを定義・指定することができる．カラープロファイルは，異なる環境間の色の調整を行うためのもの．が，対応しているブラウザは存在しない．下記のサンプルは記述の方法を示しただけなので，正しく動作しない．
- color-profile
- カラープロファイルの指定．