SVG(草稿)

最終版: SVGとは

SVG (Scalable Vector Graphics)は、XMLを応用したマークアップにより、2次元画像を線画で表す(ベクトル画像という)形式である。ベクトル画像とラスター画像の混在も記述できる。単独の画像ファイルとして扱ったり、HTML5の中に直接記述したり、他のXML言語の中に埋め込んで使える。Javascriptなどによるプログラムを組込んで対話的な文書やアニメーションを表現できる。

歴史
SVGはW3C (World Wide Web Consortium)が策定したものである。2001年9月にV1.0が勧告となり、2003年1月にV1.1となった。その後、2011年8月にV1.1第2版となっている。V1.1第2版までに長い年月が経過した。SVGは初期の携帯電話で扱うには仕様が重すぎたため、SVG BasicやSVG Tinyというモバイル用の仕様が策定された。しかし、その後、携帯端末でもフルブラウザが使える時代となりモバイルSVG仕様の必要性はなくなった。SVG 1.1の第2版はSVG Tinyの仕様が逆に本体仕様に反映されるなど、V1.1からかなり大幅な変更が加えられている。現在は、HTML5やCSS3と整合性のよいSVG 2.0の仕様開発がすすめられている。

ブラウザサポート
現在、SVGはGoogle Chrome、FireFox、Internet Explorer (IE)、 Microsoft Edgeなどの主要なブラウザで表示できる。しかし、当初マイクロソフトはVML (Vector Markup Language)という独自のベクトル画像形式を提案し、IEはVMLを採用していた。IEがSVG 1.1第2版を実装したのはIE9からである。そして、IE10ではVML機能が削除された。このようにして、長い時間がかかったが、現在、SVGはWebの標準画像形式の一つとなった。

HTML4までは、SVGは外部の画像として用意したり、object要素を利用してSVGで記述した画像を埋め込んだ。HTML5ではbody要素の内部にsvg要素を直接記述できる(インラインSVGという)ので、SVGによる線画マークアップをHTML5に張り付けることができる。またブラウザのJavascriptで簡単にSVGのコンテンツを操作できる。

特徴
・svg要素の内部に画像を記述する。svg要素は入れ子になってもよいので画像を断片として再利用できる。グループ化したり、コンテナに入れたりできる。
・線画は汎用のパスで表すが、線、多角形、円・楕円、などの基本図形を表すタグと属性が定義されている。
・フィルターを記述できるので、ぼかし、影付けや照明などの効果を指定できる。
・文字は文字コードを保持するテキスト列として表せる。但し、テキスト列内で自動改行やワードラップしないので、SVGの作成時に行毎にマークアップする必要がある。
・文字の形や位置がずれないようにするため、Webフォントを使ったり、SVG独自のフォント記述(SVGフォント)ができる。
・SVG はSMIL (Synchronized Multimedia Integration Language)を使って動画および静止画をメディアの部品として利用できる
・CSSスタイルシートでスタイル付けできる。多くのプロパティをCSSと共有しているが、SVG独自のプロパティも定義されている。

作り方
簡単なものはSVGのマークアップをテキストエディタで編集したりプログラムで作成することができる。複雑な画像はIllustratorなどで編集してSVG形式で保存して作成するのが普通である。また、Inkscapeのような無償のSVG編集ソフトもある。

EPUB
EPUB3ではSVGの画像ファイルをコンテンツ文書として指定することもできるし、HTML5の内部にSVGで記述した画像を含めることもできる。