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

Written by defghi1977@xboxLIVE.この文書は全てテキストエディタで作成しています.えーと,そりゃもうゴリゴリと.

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では多くのプロパティをサポートしている.

vector-effect
ストローク幅の指定方法.
non-scaling-stroke
固定幅.
none
スケールに依存.
focusable
要素へのフォーカスの移動を許可するか.
viewport-fill
ビューポートへの塗り潰しを指定する.
viewport-fill-opacity
ビューポートへの塗り潰しの不透明度を指定する.
buffered-rendering
描画結果をバッファリングするかどうか.
auto
自動設定
dynamic
その都度描画する.(animate要素等により)描画の更新頻度が大きい場合に指定する.
static
描画結果をバッファする.描画内容への変更が少ない場合にパフォーマンスが改善される可能性がある.

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

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

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

editable
テキストの編集を許すか
none
許さない
simple
許す

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

svg tiny 1.2の独自要素

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

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

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

discard要素:メモリの開放

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

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

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

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

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

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

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

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

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

prefetch要素:先行読み込み

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