概念:
SVG 是一種基于 XML 語法的圖像格式倒得，全稱是可縮放矢量圖（Scalable Vector Graphics）泻红。其他圖像格式都是基于像素處理的，SVG 則是屬于對(duì)圖像的形狀描述霞掺，所以它本質(zhì)上是文本文件谊路，體積較小，且不管放大多少倍都不會(huì)失真菩彬。SVG嚴(yán)格遵從XML語法缠劝，并用文本格式的描述性語言來描述圖像內(nèi)容。
注: 矢量圖位圖的區(qū)別
矢量圖也稱為面向?qū)ο蟮膱D像或繪圖圖像骗灶，繁體版本上稱之為向量圖惨恭，是計(jì)算機(jī)圖形學(xué)中用點(diǎn)、直線或者多邊形等基于數(shù)學(xué)方程的幾何圖元表示圖像耙旦。矢量圖形最大的優(yōu)點(diǎn)是無論放大脱羡、縮小或旋轉(zhuǎn)等不會(huì)失真；最大的缺點(diǎn)是難以表現(xiàn)色彩層次豐富的逼真圖像效果。
位圖亦稱為點(diǎn)陣圖像或柵格圖像锉罐，是由稱作像素（圖片元素）的單個(gè)點(diǎn)組成的帆竹。這些點(diǎn)可以進(jìn)行不同的排列和染色以構(gòu)成圖樣。當(dāng)放大位圖時(shí)脓规，可以看見賴以構(gòu)成整個(gè)圖像的無數(shù)單個(gè)方塊栽连。文件類型有.bmp、.pcx侨舆、.gif秒紧、.jpg、*.tif等
區(qū)別：
1挨下、位圖表現(xiàn)的色彩比較豐富熔恢，可以表現(xiàn)出色彩豐富的圖象。而矢量圖形色彩不豐富臭笆，無法表現(xiàn)逼真的實(shí)物绩聘，矢量圖常常用來表示標(biāo)識(shí)、圖標(biāo)耗啦、Logo等簡單直接的圖像。
2机杜、文件大兄慕病： 由于位圖表現(xiàn)的色彩比較豐富，所以占用的空間會(huì)很大椒拗，顏色信息越多似将，占用空間越大，圖像越清晰蚀苛，占用空間越大在验；由于矢量圖形表現(xiàn)的圖像顏色比較單一，所以所占用的空間會(huì)很小堵未。(不是對(duì)比同一文件的大小)
3腋舌、最大的區(qū)別，矢量圖形與分辨率無關(guān)渗蟹，可以將它縮放到任意大小和以任意分辨率在輸出設(shè)備上打印出來块饺，都不會(huì)影響清晰度，而位圖是由一個(gè)一個(gè)像素點(diǎn)產(chǎn)生雌芽，當(dāng)放大圖像時(shí)授艰，像素點(diǎn)也放大了，但每個(gè)像素點(diǎn)表示的顏色是單一的世落，所以在位圖放大后就會(huì)出現(xiàn)平時(shí)所見到的馬賽克狀淮腾。
對(duì)比圖：
1. 呈現(xiàn)方式
-
SVG 文件可以內(nèi)嵌到網(wǎng)頁中，成為 DOM 的一部分
<html> <head></head> <body> <svg id="mysvg" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 800 600" preserveAspectRatio="xMidYMid meet"> <circle id="mycircle" cx="400" cy="300" r="50" /> </svg> </body> </html> -
獨(dú)立SVG文件
把文本文件保存成以svg為擴(kuò)展名的文件，例如sun.svg谷朝，這樣的文件可以直接用瀏覽器打開瀏覽洲押，或者用<img>、<object>徘禁、<embed>诅诱、<iframe>等標(biāo)簽插入網(wǎng)頁。<img src="./img/circle.svg">或者
.icon { background: url("./img/circle.svg"); }
2. 文檔元素介紹
- svg標(biāo)簽
svg 代碼都放在頂層標(biāo)簽<svg>之中
viewBox屬性的值有四個(gè)數(shù)字送朱，分別是左上角的橫坐標(biāo)和縱坐標(biāo)娘荡、視口的寬度和高度
width屬性和height屬性： em,ex,px,pt,pc,cm,mm等長度還可以使用"%"
svg圖像默認(rèn)大小是300像素（寬） x 150像素（高）。
注：請(qǐng)注意開頭的部分xml聲明驶沼，與svg的命名空間xmlns炮沐、版本version等部分，主要是考慮兼容性的問題回怜；這些部分在HTML5中基本都可以不用寫了大年。<svg width="300" height="100"> <circle cx="100" cy="100" r="50" style="stroke: black; fill: red;"/> </svg>
（一）基本圖形元素
-
圓 circle
fill: 填充色
stroke: 描邊色
stroke-width：邊框粗細(xì)
stroke-linecap: 在開放子路徑被設(shè)置描邊的情況下，用于開放自路徑兩端的形狀
stroke-dasharray: 創(chuàng)建虛線<circle cx="50" cy="50" r="50" fill="red" stroke="rgb(0,0,0)" stroke-width="3" /> -
橢圓 ellipse
<ellipse cx="60" cy="60" ry="40" rx="20" stroke="black" stroke-width="5" fill="silver"/> -
直線 line
<line x1="0" y1="0" x2="200" y2="0" style="stroke:rgb(0,0,0);stroke-width:5" /> -
折線 polyline
<polyline points="3,3 30,28 3,53" fill="none" stroke="black" /> -
矩形 rect
<rect x="0" y="0" height="100" width="200" style="stroke: #70d5dd; fill: #dd524b" /> -
多邊形 polygon
<polygon fill="green" stroke="orange" stroke-width="1" points="830,130 900,130 900,200 830,200 850,150"/> -
路徑 path 是最通用玉雾，最強(qiáng)力的元素了翔试；使用這個(gè)元素你可以實(shí)現(xiàn)任何其他的圖形，不僅包括上面這些基本形狀复旬，也可以實(shí)現(xiàn)像貝塞爾曲線那樣的復(fù)雜形狀垦缅。這個(gè)元素控制位置和形狀的只有一個(gè)參數(shù)d。
d：一系列繪制指令和繪制參數(shù)(點(diǎn))組合成驹碍。繪制指令分為絕對(duì)坐標(biāo)指令和相對(duì)坐標(biāo)指令兩種壁涎，這兩種指令使用的字母是一樣的，就是大小寫不一樣志秃，絕對(duì)指令使用大寫字母怔球，坐標(biāo)也是絕對(duì)坐標(biāo)；相對(duì)指令使用對(duì)應(yīng)的小寫字母浮还，點(diǎn)的坐標(biāo)表示的都是偏移量竟坛。
M：移動(dòng)到（moveto）將畫筆移動(dòng)到點(diǎn)(x,y)
L：畫直線到（lineto） 畫筆從當(dāng)前的點(diǎn)繪制線段到點(diǎn)(x,y)
H: 畫筆從當(dāng)前的點(diǎn)繪制水平線段到點(diǎn)(x,y0)
V: 畫筆從當(dāng)前的點(diǎn)繪制豎直線段到點(diǎn)(x0,y)
A: 畫筆從當(dāng)前的點(diǎn)繪制一段圓弧到點(diǎn)(x,y)
C: 參數(shù): x1 y1, x2 y2, x y 畫筆從當(dāng)前的點(diǎn)繪制一段三次貝塞爾曲線到點(diǎn)(x,y)
S: 參數(shù): x2 y2, x y 特殊版本的三次貝塞爾曲線(省略第一個(gè)控制點(diǎn))
Q: 參數(shù): x1 y1, x y 繪制二次貝塞爾曲線到點(diǎn)(x,y)
T: 參數(shù): x1 y1, x y 繪制二次貝塞爾曲線到點(diǎn)(x,y)
Z：閉合路徑<path d=" M 18,3 L 46,3 L 46,40 L 61,40 L 32,68 L 3,40 L 18,40 Z "></path>備注： 貝塞爾曲線是概念？可以去看看相關(guān)文章碑定，本質(zhì)是給定幾個(gè)點(diǎn)（一般是4個(gè)）可以畫出一條曲線流码。
-
文本 text
<text x="50" y="25">Hello World</text>
（二）解釋性元素 desc元素與title元素
這兩個(gè)元素都是輔助性的元素，用于解釋相關(guān)情境延刘；它們的內(nèi)容都是文本漫试。當(dāng)SVG文檔被渲染的時(shí)候，這2個(gè)元素不會(huì)被渲染到圖形中碘赖。這個(gè)2個(gè)元素之間差別不是太大驾荣，title在有些實(shí)現(xiàn)中是作為提示信息出現(xiàn)的外构，所以通常title是放到父元素的第一個(gè)位置上。
（三）結(jié)構(gòu)元素
-
組合 g元素
g元素是一種容器播掷，它組合一組相關(guān)的圖形元素成為一個(gè)整體审编。這樣，我們就可以對(duì)這個(gè)整體進(jìn)行操作歧匈。這個(gè)元素通忱莩辏可以和desc和title元素配合使用，提供文檔的結(jié)構(gòu)信息件炉。結(jié)構(gòu)良好的文檔通晨本浚可讀性和渲染效率都不錯(cuò)。<svg width="300" height="100"> <g id="group"> <g id="myCircle1" fill="#53a600"> <text x="25" y="20">圓形</text> <circle cx="50" cy="50" r="20"/> </g> <g id="myCircle2" fill="#ccc"> <text x="25" y="20">圓形</text> <circle cx="50" cy="50" r="20"/> </g> </g> </svg>
注: g元素是可以嵌套, 組合起來的圖形元素就和單個(gè)的元素一樣斟冕，可以給id值口糕，這樣，需要的時(shí)候(例如動(dòng)畫和重用一組元素)只用引用這個(gè)id值就可以了磕蛇， 組合一組圖形元素可以統(tǒng)一設(shè)置這組元素的相關(guān)屬性(fill,stroke,transform等)景描。
- 模板 symbol元素
symbol元素用于定義圖形模板(模板可以包含很多圖形)，這個(gè)模板可以被use元素實(shí)例化秀撇。模板的功能與g元素很相似超棺，都是提供一組圖形對(duì)象，但是也有一些區(qū)別呵燕。與g元素不同的地方是：
1.symbol元素本身是不會(huì)被渲染的说搅，只有symbol模板的實(shí)例會(huì)被渲染。
2.symbol元素可以擁有屬性viewBox和preserveAspectRatio虏等，這些允許symbol縮放圖形元素。<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="5cm" height="5cm"> <desc>One group of two rectangles</desc> <symbol id="group1" fill="red"> <rect x="10" y="10" width="100" height="60"/> <rect x="120" y="10" width="50" height="50"/> </symbol> <use href="#group1"> </svg> - 定義 defs元素
SVG允許定義一組對(duì)象适肠，然后重用這組對(duì)象(注意霍衫，不僅僅是圖形對(duì)象)。最常見的例子如定義漸變色侯养，然后再其他的圖形對(duì)象中賦給fill屬性敦跌。漸變色定義的時(shí)候是不會(huì)渲染的，所以這類型的對(duì)象可以放到任何地方逛揩。重用對(duì)于圖形對(duì)象中也是經(jīng)常存在的柠傍，而且我們也不希望定義的時(shí)候直接渲染，而是想在引用的地方渲染辩稽，這個(gè)可以用defs元素實(shí)現(xiàn)
定義漸變色：
圖形：<svg width="100" height="200"> <defs> <linearGradient id="Gradient01"> <stop offset="20%" stop-color="#39F" /> <stop offset="90%" stop-color="#F3F" /> </linearGradient> </defs> <rect x="1cm" y="1cm" width="6cm" height="1cm" fill="url(#Gradient01)" /> </svg><svg width="100" height="200"> <defs> <rect id="MyRect" width="60" height="10"/> </defs> <use x="20" y="10" href="#MyRect" /> </svg>
注意區(qū)別：其實(shí)作為容器對(duì)象的g元素惧笛、symbol元素、defs元素都不同程度上提供了重用的作用逞泄，只不過每個(gè)元素的特性可能少許不同：比如g元素是直接渲染的患整，symbol和defs不會(huì)直接渲染拜效，symbol含有viewBox屬性，會(huì)創(chuàng)建新的視窗各谚。
- use 復(fù)制一個(gè)形狀
href屬性指定所要復(fù)制的節(jié)點(diǎn)紧憾，x屬性和y屬性是<use>左上角的坐標(biāo)(在原圖基礎(chǔ)上的平移距離)。另外昌渤，還可以指定width和height坐標(biāo)赴穗。<svg width="100" height="100"> <circle id="myCircle" cx="5" cy="5" r="4"/> <use href="#myCircle" x="10" y="0" fill="blue" /> <use href="#myCircle" x="20" y="0" fill="white" stroke="blue" /> </svg>
漸變?cè)亍㈥幱鞍蛳ⅰ?dòng)畫等其他元素見下章
3般眉、渲染順序
SVG是嚴(yán)格按照定義元素的順序來渲染的，這個(gè)與HTML靠z-index值來控制分層不一樣履婉。在SVG中煤篙，寫在前面的元素先被渲染，寫在后面的元素后被渲染毁腿。后渲染的元素會(huì)覆蓋前面的元素辑奈，雖然有時(shí)候受透明度影響，看起來不是被覆蓋的已烤，但是SVG確實(shí)是嚴(yán)格按照先后順序來渲染的鸠窗。
To be continued...
