記得當(dāng)年做技術(shù)時，經(jīng)常會遇到老師要改圖形格式的問題，如，BMP格式、WMF格式、TIFF格式、JPEG格式、SVG格式、AI格式、PNG格式、GIF格式等等，圖形格式太多，搞得我“老虎老鼠，傻傻分不清楚~~”，秉承“知其然知其所以然”的科研心態(tài)，我決定從基礎(chǔ)的開始學(xué)起。
童鞋們,咱們走起……？
一、什么是SVG？
svg的英文全稱為Scalable Vector Graphics，意思為可縮放的矢量圖形。SVG 使用 XML 格式定義圖形。
二、SVG的優(yōu)勢
1. SVG 與 JPEG 和 GIF 圖像比起來，尺寸更小，且可壓縮性更強(qiáng)；
2. SVG 圖像可在任何的分辨率下被高質(zhì)量地打??；
3. SVG 可在圖像質(zhì)量不下降的情況下被放大；
4. SVG 易讀取和修改。
三、SVG預(yù)定義的元素介紹
形狀元素:
非形狀元素:
四、SVG的共有屬性
五、圖形代碼示例
矩形 <rect>
<rect> 標(biāo)簽用于創(chuàng)建矩形和圓角矩形
（x，y)是矩形左上角坐標(biāo)，默認(rèn)是（0，0）；
（width，height）是矩形的寬度和高度；
（rx，ry）是矩形圓角的水平半徑和垂直半徑。
代碼示例：
代碼示例：
圓形 <circle>
<circle> 標(biāo)簽用于創(chuàng)建一個圓
（cx，cy）是圓心坐標(biāo)，默認(rèn)是（0，0）；
r 是圓的半徑。
代碼示例：
橢圓 <ellipse>
<ellipse> 標(biāo)簽用于創(chuàng)建一個橢圓；
（cx，cy）是橢圓中心點的坐標(biāo)，默認(rèn)是（0，0）；
（rx，ry）是水平半徑和垂直半徑。
代碼示例：
線 <line>
<line> 標(biāo)簽用于創(chuàng)建一個線條；
（x1，y1）是線條的起始坐標(biāo)，默認(rèn)是（0，0）；
（x2，y2）是線條的終止坐標(biāo)，默認(rèn)是（0，0）。
代碼示例：
折線 <polyline>
<polyline> 標(biāo)簽用于創(chuàng)建任何只有直線的形狀；
points 屬性定義折線每個點的坐標(biāo)（x，y），用空格分隔每個點。
points的定義形式有兩種：
points=”x1,y1 x2,y2 ……”
points=”x1 y1 x2 y2 ……”
代碼示例：
多邊形 <polygon>
<polygon> 標(biāo)簽用來創(chuàng)建含有不少于三個邊的圖形。多邊形是由直線組成，其形狀是“封閉”的（所有的線條 連接起來）。
points 屬性定義折線每個點的坐標(biāo)（x，y），用空格分隔每個點，頭尾自動相連。
points的定義形式有兩種：
points=“x1,y1 x2,y2 ……”
points=“x1 y1 x2 y2 ……”
fill 屬性和折線的fill是一樣的，填充的是首尾相連后的形狀的內(nèi)容
代碼示例：
路徑 <path>
<path> 標(biāo)簽用于定義一個路徑
d用來定義每個關(guān)鍵點的路徑數(shù)據(jù)；以下標(biāo)記用來修飾路徑數(shù)據(jù)，所有命令均允許小寫字母。大寫表示絕對定位，小寫表示相對定位
直線命令
M = moveto(M X,Y)
需要兩個參數(shù)，分別是需要移動到的點的x軸和y軸的坐標(biāo)。類似于移動畫筆的位置
L = lineto(L X,Y)
需要兩個參數(shù)，分別是一個點的x軸和y軸坐標(biāo)，L命令將會在當(dāng)前位置和新位置（L前面畫筆所在的點）之間畫一條線段
H = horizontal lineto(H X)
畫水平線到指定的X坐標(biāo)位置
V = vertical lineto(V Y)
畫垂直線到指定的Y坐標(biāo)位置
H,V這兩個命令都只帶一個參數(shù)，標(biāo)明在x軸或y軸移動到的位置，因為它們都只在坐標(biāo)軸的一個方向上移動。
C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY)
(x,y)表示的是曲線的終點，(x1,y1)是起點的控制點，(x2,y2)是終點的控制點?？刂泣c描述的是曲線起始點的斜率，曲線上各個點的斜率，是從起點斜率到終點斜率的漸變過程。
有點抽象，可以看一下例子
建議自己寫下代碼看看效果，代碼示例：
S = smooth curveto(S X2,Y2,ENDX,ENDY)
當(dāng)一個點某一側(cè)的控制點是它另一側(cè)的控制點的對稱（以保持斜率不變），可以使用S命令。簡寫的貝塞爾曲線命令。
如果S命令跟在一個C命令或者另一個S命令的后面，它的第一個控制點，就會被假設(shè)成前一個控制點的對稱點。如果S命令單獨使用，前面沒有C命令或者另一個S命令，那么它的兩個控制點就會被假設(shè)為同一個點。
繼續(xù)扔一個栗子來看看。
【注意】藍(lán)色部分是對稱的控制點，代碼示例：
Q = quadratic Bézier curve(Q X,Y,ENDX,ENDY)
二次貝塞爾曲線Q，只需要一個控制點，用來確定起點和終點的曲線斜率。因此它需要兩組參數(shù)，控制點和終點坐標(biāo)。
繼續(xù)例子，代碼示例如下：
（注，代碼中表示點的位置沒寫）
效果圖，path是黑色曲線
T = smooth quadratic Bézier curveto(T ENDX,ENDY)
與S命令相似，是Q命令的簡寫命令。與S命令相似，T也會通過前一個控制點，推斷出一個新的控制點。這意味著，在你的第一個控制點后面，可以只定義終點，就創(chuàng)建出一個相當(dāng)復(fù)雜的曲線。
【需要注意】，T命令前面必須是一個Q命令，或者是另一個T命令，才能達(dá)到這種效果。如果T單獨使用，那么控制點就會被認(rèn)為和終點是同一個點，所以畫出來的將是一條直線。
代碼示例：
效果圖【注意藍(lán)色部分是自動補(bǔ)全對稱的】
A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y)
弧線
Z = closepath(Z)
關(guān)閉路徑
（x，y）是文本左下角的坐標(biāo)；
dx（dx1，……）是文本相對基點x向右偏移的距離；
dy（dy1，……）是文本相對基點y向下偏移的距離。
代碼示例:
組<g>
<g> 標(biāo)簽是用于把所有相關(guān)元素進(jìn)行組合的容器元素
在<g> id 用來設(shè)置該組的名稱；
fill 用來設(shè)置該組所有成員的默認(rèn)填充顏色；
opacity 用來設(shè)置該組所有成員的默認(rèn)不透明度。
以上就是perl用來畫svg的基本知識
你學(xué)會了嗎？
大項目事業(yè)部 周 陽丨文案
唐 娟 | 審核
圖片來自網(wǎng)絡(luò)，侵刪
京公網(wǎng)安備 11011302003368號