Getting Started with SVGSVG 入門

XML ベース
• スクリプト可能、拡張可能、容易に編集可能
• CSS スタイルの適用が容易
ベクターグラフィックスス
• 画像劣化なしでサイズ変更可能
圧縮
• 高速ダウンロード
容易なデバッグ
• 単なる XML
機能
Canvas
SVG
描画モード
Immediate (即時) 型 (注 1)
Retained (保持) 型 (注 2)
DOM サポート
DOM の <CANVAS> 部分
SVG 要素のそれぞれが
DOM の一部
アニメーション
Canvas 内で直接スクリプ
トを使用
DOM でオブジェクトを操
作
適用
Internet Explorer 9 適用
対応 GPU アクセラ
レーション
どんな場合に使用プログラムによるレンダリ精度の高い図、グラフ
するか
ング、ゲーム
<?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">
<circle cx="200" cy="200" r="150" stroke="black" strokewidth="2" fill="yellow"/>
<ellipse cx="150" cy="160" rx="10" ry="40" fill="black"/>
<ellipse cx="250" cy="160" rx="10" ry="40" fill="black"/>
<path d="M 150,250 Q 200,350 250,250 "
fill="yellow" stroke="black" stroke-width="5" />
</svg>
<!DOCTYPE html>
...
<svg xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="65" fillopacity=".5" fill="red"/>
<circle cx="150" cy="100" r="65" fillopacity=".5" fill="yellow"/>
<circle cx="125" cy="150" r="65" fillopacity=".5" fill="blue"/>
</svg>
…
スタンドアロンのグラフィックスドキュメントとして作成
された SVG グラフィックス
<?xml version="1.0" standalone=”no”?>
<!DOCTYPE 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">
...
</svg>
<object data="your-SVG-image.svg"
width="100" height="100"
type="image/svg+xml"></object>
SVG
DOM +
JavaScript
GPUPowered
グラフィックスが優れた対話型サイト
http://vectormagic.com/home
http://www.w3.org/Graphics/SVG/
http://www.w3.org/TR/SVG11/
http://blogs.msdn.com/b/ie/archive/2010/03/18/svgin-ie9-roadmap.aspx
http://ie.microsoft.com/testdrive/
http://leunen.d.free.fr/fakesmile/

Download Report