SVG
定義
矢量圖工具， 繪圖
SVG在H5標準之前就有了， IE對SVG的兼容性非常好
svg與canvas區別
- canvas位圖， svg是矢量圖
- canvas使用JavaScrpt繪圖， svg使用XML來繪圖
- canvas不支持事件（借助庫） svg支持事件
svg的應用領域
- 矢量圖標
- 地圖
SVG的使用
<svg><rect><circle><line><path><ellipse><polygon>- .....
示例
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="400" style="border:1px solid #ccc">
<rect x="50" y="50" width="200" height="50" fill="red" stroke="green" stroke-width="10" />
<circle cx="300" cy="200" r="100" fill="red"/>
<line x1="50" y1="300" x2="350" y2="300" stroke="green" stroke-width="10" />
</svg>
</body>
HTML中使用SVG
- 在html中直接寫 <svg>
<embed src="" type="image/svg+xml" width="" height=""><object data="" type="image/svg+xml" width="" height=""><iframe src="">
示例
<body>
<embed src="../svgs/clock.svg" type="image/svg+xml" width="400">
<object data="../svgs/shake.svg" type="image/svg+xml" width="400"></object>
<iframe src="../svgs/live_fill.svg" frameborder="0" width="400" height="400"></iframe>
</body>
