2018-07-11svg

這是一個(gè)很長(zhǎng)的故事

其實(shí)沒(méi)有很長(zhǎng),所以從頭講起够坐。
svg的全稱是可縮放 矢量 圖形(Scalable Vector Graphics,SVG),是一種用來(lái)描述二維矢量圖形的 XML 標(biāo)記語(yǔ)言茫虽。

  1. 通過(guò)設(shè)定svg圖片的width刊苍, height,viewbox, svg可以任意縮放濒析。
  2. svg是矢量的正什,所以在任意縮放后不必?fù)?dān)心分辨率。
  3. 在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>
+門(mén)前的線

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>
+一棵樹(shù)

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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市滥比,隨后出現(xiàn)的幾起案子亚脆,更是在濱河造成了極大的恐慌,老刑警劉巖守呜,帶你破解...
    沈念sama閱讀 207,113評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件型酥,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡查乒,警方通過(guò)查閱死者的電腦和手機(jī)弥喉,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,644評(píng)論 2 381
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)玛迄,“玉大人由境,你說(shuō)我怎么就攤上這事。” “怎么了虏杰?”我有些...
    開(kāi)封第一講書(shū)人閱讀 153,340評(píng)論 0 344
  • 文/不壞的土叔 我叫張陵讥蟆,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我纺阔,道長(zhǎng)瘸彤,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 55,449評(píng)論 1 279
  • 正文 為了忘掉前任笛钝,我火速辦了婚禮质况,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘玻靡。我一直安慰自己结榄,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,445評(píng)論 5 374
  • 文/花漫 我一把揭開(kāi)白布囤捻。 她就那樣靜靜地躺著臼朗,像睡著了一般。 火紅的嫁衣襯著肌膚如雪蝎土。 梳的紋絲不亂的頭發(fā)上视哑,一...
    開(kāi)封第一講書(shū)人閱讀 49,166評(píng)論 1 284
  • 那天,我揣著相機(jī)與錄音瘟则,去河邊找鬼黎炉。 笑死,一個(gè)胖子當(dāng)著我的面吹牛醋拧,可吹牛的內(nèi)容都是我干的慷嗜。 我是一名探鬼主播,決...
    沈念sama閱讀 38,442評(píng)論 3 401
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼丹壕,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼庆械!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起菌赖,我...
    開(kāi)封第一講書(shū)人閱讀 37,105評(píng)論 0 261
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤缭乘,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后琉用,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體堕绩,經(jīng)...
    沈念sama閱讀 43,601評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,066評(píng)論 2 325
  • 正文 我和宋清朗相戀三年邑时,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了奴紧。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,161評(píng)論 1 334
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡晶丘,死狀恐怖黍氮,靈堂內(nèi)的尸體忽然破棺而出唐含,到底是詐尸還是另有隱情,我是刑警寧澤沫浆,帶...
    沈念sama閱讀 33,792評(píng)論 4 323
  • 正文 年R本政府宣布捷枯,位于F島的核電站,受9級(jí)特大地震影響专执,放射性物質(zhì)發(fā)生泄漏淮捆。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,351評(píng)論 3 307
  • 文/蒙蒙 一他炊、第九天 我趴在偏房一處隱蔽的房頂上張望争剿。 院中可真熱鬧已艰,春花似錦痊末、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,352評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至嚼吞,卻和暖如春盒件,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背舱禽。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,584評(píng)論 1 261
  • 我被黑心中介騙來(lái)泰國(guó)打工炒刁, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人誊稚。 一個(gè)月前我還...
    沈念sama閱讀 45,618評(píng)論 2 355
  • 正文 我出身青樓翔始,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親里伯。 傳聞我的和親對(duì)象是個(gè)殘疾皇子城瞎,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,916評(píng)論 2 344

推薦閱讀更多精彩內(nèi)容