SVGとは

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

もっと詳しく！

歴　史

SVGはW3C (World Wide Web Consortium)が策定した仕様である。2001年9月にV1.0が勧告となり、2003年1月にV1.1となった。その後、2011年8月に V1.1第2版となっている。SVGの仕様が決まった当初は、携帯電話などでSVGを扱うには重すぎたため、SVG BasicやSVG Tinyというモバイル用の仕様が策定された。しかし、その後、スマホなど携帯端末でフルブラウザが使えるようになり、モバイルSVG仕様の必要性はなくなった。 SVG 1.1の第2版はSVG Tinyの仕様を逆にSVG V1.1本体に反映するなどで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フォントを使える環境はほとんどない。
・SVG はSMIL (Synchronized Multimedia Integration Language)を使って動画および静止画をメディア部品として利用できる。
・CSSスタイルシートでスタイル付けできる。多くのプロパティをCSSと共有しているが、SVG独自のプロパティも定義されている。

SVG画像の作り方

簡単な線画であれば、テキストエディタでSVGマークアップを編集したり、プログラムにより作成できる。しかし、複雑な画像は Adobe Illustratorなどの図形編集ソフトで作成し、SVG形式で保存するのが普通である。また、InkscapeのようなオープンソースのSVG編集ソフトもある。PDFの中から指定した範囲をSVGファイルとして切り出すことも可能である。

EPUBでの利用

EPUB3の仕様では、SVG形式の画像ファイルをひとつのコンテンツ文書としてHTMLと並列に指定することもできるし、HTMLの内部にSVGで記述した画像を含めることもできる。SVG画像をコンテンツ文書として使うのはコミックなどのページ指定が想定されている。但し、SVGはすべてのEPUBリーダーで表示できるわけではなく、商業書籍では電子取次段階で問題になる可能性もあるようだ。

EPUB3では、科学技術系の論文や書籍の数式は、MathMLで表現するのが望ましい。しかし、EPUBリーダーでMathMLを可視化できるものは比較的少ない。さらに、論文の著者により数式の書き方が多様なので、数式をすべてMathMLにするよりもPDFにしてからSVGを切り出す方が手軽である。こうしたことからEPUB中の数式はSVGで表すのが現実的だろう。例えば、電子情報通信学会では、現在、会員向けの会誌について、毎号すべての記事をEPUBとして配信するトライアルを行っているが、論文中の数式はSVGで表わされている。

 ［小林　徳滋　アンテナハウス株式会社　20151015］