HTML5 內聯SVG
HTML5 支持內聯SVG。
什麼是SVG？
- SVG 指可伸縮矢量圖形(Scalable Vector Graphics)
- SVG 用於定義用於網絡的基於矢量的圖形
- SVG 使用XML 格式定義圖形
- SVG 圖像在放大或改變尺寸的情況下其圖形質量不會有損失
- SVG 是萬維網聯盟的標準
SVG優勢
與其他圖像格式相比（比如JPEG 和GIF），使用SVG 的優勢在於：
- SVG 圖像可通過文本編輯器來創建和修改
- SVG 圖像可被搜索、索引、腳本化或壓縮
- SVG 是可伸縮的
- SVG 圖像可在任何的分辨率下被高質量地打印
- SVG 可在圖像質量不下降的情況下被放大
瀏覽器支持
Internet Explorer 9+, Firefox, Opera, Chrome, 和Safari 支持內聯SVG。
把SVG 直接嵌入HTML 頁面
在HTML5 中，您能夠將SVG 元素直接嵌入HTML 頁面中：
實例
<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>
</body>
</html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>
</body>
</html>
嘗試一下»
結果：
抱歉, 你的瀏覽器不支持內聯SVG.學習更多關於SVG教程,請訪問SVG教程 .
SVG 與Canvas兩者間的區別
SVG 是一種使用XML 描述2D 圖形的語言。
Canvas 通過JavaScript 來繪製2D 圖形。
SVG 基於XML，這意味著SVG DOM 中的每個元素都是可用的。 您可以為某個元素附加JavaScript 事件處理器。
在SVG 中，每個被繪製的圖形均被視為對象。 如果SVG 對象的屬性發生變化，那麼瀏覽器能夠自動重現圖形。
Canvas 是逐像素進行渲染的。 在canvas 中，一旦圖形被繪製完成，它就不會繼續得到瀏覽器的關注。 如果其位置發生變化，那麼整個場景也需要重新繪製，包括任何或許已被圖形覆蓋的對象。
Canvas 與SVG 的比較
下表列出了canvas 與SVG 之間的一些不同之處。
| Canvas | SVG |
|---|---|
|
|