這是一個(gè)很長(zhǎng)的故事
其實(shí)沒(méi)有很長(zhǎng),所以從頭講起够坐。
svg的全稱是可縮放
矢量
圖形
(Scalable Vector Graphics,SVG),是一種用來(lái)描述二維
矢量圖形的 XML
標(biāo)記語(yǔ)言茫虽。
- 通過(guò)設(shè)定svg圖片的width刊苍, height,viewbox, svg可以任意縮放濒析。
- svg是矢量的正什,所以在任意縮放后不必?fù)?dān)心分辨率。
- 在icon界号杏,svg開(kāi)始慢慢代替圖片婴氮。
畫(huà)一幅裊裊炊煙
svg的畫(huà)布和Canvas的差不多,以頁(yè)面的左上角為(0盾致,0)坐標(biāo)點(diǎn)主经,坐標(biāo)以像素為單位,x軸向右庭惜,y軸向下罩驻。
1. 畫(huà)炊煙
<svg version="1.1" width='300' height='300' xmlns='http://www.w3.org/2000/svg'>
<ellipse cx="241" cy="25" rx="38" ry="9" stroke="black" fill="transparent" stroke-width="5"/>
<ellipse cx="156" cy="61" rx="30" ry="12" stroke="black" fill="transparent" stroke-width="5"/>
<ellipse cx="90" cy="103" rx="30" ry="16" stroke="black" fill="transparent" stroke-width="5"/>
</svg>
ellipse 是用作畫(huà)橢圓,屬性包括
屬性名 | 全稱 | 意義 |
---|---|---|
cx | The x position of the center of the ellipse | 橢圓中心的x位置 |
cy | The y position of the center of the ellipse | 橢圓中心的y位置 |
rx | The x radius of the ellipse | 橢圓的x半徑 |
ry | The y radius of the ellipse | 橢圓的y半徑 |
circle 用作繪制圓形护赊。初中的數(shù)學(xué)告訴我們惠遏,圓是一種特殊形狀的橢圓,是rx骏啰,ry相等的橢圓节吮。所以屬性比橢圓少一個(gè)。
屬性名 | 全稱 | 意義 |
---|---|---|
cx | The x position of the center of the ellipse | 圓心的x位置 |
cy | The y position of the center of the ellipse | 圓心的y位置 |
r | The x radius of the ellipse | 圓的半徑 |
2. 畫(huà)煙囪
<svg version="1.1" width='300' height='300' xmlns='http://www.w3.org/2000/svg'>
<ellipse cx="241" cy="25" rx="38" ry="9" stroke="black" fill="transparent" stroke-width="5"/>
<ellipse cx="156" cy="61" rx="30" ry="12" stroke="black" fill="transparent" stroke-width="5"/>
<ellipse cx="90" cy="103" rx="30" ry="16" stroke="black" fill="transparent" stroke-width="5"/>
+ <rect x="60" y="155" rx="5" ry="5" width="33" height="81" stroke="black" fill="transparent" stroke-width="5"/>
</svg>
rect 是用作畫(huà)橢圓判耕,屬性包括
屬性名 | 全稱 | 意義 |
---|---|---|
x | The x position of the top left corner of the rectangle | 矩形左上角 的x位置 |
y | The y position of the top left corner of the rectangle | 矩形左上角 的y位置 |
rx | The x radius of the corners of the rectangle | 圓角的x方位的半徑 |
ry | The y radius of the corners of the rectangle | 圓角的y方位的半徑 |
width | The width of the rectangle | 矩形的寬度 |
height | The height of the rectangle | 矩形的高度 |
3.畫(huà)門(mén)腳的線
<svg version="1.1" width='500' height='500' xmlns='http://www.w3.org/2000/svg'>
<ellipse cx="241" cy="25" rx="38" ry="9" stroke="black" fill="transparent" stroke-width="5"/>
<ellipse cx="156" cy="61" rx="30" ry="12" stroke="black" fill="transparent" stroke-width="5"/>
<ellipse cx="90" cy="103" rx="30" ry="16" stroke="black" fill="transparent" stroke-width="5"/>
<rect x="60" y="155" rx="5" ry="5" width="33" height="81" stroke="black" fill="transparent" stroke-width="5"/>
<line x1="4" y1="360" x2="310" y2="360" stroke="black" stroke-width="5" />
</svg>
line 是用作畫(huà)直線课锌,必須屬性包括
屬性名 | 全稱 | 意義 |
---|---|---|
x1 | The x position of point 1 | 起點(diǎn)的x位置 |
y1 | The y position of point 1 | 起點(diǎn)的y位置 |
x2 | The x position of point 2 | 終點(diǎn)的x位置 |
y2 | The y position of point 2 | 終點(diǎn)的y位置 |
stroke | The color used to paint the outline of the shape | 線段顏色 |
line 必須設(shè)定stroke屬性,設(shè)定直線的顏色祈秕。否則直線是不可見(jiàn)的渺贤。
4. 畫(huà)房子
<svg version="1.1" width='500' height='500' xmlns='http://www.w3.org/2000/svg'>
<ellipse cx="241" cy="25" rx="38" ry="9" stroke="black" fill="transparent" stroke-width="5"/>
<ellipse cx="156" cy="61" rx="30" ry="12" stroke="black" fill="transparent" stroke-width="5"/>
<ellipse cx="90" cy="103" rx="30" ry="16" stroke="black" fill="transparent" stroke-width="5"/>
<line x1="4" y1="360" x2="310" y2="360" stroke="black" stroke-width="5" />
<polyline points="60 213, 10 260, 190 267, 230 186, 93 186, 10 260, 30, 261, 35 360, 70 360, 70 300, 100 300, 100 360, 180 360, 180 267, 180 360, 250 345, 250 250, 250 270, 270 250, 232 186," fill="none" stroke="black" stroke-width="5" />
<rect x="60" y="155" rx="5" ry="5" width="33" height="81" stroke="black" fill="#fff" stroke-width="5"/>
</svg>
polyline用來(lái)畫(huà)一組連接在一起的直線。屬性包括:
屬性名 | 全稱 | 意義 |
---|---|---|
points | This attribute defines the list of points (pairs of x,y absolute coordinates) required to draw the polyline | 點(diǎn)集數(shù)列请毛。每個(gè)數(shù)字用空白志鞍、逗號(hào)、終止命令符或者換行符分隔開(kāi)方仿。每個(gè)點(diǎn)必須包含2個(gè)數(shù)字固棚,一個(gè)是x坐標(biāo),一個(gè)是y坐標(biāo)仙蚜。所以點(diǎn)列表 (0,0), (1,1) 和(2,2)可以寫(xiě)成這樣:“0 0, 1 1, 2 2”此洲。 |
注意:react移動(dòng)到最后,這是因?yàn)樵氐匿秩卷樞蛭邸VG文件全局有效的規(guī)則是“后來(lái)居上”呜师,越后面的元素越可見(jiàn)。所以讓煙囪覆蓋在房子上贾节。
5. 畫(huà)窗戶
<svg version="1.1" width='500' height='500' xmlns='http://www.w3.org/2000/svg'>
<ellipse cx="241" cy="25" rx="38" ry="9" stroke="black" fill="transparent" stroke-width="5"/>
<ellipse cx="156" cy="61" rx="30" ry="12" stroke="black" fill="transparent" stroke-width="5"/>
<ellipse cx="90" cy="103" rx="30" ry="16" stroke="black" fill="transparent" stroke-width="5"/>
<line x1="4" y1="360" x2="310" y2="360" stroke="black" stroke-width="5" />
<polyline points="60 213, 10 260, 190 267, 230 186, 93 186, 10 260, 30, 261, 35 360, 70 360, 70 300, 100 300, 100 360, 180 360, 180 267, 180 360, 250 345, 250 250, 250 270, 270 250, 232 186," fill="none" stroke="black" stroke-width="5" />
<rect x="60" y="155" rx="5" ry="5" width="33" height="81" stroke="black" fill="#fff" stroke-width="5"/>
<polygon points="203 273, 203 314, 237 304, 237 265" fill="none" stroke="black" stroke-width="5"/>
</svg>
polygon 和polyline很像汁汗,區(qū)別是polygon在最后一個(gè)點(diǎn)處自動(dòng)回到第一個(gè)點(diǎn)衷畦。屬性包括:
屬性名 | 全稱 | 意義 |
---|---|---|
points | This attribute defines the list of points (pairs of x,y absolute coordinates) required to draw the polyline | 點(diǎn)集數(shù)列。每個(gè)數(shù)字用空白知牌、逗號(hào)祈争、終止命令符或者換行符分隔開(kāi)。每個(gè)點(diǎn)必須包含2個(gè)數(shù)字角寸,一個(gè)是x坐標(biāo)菩混,一個(gè)是y坐標(biāo)。所以點(diǎn)列表 (0,0), (1,1) 和(2,2)可以寫(xiě)成這樣:“0 0, 1 1, 2 2”扁藕。 |
6. 畫(huà)樹(shù)
<svg version="1.1" width='500' height='500' xmlns='http://www.w3.org/2000/svg'>
<ellipse cx="241" cy="25" rx="38" ry="9" stroke="black" fill="transparent" stroke-width="5"/>
<ellipse cx="156" cy="61" rx="30" ry="12" stroke="black" fill="transparent" stroke-width="5"/>
<ellipse cx="90" cy="103" rx="30" ry="16" stroke="black" fill="transparent" stroke-width="5"/>
<line x1="4" y1="360" x2="310" y2="360" stroke="black" stroke-width="5" />
<path d="M302 162 Q 200 300, 300 300 Q 400 300,300 162 M 294 345 Q 300 340,300 220 M 300 275 Q 300 255, 280 230 M 300 275, Q 300 275, 324 242" stroke="black" fill="#fff" stroke-width="5" />
<line x1="250" y1="345" x2="407" y2="345" stroke="black" stroke-width="5" />
<polyline points="60 213, 10 260, 190 267, 230 186, 93 186, 10 260, 30, 261, 35 360, 70 360, 70 300, 100 300, 100 360, 180 360, 180 267, 180 360, 250 345, 250 250, 250 270, 270 250, 232 186," fill="#fff" stroke="black" stroke-width="5" />
<rect x="60" y="155" rx="5" ry="5" width="33" height="81" stroke="black" fill="#fff" stroke-width="5"/>
<polygon points="203 273, 203 314, 237 304, 237 265" fill="none" stroke="black" stroke-width="5"/>
</svg>
path 有很強(qiáng)大的功能沮峡,支持畫(huà)直線,曲線纹磺。雖然屬性只有一個(gè)d帖烘,但是d里值大有學(xué)問(wèn), 它是一個(gè)“命令+參數(shù)”的序列橄杨。
屬性名 | 全稱 | 意義 |
---|---|---|
d | A list of points and other information about how to draw the path. | 一個(gè)點(diǎn)集數(shù)列以及其它關(guān)于如何繪制路徑的信息秘症。 |
直線命令名 | 全稱 | 例子 | 意義 |
---|---|---|---|
M | Move to | M x y | 移動(dòng)到點(diǎn)(x,y),不畫(huà)線 |
L | Line to | L x y | 將會(huì)在當(dāng)前位置和新位置(L前面畫(huà)筆所在的點(diǎn))之間畫(huà)一條線段 |
H | Horizontal lines | H x | 繪制平行線 |
V | Vertical lines | V x | 繪制垂直線 |
Z | Close Path | Z | 從當(dāng)前點(diǎn)畫(huà)一條直線到路徑的起點(diǎn) |
曲線命令名 | 全稱 | 例子 | 意義 |
---|---|---|---|
C | Cubic Bézier curves | C x1 y1, x2 y2, x y | 三次貝塞爾曲線, (x y)是重點(diǎn)坐標(biāo)式矫,其余是控制點(diǎn)坐標(biāo) |
S | A shortcut version of the cubic Bézier | S x2 y2, x y | 1.如果S命令跟在一個(gè)C命令或者另一個(gè)S命令 的后面乡摹,它的第一個(gè)控制點(diǎn),就會(huì)被假設(shè)成前一個(gè)控制點(diǎn)的對(duì)稱點(diǎn) 采转。2. 如果S命令單獨(dú)使用 聪廉,前面沒(méi)有C命令或者另一個(gè)S命令,那么它的兩個(gè)控制點(diǎn)就會(huì)被假設(shè)為同一個(gè)點(diǎn) 故慈。 3.(x y)是重點(diǎn)坐標(biāo)板熊,其余是控制點(diǎn)坐標(biāo) |
Q | Quadratic Bézier curves | Q x1 y1, x y | 二次貝塞爾曲線, (x y)是重點(diǎn)坐標(biāo)察绷,其余是控制點(diǎn)坐標(biāo) |
T | A shortcut version of the quadratic Bézier | T x y | 1.T命令跟著一個(gè)Q命令干签,或者是另一個(gè)T命令 ,通過(guò)前一個(gè)控制點(diǎn)拆撼,推斷出一個(gè)新的控制點(diǎn)容劳,創(chuàng)建出一個(gè)相當(dāng)復(fù)雜的曲線 。2.如果T單獨(dú)使用 闸度,那么控制點(diǎn)就會(huì)被認(rèn)為和終點(diǎn)是同一個(gè)點(diǎn)竭贩,所以畫(huà)出來(lái)的將是一條直線 。3. (x y)是重點(diǎn)坐標(biāo) |
A | Arcs | A rx ry x-axis-rotation large-arc-flag sweep-flag x y | (rx,ry)是弧形x軸半徑和y軸半徑 莺禁,x-axis-rotation是x軸旋轉(zhuǎn)角度 留量,large-arc-flag是角度大小 ,決定弧線是大于還是小于180度,0表示小角度弧肪获,1表示大角度弧寝凌。 sweep-flag是弧線方向 柒傻,0表示從起點(diǎn)到終點(diǎn)沿逆時(shí)針畫(huà)弧孝赫,1表示從起點(diǎn)到終點(diǎn)沿順時(shí)針畫(huà)弧 |
注意:
1.每一個(gè)命令都有兩種表示方式,一種是用大寫(xiě)字母红符,表示采用絕對(duì)定位青柄。另一種是用小寫(xiě)字母,表示采用相對(duì)定位预侯。Z 命令除外致开,不區(qū)分大小寫(xiě)。
2.貝塞爾曲線的內(nèi)容可以參考wiki
終于介紹完所有的元素了萎馅。
VSCODE 插件
SVG
這個(gè)插件提供了輸入提示双戳,圖片預(yù)覽(Preview), 壓縮(Minify)這幾個(gè)功能糜芳。壓縮功能會(huì)將從sketch導(dǎo)出的svg文件中飒货,例如id等內(nèi)容去除,壓縮大小峭竣。
SVG viewer
這個(gè)插件也提供了圖片預(yù)覽功能塘辅,并且在vs code設(shè)置中設(shè)置
"svgviewer.enableautopreview": true,
可以自動(dòng)打開(kāi)svg圖片。
本集內(nèi)容包括:基本元素的介紹皆撩,這樣當(dāng)我們看到svg時(shí)扣墩,可以了解這常常的字符串是說(shuō)了什么。再來(lái)介紹了vscode中插件扛吞,方便我們?cè)陂_(kāi)發(fā)中可以直觀的看到svg圖形呻惕。
下集預(yù)告: 裝飾房子
參考:
Things you need to know about working with SVG in VS Code