svg の基本的な使い方 svg 文書の根幹となる svg 要素, 図形のグループ化を行う g 要素,svg におけるモジュール化を表す defs 要素, 図形を参照する use 要素,ハイパーリンクを表す a 要素等. 図形

(1)

2章

svg 要素と svg 文書

svg 画像を描くにはまず svg 要素について知っておく必要がある．ここでは最も基本の svg 要素の使い方について示し，svg 画像を html に挿入する様々な方法について説明する．また，svg を手書きする場合の注意点について述べる．

2.1 序・svg の構成

前の章でsvg の特色については理解できたはずなので，ここからは実際の svg の構成について見ていくこととする．これまで何度も出てきたようにsvg は xml で定義された 2 次元画像記述言語である．ここで「xml で定義された」とは xml の基本的な仕様，つまり(1) 「テキスト文書である．」(2)「様々なデータはツリー構造で表される．」(3)「タグ（要素）と属性と呼ばれる機構でデータに意味付けを行う．」に準拠している事を指す．かいつまんで言うとsvg は xml である1_．その上で，svg では独自に定義したタグ名，属性名にグラフィック描画に必要となる色や処理等を対応付けている．従ってsvg を学ぶということは，このタグ名・属性名の意味合いを理解することに他ならない．それではどのような要素が存在するのか？カテゴリ毎にざっと見てみよう． ● 文書の構造に関わるもの 1 正確には「svg ファイルは xml ファイルである」．因みに html は xml ではない．記述法こそ似ているが，html は xml ほどの厳密さを持たない．なお，この html を xml で再定義したもの（xml 形式にコンパイルしたもの）が xhtml である

(2)

svg 文書の根幹となる svg 要素，図形のグループ化を行う g 要素，svg におけるモジュール化を表すdefs 要素，図形を参照する use 要素，ハイパーリンクを表す a 要素等． ● 図形の描画に関わるもの基本となるpath 要素を始めとした要素そのものが図形を表すもの． ● 描画のスタイルに関わるものグラデーションやパターンを表す要素や，線描画の際の端点図形（マーカー）を表す要素． ● テキストの描画，フォントの定義に関わるもの text 要素を始めとしたテキスト描画を司るものと文字フォントそのものを定義する font 要素． ● 画像の加工に関わるもの画像のクリップやマスク処理，フィルター処理を行うためのもの． ● アニメーションに関わるもの smil から引用した要素群． ● スタイルシートに関わるもの． ● スクリプト処理に関わるもの．この他にも便利な要素がたくさん定義されている．初めてsvg に触れると言う人には数が多すぎて目眩がするくらいだろう．だが，これらを全て理解せずとも別に構わない． svg は余りにも汎用的に設計されているために，どうしても仕様が大きくなってしまっているのだ．逆に言えば，全ての仕様を同時に利用する場面はそもそも存在しない．現に最新のweb ブラウザにおいてもサポートしている機能にばらつきがあったり，利用できない要素が存在している．これはブラウザに不備があると言うよりも，svg をブラウザで表示する場合にはそれほど重要ではないということなのだ2_．このようなことから，自分の興味の範囲で好きなところから触れてみるというのがsvg 上達への早道である．確かに便利な機能が多数提供されているが，それらを知らずとも svg には様々な代替手段が提供されているので，意外と何とかなるのが面白いところだ．以下，svg を構成する上で最も基本となる svg 要素から順に，様々な要素の意味合いについて見ていくこととする． 2 もちろん，その要素が他の用途（例えば出版など）で重要な役割を果たすことは考えられる．

(3)

2.2 svg:ベクタ画像のカンバスの定義

html 文書において svg 画像を挿入したい場合，(1)「iframe 要素を用いる」(2)「embed 要素を用いる」(3)「object 要素を用いる」(4)「img 要素を用いる」(5)「input 要素（イメージボタン）を用いる」(6)「background-image に設定する」(7)「svg 要素を用いる」のいずれかを選択することとなる．(1)〜(6)は外部 svg ファイルによるもので，(7)は html5 から導入されたものだ．svg 要素を用いると(x)html 文書内に svg 記述をシームレスに埋め込むことが出来る．なお，svg によるグラフィックは複雑になるほど，その記述量が爆発的に増加する傾向があるため，実現したい要件に対してどの方法が最も適したやり方か予め検討する必要がある．

2.2.1 インラインでの

_{svg の表示}

(7)を用いる場合は html5 を用いることをブラウザに明示的に知らせるため，html ファイルのドキュメントタイプ宣言に「<!DOCTYPE html>」を指定すること．それ以外では場合によりsvg 要素が表示されない可能性がある．実際にコードを記述してみよう．下記の内容をhtml ファイルの中に記述してインライン svg に対応したブラウザで開くと，画像が表示されるはずだ．svg は xml で定義された言語であるため，要素名・属性名の大文字・小文字は混同してはならない点に注意しよう． html 埋め込みの svg 要素の場合は多少の間違いがあってもグラフィックが描画されてしまうが，これはブラウザが勝手に解釈しているだけなので，標準的な記法ではない． <svg id="bbb" viewBox="0 0 300 400">

</svg>

(4)

原則としてsvg で定義された要素のみ記述できる3_．なお_{a 要素のように名称が同じでも内} 部的に（名前空間が）異なるものとして処理される4_{ものがあるので注意しよう．} svg 要素における width，height 属性は html 要素のそれと同じくブラウザ（ユーザーエージェント）上での表示のサイズを表す．単位にはem，ex，px，pt，pc，cm，mm，in，% が利用可能である．この他にhtml のスタイル属性を指定することも可能で，img 要素と同等に取り扱うことが出来る．一方，svg の内部の要素には svg に由来するスタイルが適用される．なお一般的な画像ファイルが暗黙的に描画サイズが決定されるのに対し，svg においてはwidth，height 属性を指定しなかった場合，可変サイズのグラフィックとなる．つまり， html ファイルと同様に表示サイズに応じた描画を行うことも可能である5_． em フォントの大きさ（font-size）を参照する単位． ex フォントの高さを参照する単位． px ピクセル．元来ディスプレイやプリンタの1画素に相当する大きさだが，スマートフォンや Retinaディスプレイの登場によりこの関係が崩れつつ有る．実際の表示サイズはデバイス毎に定義されたdevicePixelRatio値に依存する． pt ポイント．1pt=1/72in=0.3527mm pc パイカ．1pc=12pt． cm センチメートル． mm ミリメートル． in インチ．1in=25.4mm． % コンテナ要素の大きさに対する比率． 3 原則とあるのは，html 要素を含める方法があるため．→foreignObject 要素 4 xml では要素名が同じであっても名前空間が異なるものは別の用途で用いられているものとして扱う．これは xml を基盤とした複数の言語を同時に利用する際の要素名の衝突を防ぐ目的で導入されている． 5 但し，svg の使い方や動作環境によっては思わぬ問題を引き起こすケースがあるため，注意が必要である．

(5)

2.3 svg 要素の属性

以下にsvg 要素に関する属性値を示す． width カンバス幅(単位はpx,cm,%…)．htmlではsvg要素のレンダリング幅と同じ． height カンバス高(単位はpx,cm,%…)．htmlではsvg要素のレンダリング高と同じ． xmlns svgの名前空間(固定)．html5であればsvg要素はsvgに決まっているので，記述の必要はない．なおxhtml5やスタンドアロンのsvgファイルを記述する際は，加えてxlinkの名前空間を定義しておく必要がある．参考のため主な物を示す． svg http://www.w3.org/2000/svg xlink http://www.w3.org/1999/xlink xsl http://www.w3.org/1999/XSL/Transform xhtml http://www.w3.org/1999/xhtml mathml http://www.w3.org/1998/Math/MathML smil http://www.w3.org/ns/SMIL viewBox 図形の表示範囲．x y width heightの順に記述する． zoomAndPan svg図形がズーム（拡大縮小）・パン（表示範囲の移動）の操作を許すか否か．ブラウザによってはctrl+plusキー，ctrl+minusキーにより図形の拡大・縮小を行えるが，この操作を許すかどうか．余り使わない属性かもしれない． disable 行わない magnify 行う contentScriptType 要素のonXXX属性に記述するスクリプトの言語を指定する． contentStyleType 要素のstyle属性に記述するスタイル指定言語を指定する．text/cssが規定値．滅多に用いることはなく，実際将来的に削除される予定である． baseProfile 言語プロファイルの指定．埋め込みsvgであれば必要ない． none =full full svg(full)

(6)

basic svg basic tiny svg tiny version バージョン1.1．現状1.0，1.1，1.2（svg tiny 1.2）のいずれか．ツールが出力したsvgファイルを区別するために重要な属性．埋め込みsvgなら必要ない？

2.3.1 viewBox による表示範囲の指定

viewBox(x，y，width，height)（単位は無し）属性はsvg 固有のものであり，記述した図形の座標系と表示範囲（ビューポート）を定義するものである．svg 要素の左上の座標を (x,y)，右下の座標を(x+width,y+height)に割り当てる．なお，外部表示サイズと viewBox のサイズとでアスペクト比が異なる場合，後述するpreserveAspectRatio 属性にて描画方法を指定することができる．幅，高さ，viewBox 属性のいずれも設定されていない場合，暗黙的に（0,0,[表示上の幅],[表示上の高さ]）として扱われる． <svg viewBox="-75 -75 300 300"> <title>viewBoxのサンプル1</title>

(7)

<title>viewBoxのサンプル1</title>

<desc>circle要素の属性値が同じ点に注目</desc>

2.3.2 付加情報の挿入

title 要素では画像のタイトルを設定する．この内容はスタンドアロンの svg 文書であればウインドウのタイトルとして利用され，埋め込みsvg 要素であればカーソルを当てた際に表示されツールチップとして表示される6_{．また，図形要素の子とした場合はその図形} のタイトルを表す． desc 要素では画像に対する説明を記述する．また，図形要素の子とした場合はその図形に対する説明を表す．これらの要素はグラフィックのレンダリングには影響を及ぼさないが，スクリーンリーダーや，google 等の検索エンジンからは参照されうる．なお，ソー スコードとしてのコメントは「」で記述する．

2.3.3 svg 要素の中身

svg 要素の中に各種図形を表す要素（例えば path 要素や，rect 要素）を記述していく． html との違いとしては図形の描画順は全て要素が現れた順である．html における z-index7 のような描画順を変更するようなものはなく，先に現れた図形から順に下から上に重ねられていく．スクリプトを記述する際もこの原則に従う必要がある．

2.4 入れ子になった svg 要素

svg 要素は入れ子にして利用することもできる．グラフィックの一部に新たな viewBox を定義して図形を描画したい場合に用いる． 6 実際に表示されるかどうかはブラウザに依存する． 7 svg2 での導入が検討されている．

(8)

2.4.1 グラフィック描画の基準を変更する

html においては css の right や bottom プロパティにより図形の描画を右辺や下辺を基準に行うことができる．通常svg では左上を基準としたグラフィックを描画するが，入れ子の svg 要素を用いると svg においても任意の位置を基準にグラフィックを描くことが可能となる．このテクニックを用いると，ウインドウをリサイズした時に右端や下端に図形が沿うといった動作を実現できる8_． ● 子 svg 要素の x,y 位置を%で指定する． ● overflow 属性に visible を指定する．子svg 要素の viewBox 範囲外の図形の描画を有効とする為の設定． ● 子 svg 要素内部に図形を配置する．この図形は子 svg が生成する座標系を元にスクリーンに描画される． 8 use 要素を用いても良い．use 要素は単体で描画位置を指定する機能を有しているため，入れ子となった svg 要素を用意する手間が省ける．

(9)

</svg>

2.5 補足）svg 文書片とは

svg の表す意味を文章内で明確にする目的で svg 文書片という用語を使う場合がある． これはsvg 要素を頂点としたグラフィック要素ツリーの全体を指し，この定義を使って ここまでの内容をまとめると次のようになる． ● svg 要素は svg 文書片を定める． ● svg 文書とは単一の svg 文書片を頂点とした文書を指す． ● html 文書には svg 文書片を（インライン svg として）含めることができる． ● xml 文書に svg 文書片を含めることができる． ● svg 文書片にはサブ svg 文書片を含めることができる．

(10)

2.6 svg の記述ミスを少なくするために

先にsvg は画像を記述すためのスクリプト言語的な側面があると書いた．本書ではその svg を手入力で構築して行こうというのが主な目的であるため，一般のプログラム言語と同様に記述ミスの危険性を孕む．つまり，1 箇所のタグの記述間違いが致命的な問題を引き起こす場合が多々あるのだ9_． svg は xml で定義されている言語であるから，原則 xml における文法に従わなければならない．しかし普段html に慣れ親しんだユーザーなら次のようなケースにはかなり遭遇してきたはずだ． ● 要素の右とじ部で「/>」の部分を「>」としてしまう． ● 要素の開始部と終了部とで要素名の記述が異なっている． ● 大文字と小文字を混合で記述してしまう． ● 属性の記述がスペースで区切られていない．全てxml においてエラーとなる記述であるにもかかわらず，html の場合は（多少のレイアウトの崩れを生じるものの）何の問題もなくブラウザで表示できてしまう．特に一つ目は<br>要素等，そもそも右閉じ部の「/」を必要としないものもある．だが，同じことをsvg 要素に当てはめてしまうと，意図した図形が全く表示できないと言った問題を引き起こす．ブラウザ側である程度勝手に要素を解釈するというhtml のもつ柔軟性がかえって仇となってしまうのだ．これは単純に見えて非常にやっかいな問題である．というのも，svg は html と比較しても記述が複雑となりがちな面があり，自ずと記述する要素の数・種類共に膨大な量となる．10 人間の作業である以上，ふとしたきっかけで問題のあるコードを記述してしまうのは避けられない．ではその間違いを機械的に判別してくれる機構は無いのだろうか？結論から言うと，ある．主に次の2 つの方法である． 9 その為，出来る事ならツールなどを使いたいところだが，現状 svg の全ての機能を網羅したものは存在しないため，どうしても手作業での編集が必要となる場合がある． 10 実際，非常に長い文書に多数の svg 要素を埋め込むと，管理上非常に不味い問題を引き起こすことがわかった．図形の描画に問題のある svg 要素自体に記述ミスはなく，それ以前の正常に描画されている svg 要素に先程の不具合の原因となるコードが含まれていたというケースに遭遇した．これは，グラフィック描画における問題点の切り出しが非常に困難であることを示している．

(11)

1. スタンドアロンの svg ファイルを利用する． 2. 文書そのものを xhtml で作る．このようにしておいてxml のエラーチェック機構を利用するのである．svg，xhtml は何れもxml で定義されている言語である．よって記述に問題のあるファイルをブラウザで表示しようとするとエラーとなり，問題部分を明示できるのだ．例を示そう．下記に記述したスタンドアロンのsvg コードには一箇所記述ミスがあるのだが，あなたは見つけることが出来るだろうか？ <?xml version="1.0" standalone="no"?>

xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"> <circle id="c" cx="50" cy="50" r="40" fill="red">

</svg> 短いコードではあるが，中々難しかったのではないか？これをブラウザで表示させてみよう．すると次のような結果が得られる． 6 行目の記述に問題があるようなのでその周辺を調べてみると，circle 要素の末尾のスラッシュを記述していないことが判る．このようにsvg 構文の修正が容易となり，問題の原因から構文の記述ミスを除外できる．

2.7 スタンドアロン svg ファイルについて

スタンドアロンのsvg ファイルは，単体でブラウザ表示可能な svg 画像ファイルを指す．この内容をhtml5 文書にそのまま挿入してもほとんどのケースで埋め込み svg 要素として動作する．スタンドアロンのsvg ファイルを作る場合は，テキストエディタで下記のコードをテンプレートとして保存しておくと良いだろう． <?xml version="1.0" standalone="no"?>

(12)

作り方はインラインsvg と全く同じだが，xml に準じた記述を行う必要がある．ここで単体のsvg ファイルとして動作確認をした上で html 文書に img 要素や iframe 要素・object 要素などで画像を埋め込むのだ．文書と画像が完全に分離しているため，コードの健全性を保つと言った面で有効な方法である．複数の文書に分かれることを嫌うなら，html 文書の編集の際に svg 要素単位で svg ファイルに書き出し，もとの文書にコピーする（埋め込む）と言った方法も考えられる．この場合，svg 要素間で id が重複しやすい点に注意する事と共に，絶対に html 文書内で直接 svg 要素を編集してはならない．必ずスタンドアロンのファイルとして動作確認を行おう．

2.8 xhtml における svg 画像の埋め込みについて

xhtml（eXtensible HyperText Markup Language）は html を xml によって再定義したもので， 先のスタンドアロンのsvg ファイルと同様，記述ミスを構文エラーとして扱える．文書全体がxml として扱われるため，これまで正しかった一部の構文が不正なものとして扱われるようになる．よって，既にhtml で運用している文書を xhtml に移行するのは現実的ではない．以下に例を示す． <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink" > <head> <title>サンプル</title> <style><![CDATA[ body{ margin:0; } svg{

border:2px outset black; }

]]></style> </head>

<body>

(13)

<div xmlns="http://www.w3.org/1999/xhtml">あいうえお</div> </foreignObject>

</svg> </body> </html> xhtml5 を利用する場合は，(1)「xml 宣言「<?xml version="1.0" encoding="utf-8"?>」をファイルの先頭に追加する．」(2)「html 要素に xhtml の名前空間「http://www.w3.org/1999/xhtml」を指定する．」(3)「svg，xlink の名前空間を宣言する．」(4)「コード記述を xml に合わせる．」(5)「ファイル拡張子を xhtml として保存する．」とする11_． svg の名前空間の宣言は svg 要素で行うと良い．接頭辞として定義（html 要素において「xmlns:svg="http://www.w3.org /2000/svg"」として宣言）すると，何かと複雑となりがちなsvg 要素の記述が更に煩雑となる点に注意する．foreignObject 要素を用いる際は， xhtml の要素が内部に含まれるため，名前空間の再宣言が必要となるケースがある．

2.9 svg の表示方法についての補足

先に示した6 つの svg の表示方法についてブラウザごとに細かい動作の差異が存在する． A 群 Dynamic Interactive Mode

iframe <iframe src="clock.svg" height="100" width="100" style="border:none;"></iframe>

object <object data="clock.svg" height="100" width="100"</object>

embed <embed src="clock.svg" height="100" width="100"/>

B 群 Animated

Mode

img <img src="clock.svg" height="100" width="100"/>

input

[type=image] <input type="image" src="clock.svg" height="100" width="100"/> background

-image <div style="width:100px;height:100px;background-image:url(clock.svg);_{display:inline-block;background-size:100px 100px"></div>}

● 概ね iframe・object・embed 要素を用いた場合（A 群）と img 要素・ background-image を用いた場合（B 群）の 2 つに分けられる． ● A 群を用いた場合は svg のほぼ全ての機能を利用することができる．外部画像の読み込み，イベント処理，スクリプトの実行などが正しく動作する．埋め込みsvg 要素もこちらに含まれる．この特徴からa 要素によるハイパーリンクの定義を行う場 11 一般的な xhtml5 を利用する際の注意点についてはこちらを参照のこと． http://www.ibm.com/developerworks/jp/xml/library/x-think45/

(14)

合に困るケースがある．詳しくは次の項で示す． ● B 群を用いた場合はスクリプトが動作しない．

単なるsvg 画像として扱われるため，動作感は jpg や png 画像と同様である． ● iframe を用いた場合は，svg 文書に定義された width，height が有効となるため，

iframe のサイズの方が小さい場合にスクロールバーが表示される．

● Firefox において A 群を用いた場合，iframe 要素と object 要素・embed 要素との間でアニメーションがズレるケースがある． ● Firefox において B 群を用いた場合，外部画像の読み込みが行われない． ● opera において background-image に svg を用いた場合，場合により背景表示がずれる． ● opera，chrome において B 群に svg を用いた場合に，複雑な構成のアニメーションが動作しないケースがある．細かい部分まで挙げていくと切りが無いので，要件に合わせて動作確認を行おう．

2.10 svg に対するハイパーリンクの指定

svg 文書を iframe 要素，object 要素，embed 要素で参照した場合，新たにインラインフレームが生成されその中にsvg が表示される．この時，マウスクリックを始めとしたイベントはこのインラインフレーム内部で処理され，親となるhtml 文書にはイベントの通知 がなされない．この動作により，object 要素等を a 要素で囲んでもそのままではハイパーリンクとしては動作しないと言った問題が発生する．例を示す．従ってこれを回避するにはa 要素内の object 要素等に「pointer-events:none」を指定し，インラインフレームに対するカーソルイベントの発生を切り，クリック可能な範囲を揃えるためにa 要素に「display:inline-block」を指定すると良い．

<a href="img.png" style="display:inline-block;"> ここから

style="border:none;display:inline;pointer-events:none;" ></iframe> <object data="clock.svg" type="image/svg+xml" height="100" width="100"

style="pointer-events:none;">svg/object</object>

</a>

すると今度はフレーム内部のsvg でのイベント処理がなされないため，マウスホバーによるsvg 図形に対するスタイルの変更を行うことが出来なくなるなどの弊害もある．この

(15)

ような場合はsvg の a 要素を使って svg 文書そのものにハイパーリンクを挿入する方法もある．この方法であれば，フレーム内部のイベント処理を維持しつつ，ハイパーリンクも正しく動作させることが可能となる．なお，埋め込みsvg であればイベントの伝達は svg 要素と html 要素との間で透過的に行われるため，このような問題は発生しない．

2.11 svg の参照モードについて

先程，同じsvg でもその表示方法により動作が異なることを見た．この動作の違いをブラウザにおけるsvg の参照モード（Referencing Modes）12_と呼び，_{svg の動作要素「スク} リプトの実行」「外部リソースの参照」「アニメーションの実行」「イベントの捕捉」「リンクの実行の有無」により細かく分類されている．ここでA 群の動作は「Dynamic Interactive Mode」と呼ばれる svg のフル機能が動作するもので，B 群の動作は「Animated Mode」（firefox のみ「Secure Animated Mode」）と呼ばれるアニメーション機能のみ有効のモードとなっている．スクリプトの実行外部リソースの参照アニメーションの実行イベントの捕捉リンクの実行

Dynamic Interactive Mode ○ ○ ○ ○ ○

Animated Mode ☓ ○ ○ ☓ ☓

Secure Animated Mode ☓ ☓ ○ ☓ ☓

Static Mode ☓ ○ ☓ ☓ ☓

Secure Static Mode ☓ ☓ ☓ ☓ ☓

だが，この参照モードについては現状仕様が確定しておらず，ブラウザ毎に実装の差として現れてしまっている．特に外部リソースの参照においては，関連するオブジェクトが svg 文書，フォント，画像，スクリプト，スタイルシート等多岐に渡り，クロスドメインでの参照をどう扱うかについて解釈がわかれるところとなっている．特にクロスドメインでの画像の参照はセキュリティに関わる（応用次第で悪用が可能）部分でもあり，ブラウザによっては意図的に不可としている13_{ものもある．何れにせよ単一のファイルであれば} このような問題は発生しないはずなので，ファイルの参照に関わる不具合が出るなら，参照先の内容を（次で示すdata スキーム等を使って）svg 文書の中に埋め込むことができないか検討してみよう．（もちろん，根本的な解決策ではない．） 12 http://dev.w3.org/SVG/modules/integration/SVGIntegration.html 13 https://bugzilla.mozilla.org/show_bug.cgi?id=628747

(16)

埋め込みsvg により簡単な図形を描く分にはそれほど問題は無いだろうが，svg 文書の機能分割を行う際の意外な落とし穴となる可能性があったため掲載した．

2.12 data スキームによる svg の挿入

最近のブラウザではpng 画像を base64 形式14_{でエンコードし}_{data スキーム形式の文字列} とすることで，img 要素などの属性に直接画像データを埋め込むことができる．svg 文書も例外ではなく，しかもテキストベースであることからjavascript を用いることで簡単に data スキーム形式への変換が可能だ．javascript において svg 文書を data スキーム形式に変換する場合は次のようにする． 1. svg 文書を読み込み，encodeURIComponent 関数を用いて URI 形式15_{の文字列に変換} する． 2. 先頭に deta スキームであることと svg 画像であることを示す「data:image/svg+xml,」を付加する．「image/svg+xml」はsvg の mime-type である．例） data:image/svg+xml,%3C %3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20width%3D%22100px %22%20height%3D%22100px%22%20viewBox%3D%220%200%20200%20200%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org %2F2000%2Fsvg%22%20version%3D%221.1%22%3E%0A%09%3Cview%20id%3D%22view1%22%20viewBox%3D %220%200%20100%20100%22%20%2F%3E%0A%09%3Cview%20id%3D%22view2%22%20viewBox%3D %22100%20100%20100%20100%22%20%2F%3E%0A%09%3Ccircle%20cx%3D%2260%22%20cy%3D%2260%22%20r%3D%2250%22%20fill %3D%22red%22%2F%3E%0A%09%3Cpolygon%20points%3D%22100%2C50%2050%2C140%20150%2C140%22%20fill%3D%22yellow %22%2F%3E%0A%09%3Crect%20x%3D%2280%22%20y%3D%22120%22%20width%3D%22100%22%20height%3D%2260%22%20fill%3D %22blue%22%2F%3E%0A%3C%2Fsvg%3E なお同様の処理をencodeURL 関数で行うと，svg における id 参照を表す「#」が残ってしまうので，この文字を「%23」に置換する必要がある．例） data:image/svg+xml,%3C?xml%20version=%221.0 %22%20standalone=%22no%22?%3E%0A%3Csvg%20width=%22100px %22%20height=%22100px%22%20viewBox=%220%200%20200%20200%22%20xmlns=%22http://www.w3.org/2000/svg %22%20version=%221.1%22%3E%0A%3Ccircle%20cx=%2260%22%20cy=%2260%22%20r=%2250%22%20fill=%22red%22/%3E%0A %3Cpolygon%20points=%22100,50%2050,140%20150,140%22%20fill=%22yellow%22/%3E%0A%3Crect%20x=%2280%22%20y= %22120%22%20width=%22100%22%20height=%2260%22%20fill=%22blue%22/%3E%0A%3C/svg%3E

javascript が btoa 関数をサポートするなら base64 形式に変換することもできる．先程の例と接頭辞が若干異なる点に注意する．

14 バイナリ形式のデータを印字可能な文字のみで書き下す形式で，ファイルサイズが元より凡そ 3 割〜4 割程度増加する．

15 Uniform Resource Identifier．インターネット上の所在を表す識別子．それを記述するための書式を指す．

(17)

1. svg 文書を読み込み，btoa 関数を用いて base64 形式の文字列に変換する． 2. 先頭に deta スキームであることと base64 形式でエンコードされた svg 画像であることを示す「data:image/svg+xml;base64,」を付加する．例） data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI /Pjxzdmcgd2lkdGg9IjEwMHB4IiBoZWlnaHQ9IjEwMHB4IiB2aWV3Qm94PSIwIDAgMjAwIDIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3 JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiPgk8dmlldyBpZD0idmlldzEiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiAvPgk8dmlldyBpZD0id mlldzIiIHZpZXdCb3g9IjEwMCAxMDAgMTAwIDEwMCIgLz4JPGNpcmNsZSBjeD0iNjAiIGN5PSI2MCIgcj0iNTAiIGZpbGw9InJlZCIvPgk8 cG9seWdvbiBwb2ludHM9IjEwMCw1MCA1MCwxNDAgMTUwLDE0MCIgZmlsbD0ieWVsbG93Ii8+CTxyZWN0IHg9IjgwIiB5PSIxMjAiIHdpZHR oPSIxMDAiIGhlaWdodD0iNjAiIGZpbGw9ImJsdWUiLz48L3N2Zz4= これらをimg 要素に適用すると，次のようになる．何れにせよdata スキーム文字列に変換する際にはエスケープ処理に伴ってサイズが増大するため，予め描画に影響しないタブ文字や改行等必要のない文字は削除しておくとよい．また，data スキームを利用した svg の表示はブラウザでのサポートが比較的遅れており， filter を含めるような複雑な描画を行う際に正しく動作しないケースがある16_．

2.13 svg 形式ファイルのサイズの縮小について

svg は単純なグラフィックであればそれほど気にならないが，複雑なものとなると次第にファイルサイズが肥大していく特性をもつ．特にドローイングツールで作成したベクタ形式のグラフィックをsvg 形式に変換した場合，元のデータよりもファイルサイズが著しく大きくなるケースがある．これはsvg が xml をベースとしている事に依るもので，数値データを文字列として扱うために起こる．簡単な例を挙げれば，バイナリと文字列とで同じ数値を記述する場合，1byte で表現可能な数値はバイナリで「0〜127」であるのに対し，文字列では「0〜9」しか表現できない．文字列「127」を扱う為には実に 3byte が必要となるのだ．特にドローツールが出力するsvg には，グラフィックの精度を高めるために小数点以下の桁数が非常に長い数値文字列が多数含まれており，その結果ファイルサイズが著しく肥大するのである． 16 chrome に顕著．テキストが文字化けするなどの問題が発生する．

(18)

従って，このグラフィックの精度を犠牲にすることでsvg ファイルのサイズの肥大をある程度抑制することができる．用途にも依るが，ディスプレイに表示するだけであれば小数点以下の値はせいぜい0〜1 桁程度で十分である．画像データとしては細部の情報が失われるため厳密には元の図形と異なる形となってしまうが，それ以上の精度があったとしても，見た目でその誤差を判断することは出来ないはずだ17_{．もちろん，地図データや，} 印刷に直接関わるもの等，精度そのものが重要となるものについてはこの方法をとるのは得策ではない．下記に示すsvgz 形式の利用を検討したい．この他にもsvg にはファイルサイズを削減する為の仕組みがたくさん備わっている．以下に主なものを効果的と思われる順にリストアップしてみよう18_． ● style 要素を使ったスタイルの指定 ● g 要素を使ったスタイルの共通化 ● class 属性を使ったスタイルの共通化 ● グラフィック要素の共有（use 要素，linearGradient 要素…） ● パス文字列の整理（操作の繰り返し，T コマンド，S コマンドの利用） ● 余分な空白文字の削除また，ツールによるsvg の出力結果にはグラフィック描画に直接関わらない様々なメタデータが挿入されていることが多く，これらを削除することによってもsvg のファイルサイズを下げる効果を期待できる．この作業を手で行うのは効率的でないため，下記のようなツールを用いると良いだろう． ● Scour - an SVG scrubber 19 ● SVG Cleaner 20 17 ちなみにこの精度はファイルの変換を行う毎に（浮動小数点の処理に伴い）徐々に失われていくため，ベクタ形式であっても画像データとしては劣化しうる．ラスタ形式におけるブロックノイズと言ったものとは異なり，ベクタ形式ではパス細部の傾き，座標のズレとしてデータが劣化していく．従って一般に画像の拡大・縮小に強いと言われるベクタ形式であっても，不必要な拡大・縮小変換，ファイル形式の変換を行うことは避けたほうが良い． 18 これらの機能を使えば確かにファイルサイズを縮小することは可能だが，やりすぎればコードの可読性やメンテナンス性を損なうこととなるので，要件に応じた適度な利用を心がけたい． 19 http://codedread.com/scour/ 20 http://qt-apps.org/content/show.php?content=147974

(19)

2.14 圧縮形式

svgz について

一般にテキストファイルは，何らかの圧縮操作を施すことでそのファイルサイズを大幅に削減することが出来る．svg においても元がテキストであるため同様のことが言える．このとき画像の編集をする頻度とデバイスに表示する頻度とを考慮すると，ファイルを圧縮したまま表示が可能となっていたほうが使い勝手が良い．そこでsvg 文書を gzip 形式21 で圧縮したものがsvgz 形式として定められている．svg の内容にも依るが，svgz 形式に変 換することでファイルサイズを5〜6 割程度削減することが出来る22_． svg 文書を svgz 形式に変換するには，元となる svg 文書を（tar 等のファイル結合を経ずに直接）gzip 形式で圧縮し，適宜拡張子を「svgz」とするだけである．なおブラウザ23_によっては直接svgz 形式の文書を表示できないものもあるし，web で利用する場合はサーバー側の設定が必要となるケースもある24_．例えば_{web サーバーとして apache2 を利用し} ている場合は，.htaccess ファイルに次の記述を追加することで svgz 形式が使えるようになる25_． AddType image/svg+xml .svg AddType image/svg+xml .svgz AddEncoding gzip .svgz

2.15 ラスタ画像を用いた

svg の生成

今日jpg，png を始めとしたラスタ形式の画像は様々な場面で利用されており，これを元にsvg ファイルを生成して活用したいと言ったケースはよくある．しかし，ラスタ形式からベクタ形式の画像を得るのはそれほど簡単なことではない．というのも，ラスタ形式には目に見える色の他にベクタ形式で重要となる方向と言った情報が存在しないためである．人の手で画像をなぞるのも良いが，ある程度精度を犠牲にしても良いならツールを使って変換する方法もある．ベクタ形式を取り扱うドローイングツールであれば概ねこの処理をサポートしているものと思うが，ここでは無料で利用可能なものを紹介する． 21 zip 形式ではない． 22 base64 形式のラスタ画像データを含んでいた場合はこの限りではない． 23 opera は svgz ファイルを直接表示することが出来る． 24 http コンテンツ圧縮，Content-Type をキーワードに調べてみると良い． 25 .htaccess 自体が無効となっている環境もあるので場合によっては管理者に確認してみよう．

(20)

● potrace26 gpl ソフトウェアであり，単色の bmp 形式のファイルをベクタ化するのに適している．cui ソフトウェアであり取っ付きにくいものの，幅広い環境をサポートしているのが魅力だ．出力されるsvg のバージョンは 1.0 だが，実用上問題はない． ● inkscape メニュー「パス」→「ビットマップをトレース」の項目からベクタ化処理を行うことが可能だ．こちらではカラーでのトレースが行えるなど，非常に高機能だ．

2.16 html の meta 要素の代替

svg と html とを比較した際，meta 要素が存在しないことが挙げられる．html ではこの要素によって様々な処理を行うことも出来たが，svg においては別の手法を用いる必要がある．

2.16.1 キャラクタセットの指定

html では meta 要素によるキャラクタセットの指定が可能だったが，svg においては xml 宣言において行う．

2.16.2 検索エンジンへの対応

検索エンジン最大手google では html 文書の他に svg 文書のインデックス化も行なっている．従ってインターネットに公開されたsvg 文書や画像は何も対処しない限りクローラの検索対象となりうる．その際，html ではインデックス作業の対象外とする meta 要素の記述方法が存在したが，svg ではこれとは別の対策を施す必要がある．例えば google では x-robots-tag27_{によるクローラの制御機構を提供している．この機構は}_{svg に限らず一般的} なファイル形式に適用可能であり，http ヘッダーの内容を元にインデックス化の有無を判断する．なおこの機構を利用するにはweb サーバー側の設定が必要となるため，詳しくは専門の解説書を参考として欲しい． 26 http://potrace.sourceforge.net/ なお potrace は様々な環境に移植されているので，色々と試してみると良い． 27 http://googlewebmastercentral.blogspot.jp/2010/08/google-now-indexes-svg.html

(21)

2.16.3 キャッシュの制御

html ではファイルのキャッシュ期間を meta 要素で指定できたが，svg では一般の画像と同様にweb サーバー側で行う必要がある．

2.17 html の base 要素とインライン svg

html 文書に url 文字列を挿入する際，base 要素を使うことで相対パス指定時の基準となるurl 位置を指定することができる．この設定は a 要素のリンク先（href 属性）だけでなく，img 要素の src 属性や object 要素の data 属性にも適用されるが，ではインライン svg においてはどうであろうか？

結論から言うと必ずしも適用されるとは限らない．image 要素の xlink:href 属性についてはfirefox 及び chrome では base 要素の内容を加味した結果となるものの，opera ではそのようにはならずhtml ファイルを基準としたパスの解釈となる．従って，インライン svg を base 要素と組み合わせて用いたい場合は，例外パターンが存在する点に注意し，適宜絶対パスに依るurl の指定を行う必要がある．

2.18 svg のフォールバック手法

html においては web ページに対するアクセシビリティを確保する目的で，環境によって動作するとは限らない要素（canvas 要素や audio 要素等）についてフォールバック（代替）コンテンツを定義しておく事が望ましい．ie や android os においては svg の描画に対応していないものの，sie や canvg 等の javascript ライブラリを導入し，擬似的に svg を描画する方法がある．が，そこまでせずともラスタ画像の表示に振り替えるといったもので十分な場合も多い．以下その方法について考えてみよう． ● foreignObject 要素を用いる svg には内部に html 要素を挿入する機構が備わっているが，これが svg 非対応のブラウザにおいて無視される事を利用するもの．詳しくはforeignObject 要素で述べる． ● object 要素を用いる object 要素を使って svg を表示している場合は，object 要素の持つフォールバック機構をそのまま利用すればよい． ● background-image を重ねる

(22)

background-image に svg 画像を読み込んでいる場合，svg 画像の下に代替となる png 等の画像を挿入しておく方法．複数背景に対応しないie8 以前の環境では使えない．画像に透過部が存在する場合に粗が目立ちやすい他，本来必要のないファイルを読み込むこととなる点に注意が必要だ． ● javascript を用いる詳しくはスクリプトの項で解説するが，SVGSVGElement の実装状況をみて画像の参照先を切り替えるもの．javascript が有効でないと動作しないという欠点がある．なお専用のライブラリも存在しているので，適宜調べてみると良い． ● 条件付きコメントを用いる ie 限定となるものの，条件付きコメントを使ってスタイルシートを切り替えてしまう方法． ● サーバーサイドでユーザーエージェントを判別するサーバー側で動的に結果を振り分ける方法．既に同様の機構を実装しているなら， svg と png 画像とを振り分けるのはそれほど難しくないはずだ．その他にも対処策は考えられるが，svg の利用形態により有効な対処策が変わるため，注意深く動作検証する事をおすすめする．

svg の 基 本 的 な 使 い 方 svg 文 書 の 根 幹 となる svg 要 素, 図 形 のグループ 化 を 行 う g 要 素,svg におけるモ ジュール 化 を 表 す defs 要 素, 図 形 を 参 照 する use 要 素,ハイパーリンクを 表 す a 要 素 等. 図 形

2章

svg 要素と svg 文書

2.1 序・svg の構成

2.2 svg:ベクタ画像のカンバスの定義

2.2.1

インラインでの

svg の表示

2.3 svg 要素の属性

2.3.1

viewBox による表示範囲の指定

2.3.2

付加情報の挿入

2.3.3

svg 要素の中身

2.4 入れ子になった svg 要素

2.4.1

グラフィック描画の基準を変更する

2.5 補足）svg 文書片とは

2.6 svg の記述ミスを少なくするために

2.7 スタンドアロン svg ファイルについて

2.8 xhtml における svg 画像の埋め込みについて

2.9 svg の表示方法についての補足

2.10

svg に対するハイパーリンクの指定

2.11

svg の参照モードについて

2.12

data スキームによる svg の挿入

2.13

svg 形式ファイルのサイズの縮小について

2.14

圧縮形式

svgz について

2.15

ラスタ画像を用いた

svg の生成

2.16

html の meta 要素の代替

2.16.1

キャラクタセットの指定

2.16.2

検索エンジンへの対応

2.16.3

キャッシュの制御

2.17

html の base 要素とインライン svg

2.18

svg のフォールバック手法

svg の基本的な使い方 svg 文書の根幹となる svg 要素, 図形のグループ化を行う g 要素,svg におけるモジュール化を表す defs 要素, 図形を参照する use 要素,ハイパーリンクを表す a 要素等. 図形

_{svg の表示}