Web制作でSVGが役立つ3つのシーン
前に解説したとおり、SVGはラスター画像の画像フォーマットとは異なる性質を持っています。この性質をWeb制作のさまざまな場面で活かせます。
レスポンシブWebデザイン
SVGは拡大・縮小に強いで、レスポンシブWebデザインで有効です。ロゴ画像や、図版に使えば、1つの画像ファイルでスマートフォンからPCまで対応できます。
マルチデバイス対応
「拡大・縮小に強い」性質に似ていますが、SVGはベクター画像なので1ピクセル未満を表現できます。そのため、iPhoneのRetinaディスプレイなど、高ピクセル密度画面のデバイスでもきれいにぼけずに表示できます。デバイスのピクセル密度の違いを気にすることなく利用できるのは、大きなメリットでしょう。
UIやインタラクションの作成
「マークアップ言語である」特徴を活かし、HTMLにSVGを融合させると、地図や折れ線グラフ、円グラフといった、HTMLだけではできない、斜めや曲線の表現ができます。また、JavaScriptでアニメーションさせることで、インタラクションな表現を導入できます。
SVGが苦手なこと
SVGにはさまざまな使い道があるとはいえ、もちろん万能なわけではありません。たとえば、写真や手書きイラストなど、色や形状が複雑な画像は、点や線の集まりで表現しきれないため、SVGには向きません。こういった表現には従来どおり、JPEGやPNGを利用するべきでしょう。
また、SVGはHTMLのようにDOMを構築するため、ゲームのように画面内全部を動かす負荷の高いアニメーションも苦手です。
SVGの得意とするところとそうでないところは、この連載を進めていく上で少しずつ触れていきましょう。
SVGはもう使える技術
古くからWeb制作をしている人には、「SVGは実務に使えない」との印象があるかもしれません。SVGは2001年に正式な仕様としてリリースされたにも関わらず、長い間注目を浴びることはありませんでした。Internet ExplorerがSVGをサポートしておらず、HTMLと組み合わせづらかったなどの理由からです。
しかし、その後のブラウザーの進化やデバイスの多様化、HTML5の登場を背景に、SVGは一気にメジャーな技術へと再注目されました。SVGは現在、多くのブラウザーでサポートされています。
| IE | 9以降 |
|---|---|
| Firefox | 対応 |
| Chrome | 対応 |
| Safari | 対応 |
| iOS Safari | 対応 |
| Android | 3以降 |
IE8以前やAndroid 2.x系ではサポートされていませんが、IE8のサポートは2016年1月12日に実質終了することがマイクロソフトから告知されています。また、Android 2.x系のシェアも現在では気にしないでいいレベルまで減っています。遅くとも2016年の春までには、ブラウザーの対応状況を気にせず、Web制作の現場でSVGを積極的に利用できるようになるでしょう。
また、HTML5の登場もSVGが再注目された理由の1つです。HTML5はSVGと相性がよく、双方のタグを混在させてWebページを作れます。
◆
次回は、SVGの作り方や、HTMLとSVGの混在の方法など技術的な基本知識を紹介します。
HTMLマニアが喜ぶSVG 昔話
SVGには興味深い昔話があります。興味深いと言っても、この手の昔話はHTMLマニアにしか喜ばれないでしょうから、歴史に興味がない方は読み飛ばしてください。
SVGの仕様は2001年9月5日に誕生していますが、実はそれよりもさらに昔から「ベクター画像マークアップ言語」が存在していたのをご存知でしょうか？ PGMLやVML、HGMLなどのいくつかの似た言語が存在し、それらのうちの5つが元になって現在のSVGが生まれた経緯があります。
例えば、SVGの元となった言語うちの1つに「PGML」があります。PGMLはアドビが1998年4月10日に提案した言語です。現在のSVGにもよく似た、ベクター画像マークアップ言語でした。当時、アドビもベクター画像マークアップ言語がとても重要であると考えており、積極的に推していたようです。PGMLがメジャーな仕様となった暁にはPDFやIllustratorとの連携も予定していたようですが、その座はSVGとなり、現在、IllustratorはSVGを強力にサポートしています。
参考:
Precision Graphics Markup Language (PGML)
PGML Q&A
また、一方でマイクロソフトも「VML」というベクター画像マークアップ言語を1998年5月13日に提案し、同年11月にリリースされたIE5.0に実装しました。現在のようにSVGが注目されるはるか昔に、IEはベクター画像マークアップ言語をサポートしていたわけですね。また、マイクロソフトは Officeでもシェイプやグラフを表示するためにVMLを使っていました。ただ、IE9でSVGがサポートされ、VMLはメジャーになることなく、IE10で実装が削除されました。
参考:
Vector Markup Language (VML)
VML がサポートされなくなった
いずれの場合においても、「ベクター画像マークアップ言語」がはるか昔から、テクノロジーの基礎としてとても注目されており、その結果として現在のSVGが生まれたという背景がとても興味深いですね。
