在 html5 中，我們可以直接將 SVG 元素嵌入 html 頁(yè)面中 什么是SVG ？SVG 指可伸縮矢量圖形 (scalable Vector Graphics) SVG 用于定義用于網(wǎng)絡(luò)的基于矢量的圖形 SVG 使用 XML 格式定義圖形 SVG 圖像在放大或改變尺寸的情況下其圖形質(zhì)量不會(huì)有損失 SVG 優(yōu)勢(shì)與其它圖像格式相比（比如 JPEG 和 GIF），使用 SVG 有如下好處 SVG 圖像可通過(guò)文本編輯器來(lái)創(chuàng)建和修改 瀏覽器支持Internet Explorer 9+,Firefox,Opera,Chrome,和 Safari 支持內(nèi)聯(lián) SVG 把 SVG 直接嵌入 HTML 頁(yè)面在 HTML5 中，我們可以直接將 SVG 元素嵌入 HTML 頁(yè)面中 <!DOCTYPE html> <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> SVG 與 canvas 之間的區(qū)別SVG 是一種使用 XML 描述 2D 圖形的語(yǔ)言，Canvas 通過(guò) JavaScript 來(lái)繪制 2D 圖形 SVG 基于 XML，這意味著 SVG DOM 中的每個(gè)元素都是可用的，我們可以為某個(gè)元素附加 JavaScript 事件處理器 在 SVG 中，每個(gè)被繪制的圖形均被視為對(duì)象，如果 SVG 對(duì)象的屬性發(fā)生變化，那么瀏覽器能夠自動(dòng)重現(xiàn)圖形 Canvas 是逐像素進(jìn)行渲染的，在 canvas 中，一旦圖形被繪制完成，它就不會(huì)繼續(xù)得到瀏覽器的關(guān)注，如果其位置發(fā)生變化，那么整個(gè)場(chǎng)景也需要重新繪制，包括任何或許已被圖形覆蓋的對(duì)象 SVG 不依賴(lài)分辨率 Canvas 依賴(lài)分辨率 canvas 與 SVG 的比較下表列出了 canvas 與 SVG 之間的一些不同之處
|
