SVG可縮放矢量圖形（Scalable Vector Graphics）是基于可擴(kuò)展標(biāo)記語(yǔ)言（XML），用于描述二維矢量圖形的一種圖形格式。SVG是W3C制定的一種新的二維矢量圖形格式，也是規(guī)范中的網(wǎng)絡(luò)矢量圖形標(biāo)準(zhǔn)。SVG嚴(yán)格遵從XML語(yǔ)法，并用文本格式的描述性語(yǔ)言來(lái)描述圖像內(nèi)容，因此是一種和圖像分辨率無(wú)關(guān)的矢量圖形格式。
什么是SVG？
SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)
SVG 用來(lái)定義用于網(wǎng)絡(luò)的基于矢量的圖形
SVG 使用 XML 格式定義圖形
SVG 圖像在放大或改變尺寸的情況下其圖形質(zhì)量不會(huì)有所損失
SVG 是萬(wàn)維網(wǎng)聯(lián)盟的標(biāo)準(zhǔn)
SVG 與諸如 DOM 和 XSL 之類(lèi)的 W3C 標(biāo)準(zhǔn)是一個(gè)整體
Canvas 和 SVG 的區(qū)別：
SVG
SVG 是一種使用 XML 描述 2D 圖形的語(yǔ)言。
SVG 基于 XML，這意味著 SVG DOM 中的每個(gè)元素都是可用的。您可以為某個(gè)元素附加 JavaScript 事件處理器。
在 SVG 中，每個(gè)被繪制的圖形均被視為對(duì)象。如果 SVG 對(duì)象的屬性發(fā)生變化，那么瀏覽器能夠自動(dòng)重現(xiàn)圖形。
特點(diǎn)：
不依賴(lài)分辨率
支持事件處理器
最適合帶有大型渲染區(qū)域的應(yīng)用程序（比如谷歌地圖）
復(fù)雜度高會(huì)減慢渲染速度（任何過(guò)度使用 DOM 的應(yīng)用都不快）
不適合游戲應(yīng)用
Canvas
Canvas 通過(guò) JavaScript 來(lái)繪制 2D 圖形。
Canvas 是逐像素進(jìn)行渲染的。
在 canvas 中，一旦圖形被繪制完成，它就不會(huì)繼續(xù)得到瀏覽器的關(guān)注。如果其位置發(fā)生變化，那么整個(gè)場(chǎng)景也需要重新繪制，包括任何或許已被圖形覆蓋的對(duì)象。
特點(diǎn)：
依賴(lài)分辨率
不支持事件處理器
弱的文本渲染能力
能夠以 .png 或 .jpg 格式保存結(jié)果圖像
最適合圖像密集型的游戲，其中的許多對(duì)象會(huì)被頻繁重繪
簡(jiǎn)單例子：
<svg width="100%" height="100%" >
<circle cx="300" cy="60" r="50" stroke="#ff0" stroke-width="3" fill="red" />
</svg>
位圖與矢量圖
以前，瀏覽器中顯示的圖形，例如jpeg、gif等，都是位圖，這些圖像格式是基于光柵的。在光柵圖像中，圖像文件定義了圖像中每個(gè)像素的顏色值。瀏覽器需要讀取這些值并做出相應(yīng)行動(dòng)。這種圖像的再現(xiàn)能力比較強(qiáng)，但是在某些情形下會(huì)顯得不足。例如，當(dāng)瀏覽器以不同大小顯示一副圖像時(shí)，通常會(huì)產(chǎn)生鋸齒邊緣，這時(shí)，瀏覽器不得不為那些在原始圖像中不存在的像素插入或猜測(cè)數(shù)值；這樣會(huì)導(dǎo)致圖像失真。此外，針對(duì)位圖進(jìn)行動(dòng)畫(huà)，最多也僅限于生成“翻動(dòng)書(shū)本”類(lèi)型的動(dòng)畫(huà)，即快速連續(xù)地顯示單獨(dú)圖像。
矢量圖通過(guò)指定為確定每個(gè)像素的值所需的指令而不是指定這些值本身，克服了這些困難中的一部分。例如，向量圖形不再為一個(gè)直徑一英寸的圓提供像素值，而是告訴瀏覽器創(chuàng)建一個(gè)直徑一英寸的圓，然后讓瀏覽器（或插件）做其余事情。這消除了光柵圖形的許多限制；使用向量圖形，瀏覽器只要知道它必須畫(huà)一個(gè)圓。如果圖像需要以正常大小的三倍來(lái)顯示，那么瀏覽器只要按正確的大小畫(huà)圓而不必執(zhí)行光柵圖像通常的插入法。類(lèi)似地，瀏覽器接收的指令可以更容易地與外部信息源（如應(yīng)用程序和數(shù)據(jù)庫(kù)）綁定，要對(duì)圖像制作動(dòng)畫(huà)，瀏覽器只要接收有關(guān)如何操縱屬性（如半徑或顏色）的指令即可。
HTML體系中，最常用的繪制矢量圖的技術(shù)是SVG和HTML5新增加的canvas元素。這兩種技術(shù)都支持繪制矢量圖和光柵圖。
SVG概述
可縮放矢量圖形(Scalable Vector Graphics，簡(jiǎn)稱(chēng)SVG)是一種使用XML來(lái)描述二維圖形的語(yǔ)言(SVG嚴(yán)格遵從XML語(yǔ)法)。 SVG允許三種類(lèi)型的圖形對(duì)象：矢量圖形形狀（例如由直線和曲線組成的路徑）、圖像和文本。 可以將圖形對(duì)象（包括文本）分組、樣式化、轉(zhuǎn)換和組合到以前呈現(xiàn)的對(duì)象中。 SVG 功能集包括嵌套轉(zhuǎn)換、剪切路徑、alpha 蒙板和模板對(duì)象。
SVG繪圖是交互式和動(dòng)態(tài)的。 例如，可使用腳本來(lái)定義和觸發(fā)動(dòng)畫(huà)。這一點(diǎn)與Flash相比很強(qiáng)大。Flash是二進(jìn)制文件，動(dòng)態(tài)創(chuàng)建和修改都比較困難。而SVG是文本文件，動(dòng)態(tài)操作是相當(dāng)容易的。而且，SVG直接提供了完成動(dòng)畫(huà)的相關(guān)元素，操作起來(lái)非常方便。
SVG與其他Web標(biāo)準(zhǔn)兼容，并直接支持文檔對(duì)象模型DOM。這一點(diǎn)也是與HTML5中的canvas相比很強(qiáng)大的地方(這里注意，SVG內(nèi)部也是用一個(gè)類(lèi)似的canvas這樣的東西來(lái)展示SVG圖形，到后面你會(huì)發(fā)現(xiàn)很多特性和HTML5的canvas還有點(diǎn)像；文中如果沒(méi)明確說(shuō)明是SVG的canvas的話，都代指HTML5中的canvas元素)。因而，可以很方便的使用腳本實(shí)現(xiàn)SVG的很多高級(jí)應(yīng)用。而且SVG的圖形元素基本上都支持DOM中的標(biāo)準(zhǔn)事件?？蓪⒋罅渴录幚沓绦?如“onmouseover”和“onclick”)分配給任何SVG圖形對(duì)象。 雖然SVG的渲染速度比不上canvas元素，但是勝在DOM操作很靈活，這個(gè)優(yōu)勢(shì)完全可以彌補(bǔ)速度上的劣勢(shì)。
SVG既可以說(shuō)是一種協(xié)議，也可以說(shuō)是一門(mén)語(yǔ)言；既是HTML的一個(gè)標(biāo)準(zhǔn)元素，也是一種圖片格式。
SVG并不是HTML5中的東西，但是也算頁(yè)面時(shí)興的技術(shù)之一，姑且也放到這個(gè)專(zhuān)題下了。
SVG與其它圖片格式的比較
SVG與其它的圖片格式相比，有很多優(yōu)點(diǎn)(很多優(yōu)點(diǎn)來(lái)源于矢量圖的優(yōu)點(diǎn))：
• SVG文件是純粹的XML， 可被非常多的工具讀取和修改(比如記事本)。
• SVG 與JPEG 和GIF圖像比起來(lái)，尺寸更小，且可壓縮性更強(qiáng)，總結(jié)，矢量圖，內(nèi)存小，放大不失真。
• SVG 是可伸縮的，可在圖像質(zhì)量不下降的情況下被放大，可在任何的分辨率下被高質(zhì)量地打印。
• SVG 圖像中的文本是可選的，同時(shí)也是可搜索的(很適合制作地圖)。
• SVG 可以與 Java 技術(shù)一起運(yùn)行。
• SVG 是開(kāi)放的標(biāo)準(zhǔn)。
SVG與Flash的比較
SVG 的主要競(jìng)爭(zhēng)者是Flash。與Flash相比，SVG 最大的優(yōu)勢(shì)是它與其他標(biāo)準(zhǔn)(比如XSL和DOM)相兼容，操作方便，而Flash則是未開(kāi)源的私有技術(shù)。其它的比如存儲(chǔ)的格式，動(dòng)態(tài)生成圖形等方面，SVG也占有很大的優(yōu)勢(shì)。
SVG的呈現(xiàn)方式
關(guān)于支持HTML5與SVG的瀏覽器不是這里討論的重點(diǎn)，基本上裝上最新的Chrome或者FireFox瀏覽器就差不多了(IE用戶請(qǐng)裝IE9就對(duì)了，至于IE9之前的版本，需要裝SVG的插件，這里就直接略過(guò)了)。對(duì)于直接支持SVG的瀏覽器，SVG主要采用兩面兩種呈現(xiàn)的方式。
內(nèi)聯(lián)到HTML
SVG是標(biāo)準(zhǔn)的HTML元素，直接寫(xiě)到HTML中就可以了，看下面的例子：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html>
<head>
<!-- <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> -->
<title> My First SVG Page</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
width="200px" height="200px">
<rect x="0" y="0" width="100%" height="100%"
fill="none" stroke="black"/>
<circle cx="100" cy="100" r="50"
style="stroke: black; fill: red;"/>
</svg>
</body>
</html>
請(qǐng)注意開(kāi)頭的部分xml聲明，與svg的命名空間xmlns、版本version等部分，主要是考慮兼容性的問(wèn)題；這些部分在HTML5中基本都可以不用寫(xiě)了(寫(xiě)不寫(xiě)還是自己瞧著辦吧)。
獨(dú)立SVG文件
獨(dú)立SVG指的是通過(guò)使用svg文件擴(kuò)展名來(lái)提供向量圖形文件格式。在瀏覽器中嵌入這個(gè)svg文件就可以使用了。
1.獨(dú)立的SVG文件/頁(yè)面，定義的模板基本就像下面的一樣：
<svg width="100%" height="100%">
<!-- SVG markup here. -->
</svg>
把這樣的文本文件保存成以svg為擴(kuò)展名的文件，例如sun.svg，這樣的文件可以直接用瀏覽器打開(kāi)瀏覽，也可以作為引用嵌入到別的頁(yè)面中。
2.HTML引用外部的SVG文件。
使用object或者img元素嵌入svg圖形就可以了，例如下面的小例子：
<!DOCTYPE html>
<html>
<head>
<title> My First SVG Page</title>
</head>
<body>
<object data="sun.svg" type="image/svg+xml"
width="300px" height="300px">
<!-- Implement fallback code here, or display a message: -->
<p>Your browser does not support SVG - please upgrade to a modern browser.</p>
</object>
<img src="sun.svg" alt="svg not supported!" />
</body>
</html>
其實(shí)SVG也可以放在其他的XML文檔中，也可以像其他的XML文檔一樣，使用XML相關(guān)的技術(shù)格式化和驗(yàn)證，這個(gè)不是重點(diǎn)，此處略去了。
SVG的渲染順序
SVG是嚴(yán)格按照定義元素的順序來(lái)渲染的，這個(gè)與HTML靠z-index值來(lái)控制分層不一樣。在SVG中，寫(xiě)在前面的元素先被渲染，寫(xiě)在后面的元素后被渲染。后渲染的元素會(huì)覆蓋前面的元素，雖然有時(shí)候受透明度影響，看起來(lái)不是被覆蓋的，但是SVG確實(shí)是嚴(yán)格按照先后順序來(lái)渲染的。
注意：SVG是以XML定義的，所以是大小寫(xiě)敏感的，這點(diǎn)與HTML不一樣。
突襲HTML5之SVG 2D入門(mén)2 - 圖形繪制
<svg width="200" height="250">
<rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
<rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
<circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/>
<ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/>
<line x1="10" x2="50" y1="110" y2="150" stroke="orange" fill="transparent" stroke-width="5"/>
<polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145"
stroke="orange" fill="transparent" stroke-width="5"/>
<polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"
stroke="green" fill="transparent" stroke-width="5"/>
<path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>
</svg>
這個(gè)例子畫(huà)了很多形狀：正常的矩形，帶圓角的矩形，圓形，橢圓形，直線，折線，多邊形，還有路徑。這些都屬于基本的圖形元素。雖然繪制一個(gè)圖形有很多種方式，比如矩形可以用rect實(shí)現(xiàn)，也可以用path等實(shí)現(xiàn)，但是我們還是應(yīng)該盡量保持SVG的內(nèi)容短小精悍，易于閱讀。
