SVG

Scalable Vector Graphics (SVG) は、プラグインや別のビューアーを使うことなく、小さくて単純な画像から大きくて複雑な画像まで、高品質で簡単に拡大縮小できる画像を Web サイトに付け加える強力な手段です。Windows Internet Explorer 9 では、SVG 1.1 (第 2 版) 仕様の勧告 (デスクトップ ブラウザー用) に基づいて、基本的な SVG 機能のサポートが導入されました。

次の機能が実装されています。

  • ほとんどの SVG ドキュメント構造、対話式操作 (スクリプト イベント)、スタイル指定 (インラインと CSS 経由)
  • 多くのプレゼンテーション要素、および、該当する属性と DOM インターフェイス。
    • 基本図形
    • 塗りつぶし、ストローク、マーカー、色
    • グラデーションとパターン
    • パス
    • テキスト

Internet Explorer 9 では、SVG マークアップを表示する方法として、次がサポートされています。

  • 外部オブジェクトを使わない HTML5 埋め込みの SVG フラグメント (つまり、単純に HTML 内に <svg> タグを含める)
  • 完全なドキュメント タイプとしての SVG (ファイル拡張子が .svg)
  • XML または XHTML 内の SVG (HTML5 の方法と類似、XML または XHTML ファイルの場合のみ)
  • CSS 画像としての SVG
  • object 要素を使った SVG。次の例を参照 (type、height、width の属性に注意)
    
    <object data="rect2.svg" width="100%" height="400px"
        type="image/svg+xml"></object>
    
    
  • imgembediframeframe の各要素を使った SVG。次の例を参照
    
    <embed id="Smiley" src="smiley.svg" type="image/svg+xml">
    
    

このセクションの内容

API リファレンス

Scalable Vector Graphics (SVG)

サンプルとチュートリアル

SVG 座標変換
SVG アニメーション基礎編
SVG アニメーション中級編
SVG アニメーション上級編
SVG を Web ページに追加する方法
SVG でズームやパンを行う方法
SVG と Canvas でどちらを選ぶか
SVG と Canvas の使用例

Internet Explorer Test Drive デモ

ドイツの Europawahl 2004 の地図に関するページ
SVG フィルター効果に関するハンズオン
Real-world Diagrams に関するページ
SVG サイコロに関するページ
SVG–oids に関するページ

IEBlog 記事

SVG 入門のベスト プラクティスに関する記事
IE10 の SVG フィルター効果に関する記事
キャンバスと SVG を使う場面の考察に関する記事
SVG Open 2011 (SVG と Web の出会い) に関する記事
Santa's Workshop を使って各種ブラウザーのハードウェア アクセラレーション SVG を比較する記事
SVG の詳細に関する記事
SVG Open に関する記事
SVG 2.0 (SVG Working Group Face-to-Face からのレポート) に関する記事
IE9 ロードマップにおける SVG に関する記事

仕様

Scalable Vector Graphics (SVG) 1.1 (第 2 版)

関連トピック

HTML5 SVG とキャンバスで BrikBloc ゲームを作る方法に関するページ

 

 

表示:
© 2014 Microsoft