SVG の進歩

本記事は、マイクロソフト本社の IE チームのブログから記事を抜粋し、翻訳したものです。
なお、本記事中の Internet Explorer 9 は、元記事執筆当時の Platform Preview ( 正式リリース以前の) について記載しておりますのでご了承ください。

【元記事】More on SVG (2010/8/27 3:00 PM)

最初の IE9 Platform Preview で、IE9 における SVG のサポートが初めて明らかになりました。以前に説明したとおり、SVG は W3C によって管理されるベクター イメージ形式です。3 回目と 4 回目の IE9 Platform Preview のリリースでは、SVG の機能が全面的に提供されるようになりました。主な追加機能には、SVG グラデーション、パターン、クリッピング、およびマスキングがあります。これらの機能は、奥行きとテクスチャを使ってのイメージの作成に使用されることが多く、通常は比較的複雑な SVG ファイルで使用されます。IE9 での他の SVG 機能と同様、これらの新しく追加された機能も完全にハードウェア アクセラレートされます。これにより、特にクリッピングやマスキングなど、複雑な計算を伴う機能のパフォーマンスは大幅に向上します。私たちは、引き続き SVG 作業グループと協力 (英語) しながら、SVG 1.1 (第 2 版) 仕様のあいまいさを解消し、IE9 の SVG 実装において相互運用性が保証されるように努力していきます。

SVG の 9 つの利点

SVG にはさまざまな利点があります。SVG は、きわめて柔軟かつ強力な形式であり、幅広い用途に適しています。以下に、HTML5 の Web において SVG がどのように重要な役割を果たすのかを説明します。

1. 拡大縮小機能

Scalable Vector Graphics という名前からも明らかですが、SVG の特徴として目立つのは拡大縮小が可能なことです。このため SVG は、全体像もその詳細も同じように重要であるグラフィック (地図、図表、グラフなど) に最適な形式です。SVG の場合、グラフィックの再現性がすべての解像度で維持されます。一度作成した会社のロゴや Web サイトのアイコンは、さまざまな場所やサイズで何度でも使用することができます。同じイメージを解像度を変えて保存し、用途に合わせて毎回調整する必要はありません。地図は、多くの場合、広い範囲を全体的に表示できることと同時に、狭い範囲を細部まで表示できることが必要とされます。現在、地図の一般的な形式は PDF ファイルです。PDF 形式では、地図をさまざまなサイズに拡大縮小したり、画質を維持しながらさまざまな解像度で印刷したりすることが簡単です。また、ドキュメント内を検索する機能も備わっています。SVG では、このような優れた機能がすべてネイティブでサポートされます。プラグインは不要です。さまざまな地区に簡単に移動できるように、同じドキュメントについていくつかのビューを事前に定義しておくこともできます。

2. スクリプト機能

SVG はリッチな DOM によってサポートされるため、JavaScript によるスクリプト化や操作が容易です。SVG の図形はグラフィック オブジェクトですが HTML 要素と同じなので、SVG を操作するスクリプトには Web 開発者が既によく知っている一般的なパターンが使用されます。SVG 要素は、イベント ハンドラーを利用することができ、DOM または DOM L2 Core の setAttribute() および getAttribute() メソッドを使用して変更することができます。要素の位置から、色、形まで、SVG 要素を記述するすべての属性を変更することができます。イベント処理とスクリプトを使用して対話型 SVG を作成する方法の例を次に示します。

お使いのブラウザーまたはビューアーでは、SVG を含む XHTML はサポートされていません。この記事のサンプルを使用するには IE9 など別のブラウザーで表示する必要があります。IE9 Platform Preview を入手してください。

スクリプト:

 var colors = ["orange", "black", "yellow", "red", "blue", "fuchsia"]; var curColor = 0; function alternateColor() { var circle = document.getElementById("myCircle"); curColor = (curColor + 1) % colors.length; circle.setAttribute("fill", colors[curColor]); circle.setAttribute("stroke", colors[curColor]); }

SVG:

 <svg xmlns="http://www.w3.org/2000/svg" height="150" width="150"> <circle onclick="alternateColor();" cx="75" cy="75" r="50" fill="orange" stroke="orange" stroke-opacity=".5" stroke-width="10" id="myCircle"/> </svg>

3. スタイル機能

SVG を Web ページに含める方法はいくつかあります。<embed>、<object>、<iframe>、<img> タグは、SVG ファイルを参照できます。CSS を使用すると、SVG を background-image または list-style-image として含めることができます。SVG を実際に同一のページ内に組み込むには、XHTML または HTML5 でインラインで含めます。別個の SVG ドキュメントでも、インライン SVG でも、Web ページに完全に統合されるという特徴は同じです。SVG も他の HTML 要素と同じように扱われるので、ページ全体のスタイルを設定するものと同じ CSS ブロックを使用してスタイルが設定されます。アイコン、ロゴ、ナビゲーション UI などの各種 SVG グラフィックを含む Web サイト全体に対して、スタイル シートだけでスキンを適用することができます。また、SVG イメージに印刷スタイル シートを適用して、紙面に印刷されるイメージを細かく制御することもできます。次の例を見てください。SVG をサポートするブラウザーを使用している場合は、スタイル シートを切り替えて SVG イメージがどのように変わるかを確認してみましょう。単純なスタイル シートの変更だけでイメージのスタイルが変わります。

4. 検索機能

SVG は XML に基づいた形式であり、人間が読める要素と属性で構成されています。SVG ファイル内のテキストは、マークアップ内でテキストとして現れます。XML 形式ではドキュメント内のテキストを検索できますが、従来からよく使われている GIF や PNG のイメージ形式ではこれはできません。開発者にとって、テキストベース形式とは、SVG イメージ内のテキストが検索エンジンに公開されることを意味します。このようなテキスト情報があれば、Web サイトにいっそうわかりやすい索引付けをして、適切な人々から見つけてもらうことができます。たとえば、フロー チャートは、Web 作成者が各パネルを文字表記に直さなくても、検索エンジンによって検索されます。

5. ユーザー補助

SVG の検索可能な側面に加えて、テキストベース形式のもう 1 つの利点はユーザー補助です。ラスター イメージでは、タイトルや説明などすべてを含むテキストを 1 つ適用することしかできませんが、あらゆる SVG 要素には <title> 要素と <description> 要素を適用することができます。Web 作成者は、ドキュメント全体以外に、個々のコンポーネントに対しても説明を記述し、詳細でわかりやすい説明を提供する場合があります。SVG ドキュメントはこのための構造を備えており、そのドキュメントの内容をより明確に理解させることができます。また、"focusable" 属性 (英語) を追加することにより、SVG の特定の部分を Tab キーで移動できるようにすることも簡単です。

6. 装飾テキスト

SVG の使用は、画像を多用する Web サイトに限定されるわけではありません。HTML5 または XHTML ファイルのあらゆるところで使用することができます。たとえば、タイトルなどのテキストに装飾を施す場合にも最適です。SVG テキストは、HTML テキストより多くの方法でスタイルを設定できます。SVG テキストでは、グラデーションおよびパターンを使用できます。また、HTML テキストとは異なり、縁取りのスタイルを詳細に制御することもできます。SVG テキストは、ラスター イメージよりも柔軟な編集が可能です。CSS ブロックと併用すれば、従来の HTML テキストによるタイトルと同じように、ドキュメントの随所に表示されるテキストの外観を一定に揃えることもできます。また、IE9 の WOFF サポートにより、ページの任意の場所で使用されているものと同じ WOFF フォントを適用することもできます。SVG テキストは、回転させたり、カスタム パスに沿って配置できます。つまり、SVG テキストの活用により、Web ページ上のテキストは柔軟性や創造性に富んだものとなります。次の例を実行して、テキストの装飾がどれだけ簡単であるか確認してください。

7. データドリブン SVG、サーバーが生成する SVG

SVG は XML 仕様の 1 つなので、サーバーで生成するイメージの形式として適しています。サーバー生成 XML は、RSS や Atom フィードを始めとして広く使用されています。多くの場合、地図、グラフ、図表は、格納されているデータから生成されて描画されます。SVG は、既にこのようなドキュメントの有力候補となっています。XML は生成が簡単なので、このような情報イメージを作成する際の魅力的な形式として大きな注目を浴びています。

8. シームレスな閲覧エクスペリエンス

SVG の特徴の 1 つとして、ブラウザーがネイティブにサポートするという点があります。これは、別のサード パーティのプラグイン (Flash や Silverlight など) を使う場合に比べていくつかのメリットがあります。Web 上で SVG を閲覧するために、ユーザーはアドオンをインストールする必要がありません。サポートが組み込まれているということは、ユーザーにとって便利であるだけでなく、アドオンの脆弱性の可能性を心配しなくてもよいということでもあります。SVG は、IE9 ではハードウェア アクセラレートされるため、ユーザーはスムーズな対話型の表示エクスペリエンスを得られます。また、SVG はページ マークアップ、DOM、およびスクリプトと高度に統合されており、一貫したプログラミング モデルおよび優れたユーザー エクスペリエンスを実現します。

IE9 での SVG は、多くのケースにおいて従来のイメージと同様に扱われるので、ユーザーが想定する動作が実現されます。SVG は、PNG や BMP などのラスター イメージ形式として保存できます。Word ドキュメントや Powerpoint プレゼンテーションにはラスタライズしたバージョンをコピーして貼り付けることができます。つまり、現在の Web に存在している PNG、JPEG、GIF などと変わりません。また、デスクトップの背景として設定できます。印刷も、単純にイメージを印刷する場合と同じです。ブラウザーで SVG の利点を活用することもできます。もちろん、SVG 形式として保存できます。また、Inkscape にコピーして貼り付けると、SVG として編集できます。SVG テキストは検索可能です。SVG がネイティブ サポートされていることにより、閲覧に関して一貫したユーザー エクスペリエンスが容易に実現されます。

9. 使い慣れている、ソースを表示できる

SVG は XML の拡張なので、SVG について学習するということは、多くの開発者が既に習得している XML/HTML の知識の応用に過ぎません。多くの開発者は、優れた Web サイトでブラウザーの「ソースの表示」機能を使用することによって HTML を学習しました。SVG でも同じ方法を使用できます。SVG ファイルまたはインライン SVG を含む HTML5 ファイルで「ソースの表示」を使用して、SVG グラフィックがどのように作成されているかを確認、学習、理解することができます。SVG 要素は、IE9 のデバッグ ツールで扱うことができます。このように、SVG は簡単に習得できる Web テクノロジです。

さらに、Visio や Adobe Illustrator などの広く使用されているツールでは、既に SVG ファイルを出力できるようになっています。Inkscape も SVG を作成するための優れたツールです。このツールは SVG だけを出力形式としており、無償でダウンロードできます。Web 上での SVG の使用も当然の流れとして普及することでしょう。

今後のステップ

Web サイトで SVG を採用する場合は、SVG をサポートしないブラウザーに代替動作を提供することを検討してください。それぞれの状況に合わせて、SVG に代わるテキスト、画像、または両者の組み合わせを使用することをお勧めします。表示する形式を判断するには、ブラウザー検出ではなく、機能検出を使用してください。SVG には、さまざまなモジュールに対する SVG サポートを表す一連の機能文字列 (英語) が備わっています。try-catch ステートメントと hasFeature() メソッドを使用することにより、ブラウザーが SVG をサポートしているかどうかを判断できます。例を次に示します。

 try { if (document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Structure", "1.1")) { // display SVG } else { //fallback behavior } } catch(e) { // fallback behavior }

また、別の .SVG ファイルとしてページに SVG を埋め込む場合は、次のように <object> タグ内に代替動作を設定できます。

<object data="vectorPanda.svg" type="image/svg+xml"><img src="pandaFallbackImage.png"></object>

Web サイトの HTML5 ページで SVG を使用している場合は、その HTML5 のページが適切なドキュメント モード (英語) で読み込まれるように、ページに適切な DocType を必ず指定するようにします。DocType が指定されていないと、IE9 は Quirks (互換) モードでページを表示するため、美しい SVG コンテンツを作成してもそれが表示されません。HTML5 の DocType を指定するには、Web ページのマークアップの先頭行に <!DOCTYPE html> を挿入するだけです。

SVG を XHTML 内で使用する場合も、直接 SVG として使用する場合も、Web サーバーが適切な MIME タイプを指定していることを確認してください。
                XHTML = application/xhtml+xml
                SVG = image/svg+xml

Platform Preview で SVG を試し、サイトがどのように進化するかを確認してください。良いアイデアがあればぜひお寄せください。お待ちしております。

Jennifer Yu
プログラム マネージャー