svg 是圖片的一種類型，基于xml 語言實(shí)現(xiàn)，和 png、jpg、webp 相比具有如下特點(diǎn)。
- 矢量圖，可以無限放大而不失真；
- 體積??；
為什么svg圖片類型具備上面的特點(diǎn)，而其它的圖片格式不具備呢？這一切都因?yàn)閟vg的原理是基于xml（可擴(kuò)展標(biāo)記語言）語言實(shí)現(xiàn)的。
通過瀏覽器控制臺(tái)審閱svg類型的圖片可以發(fā)現(xiàn)，其本質(zhì)上是一堆代碼，即通過xml語言描繪出來的。svg圖片的生成是通過xml提供的基本的線條、形狀、顏色、模糊效果等組合而成的。基于此則不難理解為什么svg圖片是矢量圖和體積小的特點(diǎn)了。
svg 代碼繪制簡(jiǎn)介
svg繪制和canvas畫圖類似，首先需要提供一張一定寬高的svg畫布，圖形線條色塊都是于此未基礎(chǔ)來繪制的。
常用全局屬性
- width
- height
- fill 填充顏色
- stroke 元素輪廓設(shè)定
- opacity 定義元素透明度
- rx、ry 定義元素圓角
常用形狀
- rect 矩形 x 屬性定義矩形距離窗口左側(cè)的距離，y 屬性定義矩形距離窗口頂端的距離
- circle 圓 cx、cy 定義圓心坐標(biāo)，r定義圓半徑
- ellipse 橢圓 cx、cy 定義圓心坐標(biāo)，rx定義水平半徑，ry定義垂直半徑
- line 直線 (x1, y1) 定義X軸Y軸直線開始的坐標(biāo)，(x2, y2)定義X軸Y軸直線的結(jié)束坐標(biāo)
- polygon 多邊形 point: [] 定義多邊形頂點(diǎn)坐標(biāo)
- polyline 折線 point: [] 定義折線頂點(diǎn)
- path 路徑繪制 M = moveto L = lineto 例：<path d="M250 150 L150 350 L350 350 Z" />
常用元素
- text 文本標(biāo)識(shí)，tspan 文本子元素， textPath 帶弧線的文本
- filter、defs 用來存放濾鏡等效果
- linearGradient 線性漸變 必須定義在defs內(nèi)部，每種顏色通過top標(biāo)簽來規(guī)定 ，offset 定義漸變的開始結(jié)束位置， id屬性引用標(biāo)識(shí)
- radialGradient 放射性漸變 (fx, fy ) 內(nèi)層圓心坐標(biāo)， (cx, cy) 外層圓心坐標(biāo)， r 漸變半徑
- g 用來組合對(duì)象的容器，添加到g元素的屬性會(huì)被其所有的子元素繼承
- 濾鏡：feGaussianBlur...等
