Perl畫(huà)圖：SVG基礎篇（附資料下載）

記得當年做技術(shù)時(shí)，經(jīng)常會(huì )遇到老師要改圖形格式的問(wèn)題，如，BMP格式、WMF格式、TIFF格式、JPEG格式、SVG格式、AI格式、PNG格式、GIF格式等等，圖形格式太多，搞得我“老虎老鼠，傻傻分不清楚~~”，秉承“知其然知其所以然”的科研心態(tài)，我決定從基礎的開(kāi)始學(xué)起。

童鞋們,咱們走起……？

一、什么是SVG？
svg的英文全稱(chēng)為Scalable Vector Graphics，意思為可縮放的矢量圖形。SVG 使用 XML 格式定義圖形。

二、SVG的優(yōu)勢
1. SVG 與 JPEG 和 GIF 圖像比起來(lái)，尺寸更小，且可壓縮性更強；
2. SVG 圖像可在任何的分辨率下被高質(zhì)量地打??；
3. SVG 可在圖像質(zhì)量不下降的情況下被放大；
4. SVG 易讀取和修改。

三、SVG預定義的元素介紹
形狀元素:

非形狀元素:

四、SVG的共有屬性

五、圖形代碼示例
矩形 <rect>
<rect> 標簽用于創(chuàng )建矩形和圓角矩形

（x，y)是矩形左上角坐標，默認是（0，0）；
（width，height）是矩形的寬度和高度；
（rx，ry）是矩形圓角的水平半徑和垂直半徑。
代碼示例：

代碼示例：

圓形 <circle>
<circle> 標簽用于創(chuàng )建一個(gè)圓
（cx，cy）是圓心坐標，默認是（0，0）；
r 是圓的半徑。
代碼示例：

橢圓 <ellipse>
<ellipse> 標簽用于創(chuàng )建一個(gè)橢圓；
（cx，cy）是橢圓中心點(diǎn)的坐標，默認是（0，0）；
（rx，ry）是水平半徑和垂直半徑。
代碼示例：

線(xiàn) <line>
<line> 標簽用于創(chuàng )建一個(gè)線(xiàn)條；
（x1，y1）是線(xiàn)條的起始坐標，默認是（0，0）；
（x2，y2）是線(xiàn)條的終止坐標，默認是（0，0）。
代碼示例：

折線(xiàn) <polyline>
<polyline> 標簽用于創(chuàng )建任何只有直線(xiàn)的形狀；
points 屬性定義折線(xiàn)每個(gè)點(diǎn)的坐標（x，y），用空格分隔每個(gè)點(diǎn)。
points的定義形式有兩種：
points=”x1,y1 x2,y2 ……”
points=”x1 y1 x2 y2 ……”
代碼示例：

多邊形 <polygon>
<polygon> 標簽用來(lái)創(chuàng )建含有不少于三個(gè)邊的圖形。多邊形是由直線(xiàn)組成，其形狀是“封閉”的（所有的線(xiàn)條 連接起來(lái)）。
points 屬性定義折線(xiàn)每個(gè)點(diǎn)的坐標（x，y），用空格分隔每個(gè)點(diǎn)，頭尾自動(dòng)相連。
points的定義形式有兩種：
points=“x1,y1 x2,y2 ……”
points=“x1 y1 x2 y2 ……”
fill 屬性和折線(xiàn)的fill是一樣的，填充的是首尾相連后的形狀的內容
代碼示例：

路徑 <path>
<path> 標簽用于定義一個(gè)路徑
d用來(lái)定義每個(gè)關(guān)鍵點(diǎn)的路徑數據；以下標記用來(lái)修飾路徑數據，所有命令均允許小寫(xiě)字母。大寫(xiě)表示絕對定位，小寫(xiě)表示相對定位
直線(xiàn)命令
M = moveto(M X,Y)
需要兩個(gè)參數，分別是需要移動(dòng)到的點(diǎn)的x軸和y軸的坐標。類(lèi)似于移動(dòng)畫(huà)筆的位置

L = lineto(L X,Y)
需要兩個(gè)參數，分別是一個(gè)點(diǎn)的x軸和y軸坐標，L命令將會(huì )在當前位置和新位置（L前面畫(huà)筆所在的點(diǎn)）之間畫(huà)一條線(xiàn)段

H = horizontal lineto(H X)
畫(huà)水平線(xiàn)到指定的X坐標位置

V = vertical lineto(V Y)
畫(huà)垂直線(xiàn)到指定的Y坐標位置
H,V這兩個(gè)命令都只帶一個(gè)參數，標明在x軸或y軸移動(dòng)到的位置，因為它們都只在坐標軸的一個(gè)方向上移動(dòng)。

C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY)
(x,y)表示的是曲線(xiàn)的終點(diǎn)，(x1,y1)是起點(diǎn)的控制點(diǎn)，(x2,y2)是終點(diǎn)的控制點(diǎn)?？刂泣c(diǎn)描述的是曲線(xiàn)起始點(diǎn)的斜率，曲線(xiàn)上各個(gè)點(diǎn)的斜率，是從起點(diǎn)斜率到終點(diǎn)斜率的漸變過(guò)程。

有點(diǎn)抽象，可以看一下例子
建議自己寫(xiě)下代碼看看效果，代碼示例：

S = smooth curveto(S X2,Y2,ENDX,ENDY)
當一個(gè)點(diǎn)某一側的控制點(diǎn)是它另一側的控制點(diǎn)的對稱(chēng)（以保持斜率不變），可以使用S命令。簡(jiǎn)寫(xiě)的貝塞爾曲線(xiàn)命令。
如果S命令跟在一個(gè)C命令或者另一個(gè)S命令的后面，它的第一個(gè)控制點(diǎn)，就會(huì )被假設成前一個(gè)控制點(diǎn)的對稱(chēng)點(diǎn)。如果S命令單獨使用，前面沒(méi)有C命令或者另一個(gè)S命令，那么它的兩個(gè)控制點(diǎn)就會(huì )被假設為同一個(gè)點(diǎn)。

繼續扔一個(gè)栗子來(lái)看看。
【注意】藍色部分是對稱(chēng)的控制點(diǎn)，代碼示例：

Q = quadratic Bézier curve(Q X,Y,ENDX,ENDY)
二次貝塞爾曲線(xiàn)Q，只需要一個(gè)控制點(diǎn)，用來(lái)確定起點(diǎn)和終點(diǎn)的曲線(xiàn)斜率。因此它需要兩組參數，控制點(diǎn)和終點(diǎn)坐標。

繼續例子，代碼示例如下：
（注，代碼中表示點(diǎn)的位置沒(méi)寫(xiě)）

效果圖，path是黑色曲線(xiàn)

T = smooth quadratic Bézier curveto(T ENDX,ENDY)
與S命令相似，是Q命令的簡(jiǎn)寫(xiě)命令。與S命令相似，T也會(huì )通過(guò)前一個(gè)控制點(diǎn)，推斷出一個(gè)新的控制點(diǎn)。這意味著(zhù)，在你的第一個(gè)控制點(diǎn)后面，可以只定義終點(diǎn)，就創(chuàng )建出一個(gè)相當復雜的曲線(xiàn)。
【需要注意】，T命令前面必須是一個(gè)Q命令，或者是另一個(gè)T命令，才能達到這種效果。如果T單獨使用，那么控制點(diǎn)就會(huì )被認為和終點(diǎn)是同一個(gè)點(diǎn)，所以畫(huà)出來(lái)的將是一條直線(xiàn)。

代碼示例：

效果圖【注意藍色部分是自動(dòng)補全對稱(chēng)的】

A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y)

弧線(xiàn)

Z = closepath(Z)

關(guān)閉路徑

文本 <text>

（x，y）是文本左下角的坐標；

dx（dx1，……）是文本相對基點(diǎn)x向右偏移的距離；

dy（dy1，……）是文本相對基點(diǎn)y向下偏移的距離。

代碼示例:

組<g>

<g> 標簽是用于把所有相關(guān)元素進(jìn)行組合的容器元素
在<g> id 用來(lái)設置該組的名稱(chēng)；
fill 用來(lái)設置該組所有成員的默認填充顏色；
opacity 用來(lái)設置該組所有成員的默認不透明度。

以上就是perl用來(lái)畫(huà)svg的基本知識
你學(xué)會(huì )了嗎？

大項目事業(yè)部 周 陽(yáng)丨文案
唐 娟 | 審核
圖片來(lái)自網(wǎng)絡(luò )，侵刪