HTML SVG
HTML5 支援內聯 SVG。
什麼是SVG？
SVG 指可擴展向量圖(Scalable Vector Graphics)
SVG 用於定義用於網路的基於向量的圖形
SVG 使用XML 格式定義圖形
#SVG 影像在放大或改變尺寸的情況下其圖形品質不會有損失
SVG 是萬維網聯盟的標準
SVG優勢
#與其他圖像格式相比（例如JPEG 和GIF），使用SVG 的優點在於：
SVG 圖像可透過文字編輯器來建立和修改
SVG 映像可被搜尋、索引、腳本化或壓縮
#SVG 是可伸縮的
SVG 可在影像品質不下降的情況下放大
## ##########瀏覽器支援####################################Internet Explorer 9+, Firefox, Opera, Chrome, 和Safari 支援內聯SVG。 ###############把 SVG 直接嵌入 HTML 頁面##########在HTML5 中，您能夠將SVG 元素直接嵌入HTML 頁面中：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> </head> <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 與Canvas兩者間的差異
# SVG 是一種使用XML 來描述2D 圖形的語言。 ######Canvas 透過 JavaScript 來繪製 2D 圖形。 ######SVG 是基於 XML，這表示 SVG DOM 中的每個元素都是可用的。您可以為某個元素附加 JavaScript 事件處理器。 ######在 SVG 中，每個被繪製的圖形被視為物件。如果 SVG 物件的屬性發生變化，那麼瀏覽器能夠自動重現圖形。 ######Canvas 是逐像素進行渲染的。在 canvas 中，一旦圖形被繪製完成，它就不會繼續得到瀏覽器的注意。如果其位置發生變化，那麼整個場景也需要重新繪製，包括任何或許已被圖形覆蓋的物件。 ###############Canvas 與SVG 的比較################下表列出了canvas 與SVG 之間的一些不同之處。 ##################
| Canvas | SVG |
##依賴解析度 | 不依賴解析度 |
#不支援事件處理器 | 支援事件處理器 |
弱的文字渲染能力 | 最適合大型渲染區域的應用程式（如Google地圖） |
| ## 能夠以. png 或.jpg 格式 | |
複雜度高會減慢渲染速度（任何過度使用DOM 的應用程式都不快）
| 最適合圖像密集型的遊戲， |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
</head>
<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>
