svg要素の基本的な使い方まとめ

Written by defghi1977@xboxLIVE.この文書は全てテキストエディタで作成しています.えーと,そりゃもうゴリゴリと.
※既存のページに組み込もうかとも考えたんだけれど,どうにもまだしっかとしたイメージが出来無いので,別資料として作ってみた.公開するか迷ったけれど,勿体ないからアップロードすることに.よって内容には多分に間違いが含まれています(断言).

付録.svg2の機能

去る2012/08/28日,待望のsvgの次期バージョン2のワーキングドラフトが公開された.ここではその機能について解説する.なお内容については現時点でも流動的でありどうなるかは未確定であるし,筆者の解釈が正しいかどうかもいまいち不明なので間違いが有るかもしれない.コードについてもブラウザ側でsvg2に対応するまでは動作するか不明である.

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に引き継がれる模様だ.

svg1.1からの変更点

svg2ではメジャーアップデートと言う事からその変更点は多岐に渡る.以下それらを列挙しよう.

全体

SVG DTDの参照を削除

html5と同様.

基本データ型と基本インターフェース

SVGStylableとSVGLangSpaceインターフェースの削除

インターフェースに定義されていたメンバはSVGElementに移動された.

SVGGraphicsElement,SVGDefinitionElementインターフェースを新たに追加

SVGExternalResourcesRequiredインターフェースの削除

文書構造

SVGSVGElementのsuspendRedraw, unsuspendRedraw, unsuspendRedrawAllメソッドを非推奨とする

discard要素の追加,svg要素にtimelineBegin,playbackOrder属性を追加

discard要素はドキュメントツリーから指定した要素を削除する.使い方はanimate要素と同様で,begin属性に要素を削除するタイミングを指定する事が出来る.

アニメーションを実行するタイミングはsvg1.1まではonloadイベントを起点に行われていたが,これをtimelineBegin属性から制御することができる.

timelineBegin
アニメーションのタイムラインを開始するタイミング.
onLoad
loadイベント
onStart
svgの開始タグが解釈されたタイミング

また,discard要素に絡み,アニメーションを巻き戻せるかをplaybackOrder属性で指定する事が出来る.

playbackOrder
アニメーションの巻き戻し設定
forwardOnly
巻き戻し不可
all
巻き戻し可能

スタイリング

contentStyleType属性を削除

cssで固定.実用上はこれで問題ない.

テキスト

text, textPath, tref要素のサマリーを修正.

text要素にはmask要素を内包可能.

text要素にwidth属性とtext-overflow属性を追加.

text要素に新たにwidth属性が追加された.この属性とtext-overflow属性とを組み合わせることで長さを超過した部分を(例えば三点リーダで)省略された形で描画することが出来る.これはcss3から導入された属性である.

text-overflow
超過した部分の取扱い
clip
そのまま
ellipsis
省略形
長いテキストは途中で省略されてもいいよね 長いテキストは途中で省略されてもいいよね 長いテキストは途中で省略されてもいいよね 長いテキストは途中で…

white-space属性を追加し,xml:space属性を非推奨化.

text要素にwidth属性が追加されたことにより,box的な扱いが可能となる.white-space属性ではcss3と同等の機能を提供する.

white-space
空白の取扱い
normal
連続する空白を一つにまとめ,場合により空白部で折り返す.
pre
そのまま表示.改行コードで折り返す.
nowrap
連続する空白を一つにまとめるが,折り返さない.
pre-wrap
そのまま表示するが,自動折り返しを許す.
pre-line
連続する空白を一つにまとめ,海峡コードと場合により空白部で折り返す.
svg2ではwhite-space属性を使って text要素を箱のように取り扱えるかもしれません. svg2ではwhite-space属性を使って text要素を箱のように取り扱えるかもしれません. svg2ではwhite-space属性を使って text要素を箱のように取り扱えるかもしれません. svg2ではwhite-space属性を使って text要素を箱のように取り扱えるかもしれません. svg2ではwhite-space属性を使って text要素を箱のように取り扱えるかもしれません.

kerning属性を削除.

同様の属性letter-spacingが存在しているため,kerning属性は廃止された.なお,文字間隔の調整についてはもう少し仕様を詰める必要がある模様.

ペイント

全体的に線の描画,塗り潰しのアルゴリズムの記述が詳細化された.

svg利用者側ではそれほど意識しなくても良いものの,細かい仕様が明文化された.これによりブラウザ間の動作差異が縮むことが期待される.

marker要素の機能改善

仕様を見るに当初marker要素は矢印のような用途を想定していたと考えられるが,いざ利用するとなると非常に使いにくく機能的にも不足している印象があった.svg2ではこの部分が大幅に強化される.

marker要素をpath要素等の子として記述し,position属性でその位置を指定する事が出来る.idによる参照を必要とせず,マーカーと線の色とを一括化する上でも便利である.またその際にhref属性を使い外部のmarker要素を参照することも出来るようになった.(但しhrefとxlink:hrefとの関係が不明.統一されるのだろうか?)

marker-segment属性とmarker-pattern属性の追加.

これまでのmarker-start,marker-mid,marker-endによるものを頂点マーカーと名づけ,それとは別に線分毎に割り当てられるマーカーを線分マーカーとして新たに定義した.線分マーカーはpathやpolylineを構成する線分の中点に配置されるもので,例えば折れ線グラフの線の識別に応用することが出来る.marker-segment属性で指定する.

またそれとは別に線を装飾するものとしてmarker-pattern属性が追加された.これは線の上に繰り返しパターン図形を配置するもので,意味合いとしてはstroke-dasharray属性に近いが,図形を直接指定することが出来るため柔軟性が高い.

marker要素を用いる上で面倒なのがマーカー図形の定義だが,これを補助する属性marker-knockout-left,marker-knockout-rightが追加される.現状は仕様検討中.

paint-order属性を追加.

図形の描画処理は通常fill→stroke→markerの順で上に重ねられているが,この順番をpaint-order属性で制御することが出来るようになる.これにより例えば図形の縁どりが簡単に行えるようになる.

paint-order
描画処理の順番を指定する.
normal
これまでどおりの順.fill→stroke-marker
fill,stroke,markers
単一で指定すると指定した内容が最初に,併記した場合はその順に描画される.
Paint

buffered-rendering属性の追加.

svgでは様々な画像処理を行うことができるが,複雑な処理ともなると意図せずパフォーマンスが低下するケースが発生する.この問題を回避するためにブラウザ側に処理をどのように行うべきかを指定するbuffered-rendering属性が追加される.svg tiny1.2で導入されたもので,operaでは先行して実装されている.こちらで動作の確認ができる.

buffered-rendering
描画処理の順番を指定する.
auto
自動設定
dynamic
図形が頻繁に更新されるため,都度再描画を行う必要がある事を指定する.
static
図形の構成が比較的静的な場合に指定する.画像をバッファに格納することで再描画処理が軽快になる可能性がある.

色の指定方法の拡張

色の指定方法はこれまでhtml色名称,rgb形式,16進形式のみをサポートしていたが,これに更にrgba形式(※ブラウザでは既に実装済み),hsl形式,lab形式,icc色名称及びデバイス色による指定が可能となる.

color-profile属性の削除.

ペイントサーバー

solidColor要素の追加

ペイントサーバーとしてはこれまでlinearGradient,radialGradient,patternの3つの要素が定義されていたが,これに新たにsolidColor要素が追加される.solidColor要素は単色による描画を表す要素で,複数ヶ所から参照されうる色を一箇所にまとめることで例えば画像パレットの交換等の処理を容易とする効果をもたらす.

solid-color
solid-opacity
不透明度

radialGradient要素にfr属性を追加.

放射型グラデーションに焦点に加え,焦点の半径を指定することができる.

fr
グラデーションの開始半径

meshGradient,meshRow,meshPatch要素の追加

ペイントサーバーとしてもうひとつメッシュグラデーションを表すmeshGradient要素が追加され,より柔軟なグラデーションを定義することが可能となる.一般にメッシュグラデーションは処理対象の領域を任意のベジェ曲線で(一般には歪んだ)格子状に区切り,その格子の頂点毎に色を設定しその間を曲線の形に沿ってグラデーション化する手法だ.svgではこの格子を表すために格子行を表すmeshRow要素,格子そのものを表すmeshPatch要素及び格子の四辺に相当する4つのstop要素を階層上に積み重ねて表現する.この目的のためにstop要素にpath属性が新たに追加された.

扇形のグラデーションが可能となるなど,応用次第では表現の幅が広がるものの,複雑なグラデーションを表現するとなると記述が非常に長くなることが予想される.従ってこの機能はillustrator等のツールを介した出力がメインとなるだろう.

path
stop要素においてはmeshPatchを定めるpathを指定する.この場合のstop要素の色はpathの始点における色を表すのだろうか?

クリップ・マスク・合成

mask要素にmaskType属性を追加.

マスクがけの基準として画像の輝度の他に不透明度を指定可能となった.

maskType
マスク掛けの基準をどこに取るか.
luminance
画像の輝度.
alpha
画像のアルファ値.
ここがマスク領域

mask属性の拡張

mask要素を図形要素の子として配置することが可能となった.それに伴い,mask属性の記述法が拡張され,これまで外部mask要素を参照するだけだったものに子要素を参照するための記述が追加された.また,(css)画像及びペイントサーバー要素を直接指定することも可能となった.

mask
マスクの参照先の指定及びマスクの基準.
url([参照先])
マスク要素もしくはペイントサーバーもしくは外部の画像.
child
図形要素の最後のmask子要素
[セレクタ]
図形要素のmask子要素を参照するセレクタ文字列.
luminance
画像の輝度.
alpha
画像のアルファ値.
auto
自動(mask要素を参照する場合はmaskTypeを利用する).

フィルター

svgから分離され,Filter Effect仕様としてhtmlと共通化された.

原始フィルタfeUnsharpMask要素,feDropShadow要素,feDiffuseSpecular要素の追加.

フィルタの中でもよく使われるものにつき原始フィルタとして格上げとなった.

feCustom要素の追加.

フィルタ対象の画像をメッシュで区切り,そのメッシュを変形させることで自在な変形効果を得る.外部言語(webGL等)を利用する必要があったり,他の原始フィルタとの整合性の兼ね合いから今後どうなるか判らない.

スクリプティング

contentScriptTypeの削除.

実用上javascript(ecmascript)で事足りるため問題なし.

アニメーション

ElementTimeControlインターフェースの内容はSVGAnimationElementに移動.

実用上の影響は殆ど無い.

フォント

woffフォントのサポートを追加.

その他css3との整合性が考えられている.