標籤：
突襲HTML5之SVG 2D入門1 - SVG綜述SVG可縮放向量圖形（Scalable Vector Graphics）是基於可延伸標記語言 (XML)（XML），用於描述二維向量圖形的一種圖形格式。SVG是W3C制定的一種新的二維向量圖形格式，也是規範中的網路向量圖形標準。SVG嚴格遵從XML文法，並用文字格式設定的描述性語言來描述映像內容，因此是一種和映像解析度無關的向量圖形格式。
什麼是SVG？
SVG 指可伸縮向量圖形 (Scalable Vector Graphics)
SVG 用來定義用於網路的基於向量的圖形
SVG 使用 XML 格式定義圖形
SVG 映像在放大或改變尺寸的情況下其圖形品質不會有所損失
SVG 是全球資訊網同盟標準
SVG 與諸如 DOM 和 XSL 之類的 W3C 標準是一個整體
Canvas 和 SVG 的區別：
SVG
SVG 是一種使用 XML 描述 2D 圖形的語言。
SVG 基於 XML，這意味著 SVG DOM 中的每個元素都是可用的。您可以為某個元素附加 JavaScript 事件處理器。
在 SVG 中，每個被繪製的圖形均被視為對象。如果 SVG 對象的屬性發生變化，那麼瀏覽器能夠自動重現圖形。
特點：
不依賴解析度
支援事件處理器
最適合帶有大型渲染地區的應用程式（比如Google地圖）
複雜度高會減慢渲染速度（任何過度使用 DOM 的應用都不快）
不適合遊戲應用
Canvas
Canvas 通過 JavaScript 來繪製 2D 圖形。
Canvas 是逐像素進行渲染的。
在 canvas 中，一旦圖形被繪製完成，它就不會繼續得到瀏覽器的關注。如果其位置發生變化，那麼整個情境也需要重新繪製，包括任何或許已被圖形覆蓋的對象。
特點：
依賴解析度
不支援事件處理器
弱的文本渲染能力
能夠以 .png 或 .jpg 格式儲存結果映像
最適合映像密集型的遊戲，其中的許多個物件會被頻繁重繪
簡單例子：
<svg width="100%" height="100%" > <circle cx="300" cy="60" r="50" stroke="#ff0" stroke-width="3" fill="red" /></svg>
位元影像與向量圖
以前，瀏覽器中顯示的圖形，例如jpeg、gif等，都是位元影像，這些映像格式是基於光柵的。在光柵映像中，影像檔定義了映像中每個像素的顏色值。瀏覽器需要讀取這些值並做出相應行動。這種映像的再現能力比較強，但是在某些情形下會顯得不足。例如，當瀏覽器以不同大小顯示一副映像時，通常會產生鋸齒邊緣，這時，瀏覽器不得不為那些在原始映像中不存在的像素插入或猜測數值；這樣會導致映像失真。此外，針對位元影像進行動畫，最多也僅限於產生“翻動書本”類型的動畫，即快速連續地顯示單獨映像。
向量圖通過指定為確定每個像素的值所需的指令而不是指定這些值本身，克服了這些困難中的一部分。例如，向量圖形不再為一個直徑一英寸的圓提供像素值，而是告訴瀏覽器建立一個直徑一英寸的圓，然後讓瀏覽器（或外掛程式）做其餘事情。這消除了點陣圖形的許多限制；使用向量圖形，瀏覽器只要知道它必須畫一個圓。如果映像需要以正常大小的三倍來顯示，那麼瀏覽器只要按正確的大小畫圓而不必執行光柵映像通常的插入法。類似地，瀏覽器接收的指令可以更容易地與外部資訊源（如應用程式和資料庫）綁定，要對映像製作動畫，瀏覽器只要接收有關如何操縱屬性（如半徑或顏色）的指令即可。
HTML體系中，最常用的繪製向量圖的技術是SVG和HTML5新增加的canvas元素。這兩種技術都支援繪製向量圖和光柵圖。
SVG概述
可縮放向量圖形(Scalable Vector Graphics，簡稱SVG)是一種使用XML來描述二維圖形的語言(SVG嚴格遵從XML文法)。 SVG允許三種類型的繪圖物件：向量圖形形狀（例如由直線和曲線組成的路徑）、映像和文本。 可以將繪圖物件（包括文本）分組、樣式化、轉換和組合到以前呈現的對象中。 SVG 功能集包括嵌套轉換、裁剪路徑、Alpha 遮罩和模板對象。
SVG繪圖是互動式和動態。 例如，可使用指令碼來定義和觸發動畫。這一點與Flash相比很強大。Flash是二進位檔案，動態建立和修改都比較困難。而SVG是文字檔，動態操作是相當容易的。而且，SVG直接提供了完成動畫的相關元素，操作起來非常方便。
SVG與其他Web標準相容，並直接支援文件物件模型DOM。這一點也是與HTML5中的canvas相比很強大的地方(這裡注意，SVG內部也是用一個類似的canvas這樣的東西來展示SVG圖形，到後面你會發現很多特性和HTML5的canvas還有點像；文中如果沒明確說明是SVG的canvas的話，都代指HTML5中的canvas元素)。因而，可以很方便的使用指令碼實現SVG的很多進階應用程式。而且SVG的圖形元素基本上都支援DOM中的標準事件。可將大量事件處理常式(如“onmouseover”和“onclick”)分配給任何SVG繪圖物件。 雖然SVG的渲染速度比不上canvas元素，但是勝在DOM操作很靈活，這個優勢完全可以彌補速度上的劣勢。
SVG既可以說是一種協議，也可以說是一門語言；既是HTML的一個標準元素，也是一種圖片格式。
SVG並不是HTML5中的東西，但是也算頁面時興的技術之一，姑且也放到這個專題下了。
SVG與其它圖片格式的比較
SVG與其它的圖片格式相比，有很多優點(很多優點來源於向量圖的優點)：
• SVG檔案是純粹的XML， 可被非常多的工具讀取和修改(比如記事本)。
• SVG 與JPEG 和GIF映像比起來，尺寸更小，且可壓縮性更強，總結，向量圖，記憶體小，放大不失真。
• SVG 是可伸縮的，可在映像品質不下降的情況下被放大，可在任何的解析度下被高品質地列印。
• SVG 映像中的文本是可選的，同時也是可搜尋的(很適合製作地圖)。
• SVG 可以與 Java 技術一起運行。
• SVG 是開放的標準。
SVG與Flash的比較
SVG 的主要競爭者是Flash。與Flash相比，SVG 最大的優勢是它與其他標準(比如XSL和DOM)相相容，操作方便，而Flash則是未開源的私人技術。其它的比如儲存的格式，動態產生圖形等方面，SVG也佔有很大的優勢。
SVG的呈現方式
關於支援HTML5與SVG的瀏覽器不是這裡討論的重點，基本上裝上最新的Chrome或者FireFox瀏覽器就差不多了(IE使用者請裝IE9就對了，至於IE9之前的版本，需要裝SVG的外掛程式，這裡就直接略過了)。對於直接支援SVG的瀏覽器，SVG主要採用兩面兩種呈現的方式。
內聯到HTML
SVG是標準的HTML元素，直接寫到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>
請注意開頭的部分xml聲明，與svg的命名空間xmlns、版本version等部分，主要是考慮相容性的問題；這些部分在HTML5中基本都可以不用寫了(寫不寫還是自己瞧著辦吧)。
獨立SVG檔案
獨立SVG指的是通過使用svg副檔名來提供向量圖形檔案格式。在瀏覽器中嵌入這個svg檔案就可以使用了。
1.獨立的SVG檔案/頁面，定義的模板基本就像下面的一樣：
<svg width="100%" height="100%"> <!-- SVG markup here. --> </svg>
把這樣的文字檔儲存成以svg為副檔名的檔案，例如sun.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>其實SVG也可以放在其他的XML文檔中，也可以像其他的XML文檔一樣，使用XML相關的技術格式化和驗證，這個不是重點，此處略去了。
SVG的渲染順序
SVG是嚴格按照定義元素的順序來渲染的，這個與HTML靠z-index值來控制分層不一樣。在SVG中，寫在前面的元素先被渲染，寫在後面的元素後被渲染。後渲染的元素會覆蓋前面的元素，雖然有時候受透明度影響，看起來不是被覆蓋的，但是SVG確實是嚴格按照先後順序來渲染的。
注意：SVG是以XML定義的，所以是大小寫敏感的，這點與HTML不一樣。
突襲HTML5之SVG 2D入門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>
這個例子畫了很多形狀：正常的矩形，帶圓角的矩形，圓形，橢圓形，直線，折線，多邊形，還有路徑。這些都屬於基本的圖形元素。雖然繪製一個圖形有很多種方式，比如矩形可以用rect實現，也可以用path等實現，但是我們還是應該盡量保持SVG的內容短小精悍，易於閱讀。
下面是每個形狀的使用說明(這裡只介紹控製圖形形狀和位置的基本屬性，填充等屬性放到後面總結)。
矩形 - rect元素
這個元素有6個控制位置和形狀的屬性，分別是：
x：矩形左上方的座標(使用者座標系)的x值。
y：矩形左上方的座標(使用者座標系)的y值。
width：矩形寬度。
height：矩形高度。
rx：實現圓角效果時，圓角沿x軸的半徑。
ry：實現圓角效果時，圓角沿y軸的半徑。
比如上面例子中，實現了圓角效果，你也可以通過設定rx,ry為不同的值實現橢圓角效果。
圓 - circle元素
這個元素的屬性很簡單，主要是定義圓心和半徑：
r：圓的半徑。
cx：圓心座標x值。
cy：圓心座標y值。
橢圓 - ellipse元素
這個是更加通用的圓形元素，你可以分別控制半長軸和半短軸的長度，來實現不同的橢圓，很容易想到，當兩個半軸相等時，就是正圓形了。
rx：半長軸(x半徑)。
ry：半短軸(y半徑)。
cx：圓心座標x值。
cy：圓心座標y值。
直線 - line元素
直線需要定義起點與終點即可：
x1：起點x座標。
y1：起點y座標。
x2：終點x座標。
y2：終點y座標。
折線 - polyline元素
折線主要是要定義每條線段的端點即可，所以只需要一個點的集合作為參數：
points：一系列的用空格，逗號，分行符號等分隔開的點。每個點必須有2個數字：x值和y值。所以下面3個點 (0,0), (1,1)和(2,2)可以寫成："0 0, 1 1, 2 2"。
多邊形 - polygon元素
這個元素就是比polyline元素多做一步，把最後一個點和第一個點連起來，形成閉合圖形。參數是一樣的。
points：一系列的用空格，逗號，分行符號等分隔開的點。每個點必須有2個數字：x值和y值。所以下面3個點 (0,0), (1,1)和(2,2)可以寫成："0 0, 1 1, 2 2"。
路徑 - path元素
這個是最通用，最強力的元素了；使用這個元素你可以實現任何其他的圖形，不僅包括上面這些基本形狀，也可以實現像貝茲路徑那樣的複雜形狀；此外，使用path可以實現平滑的過渡線段，雖然也可以使用polyline來實現這種效果，但是需要提供的點很多，而且放大了效果也不好。這個元素控制位置和形狀的只有一個參數：
d：一系列繪製指令和繪製參數(點)組合成。
繪製指令分為絕對座標指令和相對座標指令兩種，這兩種指令使用的字母是一樣的，就是大小寫不一樣，絕對指令使用大寫字母，座標也是絕對座標；相對指令使用對應的小寫字母，點的座標表示的都是位移量。
絕對座標繪製指令
這組指令的參數代表的是絕對座標。假設當前畫筆所在的位置為(x0,y0)，則下面的絕對座標指令代表的含義如下所示：
指令 |
參數 |
說明 |
M |
x y |
將畫筆移動到點(x,y) |
L |
x y |
畫筆從當前的點繪製線段到點(x,y) |
H |
x |
畫筆從當前的點繪製水平線段到點(x,y0) |
V |
y |
畫筆從當前的點繪製豎直線段到點(x0,y) |
A |
rx ry x-axis-rotation large-arc-flag sweep-flag x y |
畫筆從當前的點繪製一段圓弧到點(x,y) |
C |
x1 y1, x2 y2, x y |
畫筆從當前的點繪製一段三次貝茲路徑到點(x,y) |
S |
x2 y2, x y |
特殊版本的三次貝茲路徑(省略第一個控制點) |
Q |
x1 y1, x y |
繪製二次方貝茲曲線到點(x,y) |
T |
x y |
特殊版本的二次方貝茲曲線(省略控制點) |
Z |
無參數 |
繪製閉合圖形，如果d屬性不指定Z命令，則繪製線段，而不是封閉圖形。 |
移動畫筆指令M，畫直線指令：L，H，V，閉合指令Z都比較簡單；下面重點看看繪製曲線的幾個指令。
繪製圓弧指令：A rx ry x-axis-rotation large-arc-flag sweep-flag x y
用圓弧串連2個點比較複雜，情況也很多，所以這個命令有7個參數，分別控制曲線的的各個屬性。下面解釋一下數值的含義：
rx,ry 是弧的半長軸、半短軸長度
x-axis-rotation 是此段弧所在的x軸與水平方向的夾角，即x軸的逆時針旋轉角度，負數代表順時針轉動的角度。
large-arc-flag 為1 表示大角度弧線，0 代表小角度弧線。
sweep-flag 為1代表從起點到終點弧線繞中心順時針方向，0 代表逆時針方向。
x,y 是弧終端座標。
前兩個參數和後兩個參數就不多說了，很簡單；下面就說說中間的3個參數：
x-axis-rotation代表旋轉的角度，體會下面例子中圓弧的不同：
<svg width="320px" height="320px"> <path d="M10 315 L 110 215 A 30 50 0 0 1 162.55 162.45 L 172.55 152.45 A 30 50 -45 0 1 215.1 109.9 L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/></svg>上面的HTML畫出下面的圖形：
可以看到橢圓旋轉參數的不同導致繪製的圓弧方向不同，當然這個參數對正圓來說沒有影響。
large-arc-flag和sweep-flag控制了圓弧的大小和走向，體會下面例子中圓弧的不同：
<svg width="325px" height="325px"> <path d="M80 80 A 45 45, 0, 0, 0, 125 125 L 125 80 Z" fill="green"/> <path d="M230 80 A 45 45, 0, 1, 0, 275 125 L 275 80 Z" fill="red"/> <path d="M80 230 A 45 45, 0, 0, 1, 125 275 L 125 230 Z" fill="purple"/> <path d="M230 230 A 45 45, 0, 1, 1, 275 275 L 275 230 Z" fill="blue"/></svg>這個HTML繪製了下面的幾幅圖：
從上面可以看出，這幾個參數其實是唯一確定一段圓弧需要的參數。這裡也看到，SVG中的圓弧比canvas中的複雜一些。
繪製三次貝茲路徑指令：C x1 y1, x2 y2, x y
三次貝茲路徑有兩個控制點，就是(x1,y1)和(x2,y2)，最後面(x,y)代表曲線的終點。體會下面的例子：
這個HTML片段繪製了下面的圖形：
<svg width="190px" height="160px"> <path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/> <path d="M70 10 C 70 20, 120 20, 120 10" stroke="black" fill="transparent"/> <path d="M130 10 C 120 20, 180 20, 170 10" stroke="black" fill="transparent"/> <path d="M10 60 C 20 80, 40 80, 50 60" stroke="black" fill="transparent"/> <path d="M70 60 C 70 80, 110 80, 110 60" stroke="black" fill="transparent"/> <path d="M130 60 C 120 80, 180 80, 170 60" stroke="black" fill="transparent"/> <path d="M10 110 C 20 140, 40 140, 50 110" stroke="black" fill="transparent"/> <path d="M70 110 C 70 140, 110 140, 110 110" stroke="black" fill="transparent"/> <path d="M130 110 C 120 140, 180 140, 170 110" stroke="black" fill="transparent"/></svg>
特殊版本的三次貝茲路徑：S x2 y2, x y
很多時候，為了繪製平滑的曲線，需要多次連續繪製曲線。這個時候，為了平滑過渡，常常第二個曲線的控制點是第一個曲線控制點在曲線另外一邊的映射點。這個時候可以使用這個簡化版本。這裡要注意的是，如果S指令前面沒有其他的S指令或C指令，這個時候會認為兩個控制點是一樣的，退化成二次方貝茲曲線的樣子；如果S指令是用在另外一個S指令或者C指令後面，這個時候後面這個S指令的第一個控制點會預設設定為前面的這個曲線的第二個控制點的一個映射點，體會一下：
<svg width="190px" height="160px"> <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/></svg>這個HTML片段繪製如形：
相對座標繪製指令
與絕對座標繪製指令的字母是一樣的，只不過全部是小寫表示。這組指令的參數中涉及座標的參數代表的是相對座標，意思就是參數代表的是從當前點到目標點的位移量，正數就代表向軸正向位移，負數代表向反向位移。不過對Z指令來說，大小寫沒有區別。
這裡要注意，絕對座標指令與相對座標指令是可以混合使用的。有時混合使用可以帶來更靈活的畫法。
SVG path繪製注意事項：
繪製帶孔的圖形時要注意：外層邊的繪製需要是逆時針順序的，裡面的洞的邊的順序必須是順時針的。只有這樣繪製的圖形填滿效果才會正確。
實用參考：
指令碼索引：http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx
開發中心：https://developer.mozilla.org/en/SVG
熱門參考：http://www.chinasvg.com/
官方文檔：http://www.w3.org/TR/SVG11/
本文出自：http://www.cnblogs.com/duanhuajian/archive/2013/07/31/3227410.html
由W3C夢想站：http://www.w3cdream.com/content-sort-5-article-479.html 聯合整理，如需轉載請註明出處
突襲HTML5之SVG 2D入門1 - SVG綜述////////////////zzzzzzzz
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
