SVG in IE9 Roadmap

Article
04/13/2010

我々の標準技術と相互運用に対する約束の一部として、我々は W3C’s Scalable Vector Graphics (SVG) 1.1 (Second Edition) Specification をまずサポートする Internet Explorer 9 Platform Preview を提供できることをとても嬉しく思っています。第2版の SVG の仕様には、W3C-Recommended first edition SVG 1.1 specification を含みます。我々は SVG を良いユーザーと開発者のエクスペリエンスに支えられており、Web において欠くことのできない部分であると思っています。 SVG はラスターイメージを超える多くの優位な点があります。我々のハードウェア支援のグラフィックスを用いることで、リッチでインタラクティブな graphics-driven web (グラフィックスによって動く web) の機は熟します。

SVG はパワフルな新しい web アプリケーションを実現します。フォーマットはベクターベースのイメージを作り出す独特の XML を使います。このことが SVG を他の画像フォーマットよりも簡単に読み取れ、また手作業で簡単に編集できるものにしています。そして SVG ファイルが完全にマークアップで構成されていることから、ベクターイメージの中にあるテキストは検索することができます。さらに、SVG の利点は DOM とのリッチな連携にあります。イメージはスクリプトで編集可能なグラフィックオブジェクトなので、よりパワフルな web アプリケーションを創り出せます。これは、サーバーサイドのスクリプトへの要求やブラウザープラグインなしで、動的に生成される画像を創り出すことが可能になることを示します。

SVG は他のフォーマットよりも多くの独特な利点を提供します。SVG 画像は少しのファイルサイズの増加でスケールアップし、元のイメージを損なわず、小さなイメージやアイコンにも理想的に利用できます。SVG は大きなサイズのイメージに対してもファンタスティックなフォーマットです。例えば、地図、グラフそして図表などです。小さなラベルや詳細なボーダーも、画像がスケールダウンしても崩れずに表示されます。注目のキーエリアでは、組織図または地図にある国境線 (このリンク先のファイルは IE9 Platform Preview などで開くことをお勧めします) の中のテキストのように, イメージをズームした後でもくっきりと読みやすいままです。人が読みやすい (human-readable) マークアップの中の情報を維持することは SVG を Wiki タイプの合作的な画像に適しており、簡単に編集できる点も適しているところです。 SVG は表や図の中のラベルの変更を難なくできます－普通のテキストエディタのみが必要なぐらいです。 Web ブラウザーで引き続き広くネイティブ SVG をサポートすることは、SVG をインタラクティブで動的な Web コンテンツを実装するための良いオプションに成長させます。

相互運用性について (On Interoperability)

我々は Web 開発者を我々の顧客としても尊重しており、相互運用可能な SVG が異なるブラウザー間で簡単に記述できる強力なツールになることを期待しています。しかし、時には、その開発において、明確ではないことがあります。

SVG ワーキンググループのメンバーでもあるマイクロソフトのシニアプログラムマネージャ Patrick Dengler は SVG ワーキンググループと密接に活動しており、SVG の将来を定義することに関与しながら、我々の SVG の実装が確実に相互運用性のあるものになるように活動しています。初版の SVG の仕様が "勧告(Recommendation)" の状態になったのは数年前のことではありますが、この仕様はまだいくつか不明瞭なところが残っています。その結果、現在の主要 Web ブラウザーにおける SVG の実装は、その範囲と振る舞いの両方において異なったものになっています。我々のゴールは相互運用性に照準を合わせることで開発者の仕事を簡単にさせることにあります。我々が実装している仕様の一部において、我々はしっかりと仕様を固守します。いくつかのケースでは、他のブラウザーの挙動や SVG の将来の方向性をみながら決定したものになります。

では、例えば、<rect> element が rx と ry の両方に負の値を持った時の挙動をみてみましょう。それは 1.1 の仕様では明確になっていないところになります。 error processing ガイドラインにて別のことについて示唆しているので、ここでは一つの動きについてみていきます。

 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100">
   <rect x="10" y="10" width="50" height="80" rx="-10" ry="-10" fill="red"/>
</svg>

image of Opera, Firefox and Chrome displaying the above svg. Opera displays a smooth rectangle, Firefox displays nothing, Chrome displays a rectangle with triangles coming off each of the corners

さて、どれが正しいのでしょう？Presto (Opera) は負の rx と ry の値を 0 として扱い、Gecko (Firefox) は長方形をまったくレンダリングせず、そして Webkit (Chrome, Safari) は特定の負の rx と ry 値を使っています。すべての主要ブラウザーで異なることを行っています。この結果は、仕様 1.1 にあるマイナーな不整合によって、一致する挙動が一つだけある (もしくはまったくない) といえるでしょう。期待できることに、SVG Tiny 1.2 の仕様が明らかにしている挙動では、負の値はエラーとして扱うのではなくサポートされないものと規定されています。そしてこれが IE9 の実装がフォローする挙動となります。

SVG in the IE9 Platform Preview

HTML5 では、SVG は inline HTML として含むことができます。現状の Web ページは、ほんの少し構成を修正するだけで inline SVG を含ませるように更新することができます！例えば、次のシンプルな手書きのマークアップをみてください:

 <!DOCTYPE html>
<p style="font-family:Georgia;font-size:9pt;">You can insert vector images using inline HTML! They inherit the CSS styles of parent elements like other HTML5 elements.
<BR>
<svg width="200" height="100">
    <circle cx="50" cy="50" r="45" fill-opacity=".5" fill="red"/>
    <circle cx="100" cy="50" r="45" fill-opacity=".5" fill="yellow"/>
    <circle cx="75" cy="100" r="45" fill-opacity=".5" fill="blue"/>
    <text x="40" y="70" fill="white">Colors!!</text>
</svg>
</p>

IE9 Platform Preview はこれを次のようにレンダリングします:

IE9 Platform Preview displaying the above svg. There is a paragraph and then three circles overlapping as in a venn diagram

スクラッチからイメージを作り出せるだけでなく、元のイメージを編集することなく、SVG を利用して既存のイメージにマークアップすることができます。次の SVG の例では、2 匹のカワウソを指しています (元の写真に、SVG で白い丸を重ねています。):

 <!DOCTYPE html>
<svg width="120" height="90" >
    <style>
        .highlight {
            stroke-width: 5px;
            stroke: white;
            fill: none;
        }
    </style>

    <image x="0" y="0" width="120" height="90" xlink:href="http://photos-a.ak.fbcdn.net/photos-ak-sf2p/v160/140/48/1107073/n1107073_31705640_3439.jpg"/>
    <circle cx="90" cy="50" r="15" class="highlight"/>
    <circle cx="22" cy="47" r="10" class="highlight"/>
    <rect x="0" y="0" width="120" height="20" fill-opacity=".5" fill="black"/>
    <text x="5" y="15" fill="white" font-size="8pt" font-family="Verdana">we saw giant otters!</text>
    <rect x="0" y="0" width="120" height="90" stroke-width="1" stroke="black" fill="none"/>
</svg>

IE9 Platform Preview displaying the above svg. There is an image with two circles drawn on it.

Google Maps は SVG を使って地図上に線(とか多角形) を重ね合わせることで、同じような機能を達成されています。

inline HTML の SVG だけでなく、Platform Preview は、inline XHTML, <object> タグの利用、そして .svg ファイル単独の利用もサポートしています。

次の表は、現在利用可能な 4 つの方法を使って、どうやって SVG を挿入できるのか？ということを明示します。

Inline HTML	`<!DOCTYPE html>...<svg width="120" height="90">your SVG markup</svg>...`
Inline XHTML	`<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><body>... <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="120" height="90">your SVG markup</svg>...</body></html>`
<object> tag	`...<object data="your-SVG-image.svg" width="100" height="100" type="image/svg+xml"></object>...`
.svg document	`<?xml version="1.0" standalone=”no”?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" version="1.1">your SVG markup</svg>`

HTML5 をサポートするというのは、SVG を CSS を使って表現できるということを意味します。CSS のサポートとは、SVG を Web ページで SVG を正しくまとめ、開発者が完全に新しい方法でイメージを扱えることです。アイコンやヘッダーイメージにかぶせることができます。グラフや地図に重ね合わせることもできます。

Steven Sinofsky の MIX10 で行った Clippy デモは、SVG 属性 (attributes) が Internet Explorer 開発者ツールで扱えることを示しました。それは、開発者ツールを立ち上げ(F12キーを押す)、SVG 要素 (element) を HTML のツリーからクリックし、そのスタイルと属性を右にあるプロパティペインから調整するといったシンプルなものです。開発者ツールが SVG をきちんと扱える素晴らしい方法であることをお試しいただけます。

Platform Preview は基本的な DOM についてのサポートも含まれています。SVG 要素は JavaScript で、生成されたり、位置を変えたり、装飾されたり、そして動かされたりすることができます。もし SVG 要素が Platform Preview 内に存在するなら、ほとんどまたはすべての関連する SVGDOM インタフェースがサポートされます。SVG-oids ゲームと German Election map は、SVG の潜在能力の一部分をデモしているだけです。

SVG について学ぶ事に興味のある VML 開発者向けに、Seth McEvoy が書いた VML to SVG Migration Guide というのがあります。それは VML と SVG をアーキテクチャによって分解し、それらをサイドバイサイドで比較しています。VML の代わりに、より相互運表可能な SVG を使うことは、とても推奨されます。

SVG in Internet Explorer 9

次に挙げていることが、IE9 Platform Preview で現在サポートされていることです。(少なくとも部分的には):

Methods of embedding: inline HTML, inline XHTML, <object>, full .svg documents
Structure: <svg>, <defs>, <use>, <g>, <image>
Shapes: <circle>, <ellipse>, <rect>, <line>, <polyline>, <polygon>, <path>
Text
Filling, Stroking, (CSS3) Color
DOML2 Core と SVGDOM
Events
Presentation Attributes と CSS Styling
Transforms: translate, skewX, skewY, scale, rotate

Platform Preview で現在サポートされている大部分の SVG はすべて実装されています。Platform Preview 内に要素が存在する場合、それは、対応する SVGDOM をサポートし、CSS やプレゼンテーション属性によって表現されることが可能であることです。

将来のアップデートにて、IE9 Platform Preview は次のことをサポートする予定です:

埋め込み方法: <embed>, <iframe>, <img>, css image, .svgz
グラデーションとパターン
Clipping, Masking, and Compositing
Cursor, Marker
Remainder of Text, Transforms, Events

我々は皆さんに Platform Preview をダウンロードして、その SVG の機能を試していただくことを強く奨励します！Windows Internet Explorer Test Drive サイトにはいくつかのデモがあり、また良いスタートポイントになると思います。

Jennifer Yu

Program Manager

3/19 更新 - 2つ目のコードサンプルをアップデートし、xmlns とバージョン属性をそれらの必要性のなさとほかのサンプルのコンテキストと困惑されるため、SVG タグから削除しました。

SVG in IE9 Roadmap

相互運用性について (On Interoperability)

SVG in the IE9 Platform Preview

SVG in Internet Explorer 9

Additional resources