第4回 Webに最適化された拡張性の高いベクター画像「SVG」
ネイティブサポートされているSVG
SVG（Scalable Vector Graphic）はXMLで記述されたW3Cがオープン標準として勧告している画像形式だ。JPGやPNGのような拡大・縮小するとドット落ちしてしまうビットマップ画像とは異なり、XMLに座標値をはじめとしたデータを保管するベクター画像なので、さまざまな解像度にも柔軟に対応できる。表示される画像がすべてデータ化されているので、画像の中にあるデータや文字を検索できるのもSVGのメリットだ。また、メタデータを埋め込め、より詳細な画像検索が可能になると言われる。SVGは単なるベクター画像形式ではなく、SVG内にビットマップ画像とベクターで描写された文字を重ね合わせたり、JavaScriptからSVGをコントロールして、よりインタラクティブな画像にすることが可能だ。「Google Maps」（maps.google.com/）では経路を示す線ですでにSVGを利用している。
W3CがSVG 1.0を勧告したのが 2001年で名前は長く知られている画像形式だが、注目を集め始めたのはここ数年だ。Adobe社の「SVG Viewer」（www.adobe.com/jp/svg/）をはじめ、プラグインをWebブラウザに導入することでSVGを観覧できたのだが、広く普及しなかった理由のひとつとにプラグインを必要とする敷居の高さがある。しかし、Firefox、Opera、WebKit（Safari、iPhone、Google Chrome）と次々とブラウザがSVGをネイティブサポートするようになり、GoogleなどさまざまなサイトでSVGが利用され始めている。Internet Explorer（以下、IE）は現在もSVGをサポートしておらずプラグインが必要だが、次期バージョンのIE 9では、SVGをネイティブサポートすると発表している。将来は JPGやPNGと同様にSVGを利用する機会が増えてくるだろう。
Webアプリケーション開発に新たな可能性を
拡大・縮小が可能な画像やグラフの描写に長けているSVGだが、真の活躍の場はWebアプリケーション開発と言われている。現状、Webアプリケーション開発はHTML・CSS・Java Scriptを利用したものが主流だが、HTMLはコンテンツに意味を持たせるための言語で、アプリケーションを描写しブラウザ上に表示させることに長けていない。情報構造と見た目をHTMLとCSSで分担したように、扱う情報を得意とする言語に任せることで開発効率が上がり新たな表現も模索できる。こうした問題を解決する方法としてAdobe社はFlex、Microsoft社はSilverlightを提供しているが、いずれも各企業の独自形式だけでなくHTMLとの親和性も低いので、セマンティックWebを考慮したデータの相互関係を実現することは難しい。
インターフェイスが単なる装飾でなく、表示されるデータや利用者の操作による変化を可能にするのがSVGだ。XHTMLとSVGは共にXMLベースの規格なので、それぞれのメリットを生かしつつ共存もしやすい。SVGに表示しているテキストをCSSで装飾したり、JavaScriptを使って動かすことも可能なので、まったく新しい開発プロセスを導入する必要もない。
制作ソフトの発展に期待
画像は画像として扱っていた従来に対し、ブラウザに表示されるデータと通信できるSVGは、今後さまざまな可能性を示すだろう。勧告後10年にしてようやく存在感が出てきたが、課題は少なくない。今後多くの開発者・デザイナーがSVGを採用するかは、制作ソフトがどれだけ登場するかにかかってくる。IllustratorはSVGへ書き出す機能を実装しており、「Sketsa」（www.kiyut.com/products/sketsa/）のようにSVGを制作する専用ソフトも出てきている。しかし、前者の書き出すSVGは余分なコードが多く汎用性が低い。SketsaはXMLエディタも実装しておりSVG内のオブジェクトの定義もできるが、Illustratorのような高い表現を実現するのは難しい。SVGという特性上、高い表現を実現するだけでなく、開発陣との円滑や情報のやりとりができるインターフェイスが必要になるだろう。
XMLというシンプルな文書構造を持っているが、SVGはFlashで同等の画像を作成した際と比べるとファイルサイズが大きくなることがある。また、SVGでも表現豊かなアニメーションは可能だが、Flashに比べるとスムーズな再生は行えない。だが、SVGは場合によってはFlashなどほかの技術に比べて優れている点もある。表示されるWebサイトがどのような環境でどのように使えるかを考慮することで、SVGの特性を生かせる場所が見つかるだろう。Webアクセシビリティをふまえたサイトの構築であったり、他のアプリケーションなどとの連携を考えるのであればSVGは最適だ。長くスポットライトから遠ざかっていたSVGだが、ブラウザサポートが充実してきた今だからこそ導入を検討していきたい。
SVGに関する詳しい仕様や最新動向が知りたい人は
「W3C」の公式サイトを参照してほしい（www.w3.org/Graphics/SVG/）
オンラインで表現豊かなプレゼンテーションの作成を実現している
「280 Slides」（280slides.com/）はSVGを利用している
マウスによる操作やリアルタイムでのデータを更新などアプリケーションのような
動作をSVGで実現（research.sun.com/projects/lively/）
Profile 長谷川恭久
デザインやコンサルティングを通じてWeb関連の仕事に携わる活動家。ブログやポッドキャスト、雑誌などを通じて情報配信中。
URL： www.yasuhisa.com/
本記事は『web creators』2009年5月号（vol.90）からの転載です。
