這是一個(gè)很長的故事
其實(shí)沒有很長，所以從頭講起。
svg的全稱是可縮放 矢量 圖形（Scalable Vector Graphics，SVG)，是一種用來描述二維矢量圖形的 XML 標(biāo)記語言。
- 通過設(shè)定svg圖片的width， height，viewbox, svg可以任意縮放。
- svg是矢量的，所以在任意縮放后不必?fù)?dān)心分辨率。
- 在icon界，svg開始慢慢代替圖片。
畫一幅裊裊炊煙
裊裊炊煙
svg的畫布和Canvas的差不多，以頁面的左上角為（0，0）坐標(biāo)點(diǎn)，坐標(biāo)以像素為單位，x軸向右，y軸向下。
1. 畫炊煙
<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 是用作畫橢圓，屬性包括
| 屬性名 | 全稱 | 意義 |
|---|---|---|
| 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. 畫煙囪
<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 是用作畫橢圓，屬性包括
| 屬性名 | 全稱 | 意義 |
|---|---|---|
| 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.畫門腳的線
<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 是用作畫直線，必須屬性包括
| 屬性名 | 全稱 | 意義 |
|---|---|---|
| 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è)定直線的顏色。否則直線是不可見的。
4. 畫房子
<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用來畫一組連接在一起的直線。屬性包括：
| 屬性名 | 全稱 | 意義 |
|---|---|---|
| points | This attribute defines the list of points (pairs of x,y absolute coordinates) required to draw the polyline | 點(diǎn)集數(shù)列。每個(gè)數(shù)字用空白、逗號、終止命令符或者換行符分隔開。每個(gè)點(diǎn)必須包含2個(gè)數(shù)字，一個(gè)是x坐標(biāo)，一個(gè)是y坐標(biāo)。所以點(diǎn)列表 (0,0), (1,1) 和(2,2)可以寫成這樣：“0 0, 1 1, 2 2”。 |
注意：react移動到最后，這是因?yàn)樵氐匿秩卷樞?。SVG文件全局有效的規(guī)則是“后來居上”，越后面的元素越可見。所以讓煙囪覆蓋在房子上。
5. 畫窗戶
<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)處自動回到第一個(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ù)字用空白、逗號、終止命令符或者換行符分隔開。每個(gè)點(diǎn)必須包含2個(gè)數(shù)字，一個(gè)是x坐標(biāo)，一個(gè)是y坐標(biāo)。所以點(diǎn)列表 (0,0), (1,1) 和(2,2)可以寫成這樣：“0 0, 1 1, 2 2”。 |
6. 畫樹
<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)大的功能，支持畫直線，曲線。雖然屬性只有一個(gè)d，但是d里值大有學(xué)問， 它是一個(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 | 移動到點(diǎn)(x,y)，不畫線 |
| L | Line to | L x y | 將會在當(dāng)前位置和新位置（L前面畫筆所在的點(diǎn)）之間畫一條線段 |
| H | Horizontal lines | H x | 繪制平行線 |
| V | Vertical lines | V x | 繪制垂直線 |
| Z | Close Path | Z | 從當(dāng)前點(diǎn)畫一條直線到路徑的起點(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)，就會被假設(shè)成前一個(gè)控制點(diǎn)的對稱點(diǎn)。2. 如果S命令單獨(dú)使用，前面沒有C命令或者另一個(gè)S命令，那么它的兩個(gè)控制點(diǎn)就會被假設(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命令，通過前一個(gè)控制點(diǎn)，推斷出一個(gè)新的控制點(diǎn)，創(chuàng)建出一個(gè)相當(dāng)復(fù)雜的曲線。2.如果T單獨(dú)使用，那么控制點(diǎn)就會被認(rèn)為和終點(diǎn)是同一個(gè)點(diǎn)，所以畫出來的將是一條直線。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í)針畫弧，1表示從起點(diǎn)到終點(diǎn)沿順時(shí)針畫弧 |
注意：
1.每一個(gè)命令都有兩種表示方式，一種是用大寫字母，表示采用絕對定位。另一種是用小寫字母，表示采用相對定位。Z 命令除外，不區(qū)分大小寫。
2.貝塞爾曲線的內(nèi)容可以參考wiki
終于介紹完所有的元素了。
VSCODE 插件
SVG
這個(gè)插件提供了輸入提示，圖片預(yù)覽(Preview)， 壓縮(Minify)這幾個(gè)功能。壓縮功能會將從sketch導(dǎo)出的svg文件中，例如id等內(nèi)容去除，壓縮大小。
SVG viewer
這個(gè)插件也提供了圖片預(yù)覽功能，并且在vs code設(shè)置中設(shè)置
"svgviewer.enableautopreview": true,
可以自動打開svg圖片。
本集內(nèi)容包括：基本元素的介紹，這樣當(dāng)我們看到svg時(shí)，可以了解這常常的字符串是說了什么。再來介紹了vscode中插件，方便我們在開發(fā)中可以直觀的看到svg圖形。
下集預(yù)告： 裝飾房子
參考：
Things you need to know about working with SVG in VS Code
