去る2012/08/28日,待望のsvgの次期バージョン2のワーキングドラフトが公開された.ここではその機能について解説する.なお内容については現時点でも流動的でありどうなるかは未確定であるし,筆者の解釈が正しいかどうかもいまいち不明なので間違いが有るかもしれない.コードについてもブラウザ側でsvg2に対応するまでは動作するか不明である.
去る2012/08/28日,待望のsvgの次期バージョン2のワーキングドラフトが公開された.ここではその機能について解説する.なお内容については現時点でも流動的でありどうなるかは未確定であるし,筆者の解釈が正しいかどうかもいまいち不明なので間違いが有るかもしれない.コードについてもブラウザ側でsvg2に対応するまでは動作するか不明である.
現在広く用いられているsvgのバージョンは1.1第二版と呼ばれているものであり,webブラウザにおいても概ねこの仕様に則ってsvgは実装されている.だが初版が策定されてからかなりの時間が経過しているために,仕様の不備や機能の不足が指摘されており次期svgの登場が期待されていた.その一方で元来この要望に答えるために策定予定であったsvg1.2は,先行して作られたsvg tiny 1.2の仕様におけるニーズとのギャップの問題から中止の憂き目に遭ってしまった†.この反省から今回公開されたsvg2のワーキングドラフトはsvg1.1の後継として,より現実的な視点で機能の追加がなされている.またsvg1.1が技術的に陳腐化しつつ有る中,svg2は並行して仕様が策定中であるhtml5及びcss3とより親和性の高いものとなる予定である.(svg1.1ーsvg2の関係はhtml4ーhtml5の関係に近い)
†と言っても有益と判断されたsvg tiny 1.2の内容の一部はsvg2に引き継がれる模様だ.
svg2ではメジャーアップデートと言う事からその変更点は多岐に渡る.以下それらを列挙しよう.
html5と同様.
インターフェースに定義されていたメンバはSVGElementに移動された.
discard要素はドキュメントツリーから指定した要素を削除する.使い方はanimate要素と同様で,begin属性に要素を削除するタイミングを指定する事が出来る.
アニメーションを実行するタイミングはsvg1.1まではonloadイベントを起点に行われていたが,これをtimelineBegin属性から制御することができる.
また,discard要素に絡み,アニメーションを巻き戻せるかをplaybackOrder属性で指定する事が出来る.
cssで固定.実用上はこれで問題ない.
text要素にはmask要素を内包可能.
text要素に新たにwidth属性が追加された.この属性とtext-overflow属性とを組み合わせることで長さを超過した部分を(例えば三点リーダで)省略された形で描画することが出来る.これはcss3から導入された属性である.
text要素にwidth属性が追加されたことにより,box的な扱いが可能となる.white-space属性ではcss3と同等の機能を提供する.
同様の属性letter-spacingが存在しているため,kerning属性は廃止された.なお,文字間隔の調整についてはもう少し仕様を詰める必要がある模様.
svg利用者側ではそれほど意識しなくても良いものの,細かい仕様が明文化された.これによりブラウザ間の動作差異が縮むことが期待される.
仕様を見るに当初marker要素は矢印のような用途を想定していたと考えられるが,いざ利用するとなると非常に使いにくく機能的にも不足している印象があった.svg2ではこの部分が大幅に強化される.
marker要素をpath要素等の子として記述し,position属性でその位置を指定する事が出来る.idによる参照を必要とせず,マーカーと線の色とを一括化する上でも便利である.またその際にhref属性を使い外部のmarker要素を参照することも出来るようになった.(但しhrefとxlink:hrefとの関係が不明.統一されるのだろうか?)
これまでのmarker-start,marker-mid,marker-endによるものを頂点マーカーと名づけ,それとは別に線分毎に割り当てられるマーカーを線分マーカーとして新たに定義した.線分マーカーはpathやpolylineを構成する線分の中点に配置されるもので,例えば折れ線グラフの線の識別に応用することが出来る.marker-segment属性で指定する.
またそれとは別に線を装飾するものとしてmarker-pattern属性が追加された.これは線の上に繰り返しパターン図形を配置するもので,意味合いとしてはstroke-dasharray属性に近いが,図形を直接指定することが出来るため柔軟性が高い.
marker要素を用いる上で面倒なのがマーカー図形の定義だが,これを補助する属性marker-knockout-left,marker-knockout-rightが追加される.現状は仕様検討中.
図形の描画処理は通常fill→stroke→markerの順で上に重ねられているが,この順番をpaint-order属性で制御することが出来るようになる.これにより例えば図形の縁どりが簡単に行えるようになる.
svgでは様々な画像処理を行うことができるが,複雑な処理ともなると意図せずパフォーマンスが低下するケースが発生する.この問題を回避するためにブラウザ側に処理をどのように行うべきかを指定するbuffered-rendering属性が追加される.svg tiny1.2で導入されたもので,operaでは先行して実装されている.こちらで動作の確認ができる.
色の指定方法はこれまでhtml色名称,rgb形式,16進形式のみをサポートしていたが,これに更にrgba形式(※ブラウザでは既に実装済み),hsl形式,lab形式,icc色名称及びデバイス色による指定が可能となる.
ペイントサーバーとしてはこれまでlinearGradient,radialGradient,patternの3つの要素が定義されていたが,これに新たにsolidColor要素が追加される.solidColor要素は単色による描画を表す要素で,複数ヶ所から参照されうる色を一箇所にまとめることで例えば画像パレットの交換等の処理を容易とする効果をもたらす.
放射型グラデーションに焦点に加え,焦点の半径を指定することができる.
ペイントサーバーとしてもうひとつメッシュグラデーションを表すmeshGradient要素が追加され,より柔軟なグラデーションを定義することが可能となる.一般にメッシュグラデーションは処理対象の領域を任意のベジェ曲線で(一般には歪んだ)格子状に区切り,その格子の頂点毎に色を設定しその間を曲線の形に沿ってグラデーション化する手法だ.svgではこの格子を表すために格子行を表すmeshRow要素,格子そのものを表すmeshPatch要素及び格子の四辺に相当する4つのstop要素を階層上に積み重ねて表現する.この目的のためにstop要素にpath属性が新たに追加された.
扇形のグラデーションが可能となるなど,応用次第では表現の幅が広がるものの,複雑なグラデーションを表現するとなると記述が非常に長くなることが予想される.従ってこの機能はillustrator等のツールを介した出力がメインとなるだろう.
マスクがけの基準として画像の輝度の他に不透明度を指定可能となった.
mask要素を図形要素の子として配置することが可能となった.それに伴い,mask属性の記述法が拡張され,これまで外部mask要素を参照するだけだったものに子要素を参照するための記述が追加された.また,(css)画像及びペイントサーバー要素を直接指定することも可能となった.
svgから分離され,Filter Effect仕様としてhtmlと共通化された.
フィルタの中でもよく使われるものにつき原始フィルタとして格上げとなった.
フィルタ対象の画像をメッシュで区切り,そのメッシュを変形させることで自在な変形効果を得る.外部言語(webGL等)を利用する必要があったり,他の原始フィルタとの整合性の兼ね合いから今後どうなるか判らない.
実用上javascript(ecmascript)で事足りるため問題なし.
実用上の影響は殆ど無い.
その他css3との整合性が考えられている.