18.svg tiny 1.2の要素・属性

これまではsvg1.1 full second editionをベースに説明した．このセクションではsvg tiny 1.2について簡単に説明する．なお，何れも動作するかは未知数である．これらの機能については将来的にsvg2.0に統合され，利用できるようになるかもしれない．実際一部の機能はブラウザで利用可能となっている．

svg tiny 1.2がサポートする機能

svg tiny 1.2では概ね図形の描画に特化しており，概ね画像効果に関わるcripPath，mask，filter要素以外の機能はそのまま利用できると考えてよい．その他には現在広く用いられているsvg1.1よりもマイナーバージョンが高いことから様々な機能の追加が行われている．しかしsvg tiny 1.2をサポートする環境は御世辞にも多いとは言えず，現実的には中々利用しにくい現状がある．これは仕様を策定した時点で，実際にsvgを利用する側の要求と仕様との間に乖離を生じてしまったがための結果で，更にはsvg full 1.2策定作業の中止をも招いてしまった．（想定していたよりも携帯機の性能向上が早かったということなのだろう．）このような背景もあってか，svgの次期バージョン2.0の検討に際し全面的な見直しが入る模様で，幾つかの機能については使えなくなる可能性がある．とはいえ，svg tiny 1.2にも魅力的な機能は存在しているため，それらはより使いやすい形でsvg2.0に取り入れられるものと考えられる．

このような現状からsvg tiny 1.2を用いるのは余程のことがない限り控えた方が良いかもしれない．ドローイングツールによってはsvgの出力バージョンを選択することができるが，このようなバージョン間の非互換性が見込まれる現状ではsvg1.1を選択しておくのが無難であろう．

主な独自機能

svg tiny 1.2がサポートする独自機能について列挙してみよう．この中の幾つかは次期svg2.0に引き継がれる模様で，ブラウザによっては先行して実装しているもののある．operaでは多くのプロパティをサポートしている．

サイズを固定した図形の描画．ズームやtransformを行った場合のリサイズを行わないことにより，例えば地図上のアイコンのサイズを固定しつつ拡大表示を行うと言った処理を実現する．
固定幅のストロークの指定．ズームやtransformを行った際にストローク幅が変化してしまうのを回避する為の手段を提供する．

vector-effect

ストローク幅の指定方法．

non-scaling-stroke: 固定幅．
none: スケールに依存．

<svg version="1.2" baseProfile="tiny" viewBox="-100 -100 200 200">
    <rect x="-20" y="-20" width="40" height="40" rx="5" ry="5" stroke="blue" stroke-width="2" fill="none">
        <animateTransform attributeName="transform" type="scale" values="5,5;1,1;5,5" keyTimes="0;0.5;1" repeatCount="indefinite" begin="0s" dur="5s"/>
    </rect>
    <rect vector-effect="non-scaling-stroke" x="-20" y="-20" width="40" height="40" rx="5" ry="5" stroke="red" stroke-width="2" fill="none">
        <animateTransform attributeName="transform" type="scale" values="1,1;5,5;1,1" keyTimes="0;0.5;1" repeatCount="indefinite" begin="0s" dur="5s"/>
    </rect>
</svg>

図形要素に対するフォーカス移動を制御する．

focusable: 要素へのフォーカスの移動を許可するか．

<svg version="1.2" baseProfile="tiny" viewBox="-100 -100 200 200">
    <style>
        rect:focus{
            stroke:red;
        }
    </style>
    <rect x="-50" y="-50" width="100" height="100" rx="5" ry="5" stroke="blue" stroke-width="12" fill="none" focusable="true"/>
</svg>

ビューポートへの塗り潰しの指定．ルートsvgには既にbackground-colorによる背景色の指定が可能．

viewport-fill: ビューポートへの塗り潰しを指定する．
viewport-fill-opacity: ビューポートへの塗り潰しの不透明度を指定する．

<svg version="1.2" baseProfile="tiny" viewBox="-100 -100 200 200" viewport-fill="orange">
    <style>
        rect:focus{
            stroke:red;
        }
    </style>
    <rect x="-50" y="-50" width="100" height="100" rx="5" ry="5" fill="green"/>
</svg>

描画処理の制御を行う．svgではその特性上処理が勝手に行われるため，パフォーマンスの改善を行うことが難しい．buffered-rendering属性はある程度これを制御するためのもので，処理結果のバッファリング（一時保管）するかどうかを指定する．使いこなすにはsvgグラフィックの処理の順番を理解しておく必要があるし，スペックが十分な場合はその違いが判りにくい．一方スマートフォン等のリソースが限られた環境においては，処理ステップ数を減らすことで無駄な電力の消費を削減出来る可能性もあり無視できない属性ではある．

buffered-rendering

描画結果をバッファリングするかどうか．

auto: 自動設定
dynamic: その都度描画する．（animate要素等により）描画の更新頻度が大きい場合に指定する．
static: 描画結果をバッファする．描画内容への変更が少ない場合にパフォーマンスが改善される可能性がある．

※簡単な設定例を示すが，動作確認を行うにはこれだけでは不十分．

<svg version="1.2" baseProfile="tiny" viewBox="0 0 200 200">
    <g buffered-rendering="static">
        <circle cx="100" cy="100" r="80" fill="yellow"/>
        <circle cx="60" cy="60" r="50" fill="orange" opacity="0.5"/>
        <rect x="50" y="50" width="100" height="100" fill="green" opacity="0.5"/>
        <polygon points="140,100 180,180 100,180" fill="red" opacity="0.5"/>
    </g>
</svg>

システムカラーの指定が可能．

ブラウザが動作していいる環境の色設定を参照する．webアプリケーションとネイティブアプリケーション間での統一感が生まれる．既に多くのブラウザで動作する．

<svg version="1.2" baseProfile="tiny">
    <circle cx="100" cy="100" r="80" fill="ButtonHighlight"/>
</svg>

複数行テキストの描画．
テキストの編集機能．

svg内のテキストを編集することが出来る．

<svg viewBox="0 0 200 200" version="1.2" baseProfile="tiny">
    <textarea editable="simple" font-size="25" font-family="Georgia" x="10" y="10" width="180" height="180" fill="blue">このテキストは<tbreak/>編集することができます．</textarea>
</svg>

editable

テキストの編集を許すか

none: 許さない
simple: 許す

メディア（音声，動画）の挿入．

こうして見てみると，svgをユーザーインターフェース構築の基盤となることを狙っていたことがよく判る．しかしモバイル機器の性能が向上するに連れ，このような用途は既に様々な面で成熟していたhtml技術にとって変わられてしまった．従って改めてsvgとしての立ち位置を見つめ直す事を余儀なくされたのだ．

svg tiny 1.2の独自要素

以下svg tiny 1.2で独自に定義されている要素について示す．一部の要素，一部のブラウザで辛うじて動作するものもあるが，原則的には何れも動作しないと思ってよい．

animation：アニメーションタイミングの制御

アニメーションが施されたsvg文書を参照して，その開始タイミング等を制御する．それ以外は概ねimage要素と同等の機能を有する．

discard要素：メモリの開放

discard要素は要素の破棄を表す．使い方はanimate要素と同様だが，当該要素が画面描画上不必要となった際にdomからその要素を破棄し，メモリを開放する動作をとる．

<svg version="1.2" baseProfile="tiny">
    <circle cx="100" cy="100" r="80" fill="red">
        <discard begin="click"/>
    </circle>
</svg>

listener要素・handler要素：イベント処理

listener要素はイベントの発生を監視し，その発生をhandler要素に通知するもの．handler要素ではjavascriptを用いてイベント処理を記述する．svg tiny 1.2ではonload等のイベント属性をサポートしていないための措置．

solidColor要素：単色による塗りつぶし

solidColor要素は，単色の塗りつぶしを表す．使い方はlinearGradient，radialGradientと同様であり，複数のオブジェクトのペイント処理を一つに集約する目的に使える．

<svg version="1.2" baseProfile="tiny">
    <defs>
        <solidcolor id="c1" solid-color="red" solid-opacity="0.5"/>
    </defs>
    <circle cx="100" cy="100" r="80" fill="url(#c1)"/>
</svg>

textArea要素・tbreak要素：テキストの範囲描画

textArea要素は指定した矩形にテキストを描画する．自動的に折り返されるため，htmlにおけるdiv要素と同じ感覚となる．tbreak要素はtextArea要素内での改行を表す．editable属性で編集可能にできる．focusable属性ではフォーカスを当てることができるようになる．

<svg viewBox="0 0 200 200" version="1.2" baseProfile="tiny">
    <textarea font-size="25" font-family="Georgia" x="10" y="10" width="180" height="180" fill="blue">寿限無、寿限無五劫の擦り切れ海砂利水魚の水行末雲来末風来末食う寝る処に住む処やぶら小路の藪柑子<tbreak/>パイポパイポパイポのシューリンガンシューリンガンのグーリンダイグーリンダイのポンポコピーのポンポコナーの長久命の長助</textarea>
</svg>

audio要素・video要素：マルチメディア

audio要素は音声の再生を表す要素で，要素そのものは描画されず，他の要素の各種イベント（クリックなど）発生時に音声を発生させることができる．video要素は動画を表示する要素で，image要素と同じ属性を持つほか，動画の見た目に関わる属性が定義されている．

prefetch要素：先行読み込み

prefetch要素は音声や動画，大きな画像など，処理負荷が高いオブジェクトを事前に読み込んでおくためのもので，要素そのものは描画されない．