2016 / 04 / 29

痞客邦前端組分享 - 徐如林

SVG 實作分享

SCALABLE

VECTOR

GRAPHICS

SCALABLE

VECTOR

GRAPHICS

1. why SVG?

2. viewPort

3. shape & path

4. text

5. <def>

6. examples

1. 開源 2. SEO 較好

3. ( ⽐比起 jpg / png ) 屬於向量圖 - 不因放⼤大縮⼩小⽽而失真

4. ( ⽐比起 icon font ) 可以有很多顏⾊色

5. ⽀支援多種濾鏡和特殊效果 6. 不需要 gif 也能有動畫

7. 可以與使⽤用者互動

why SVG ?

SCALABLE

VECTOR

GRAPHICS

1. why SVG?

2. viewPort

3. shape & path

4. text

5. <def>

6. examples

viewPort1. viewPort? viewBox?

2. preserveAspectRatio

• meet / slice

• xMin / xMid / xMax

YMin / YMid / YMax

http://commons.oreilly.com/

viewPort1. viewPort? viewBox?

2. preserveAspectRatio

• meet / slice

• xMin / xMid / xMax

YMin / YMid / YMax

http://commons.oreilly.com/

SCALABLE

VECTOR

GRAPHICS

1. why SVG?

2. viewPort

3. shape & path

4. text

5. <def>

6. examples

1. rect ⻑⾧長⽅方形

2. circle 圓形

3. ellipse 橢圓形

4. polygon 多邊形

shape & path

shape & path

1. Mx y 開始處

2. Lx y 直線

3. Hx ⽔水平線

4. Vy 垂直線

5. Arx ry 夾⾓角 ⼤大⾓角弧? 順時鐘? x y 圓弧

6. Z end & closepath

shape & path

1. Mx y 開始處

2. Lx y 直線

3. Hx ⽔水平線

4. Vy 垂直線

5. Arx ry 夾⾓角 ⼤大⾓角弧? 順時鐘? x y 圓弧

6. Z end & closepath

shape & path

1. Mx y 開始處

2. Lx y 直線

3. Hx ⽔水平線

4. Vy 垂直線

5. Arx ry 夾⾓角 ⼤大⾓角弧? 順時鐘? x y 圓弧

6. Z end & closepath

shape & path

1. Mx y 開始處

2. Lx y 直線

3. Hx ⽔水平線

4. Vy 垂直線

5. Arx ry 夾⾓角 ⼤大⾓角弧? 順時鐘? x y 圓弧

6. Z end & closepath

shape & path

1. Mx y 開始處

2. Lx y 直線

3. Hx ⽔水平線

4. Vy 垂直線

5. Arx ry 夾⾓角 ⼤大⾓角弧? 順時鐘? x y 圓弧

6. Z end & closepath

shape & path

SCALABLE

VECTOR

GRAPHICS

1. why SVG?

2. viewPort

3. shape & path

4. text

5. <def>

6. examples

SVG text

SVG text

SCALABLE

VECTOR

GRAPHICS

1. why SVG?

2. viewPort

3. shape & path

4. text

5. <def>

6. examples

<def> in SVG

SCALABLE

VECTOR

GRAPHICS

1. why SVG?

2. viewPort

3. shape & path

4. text

5. <def>

6. examples

examples - simple charts定義各種 marker

examples - simple charts

⿊黑外框的⽩白點

紅⾊色的愛⼼心

綠⾊色的菱形

定義各種 marker

examples - simple charts簡易的折線圖製作

examples - loading icon

svg 的部分

examples - loading icon本來的檔案⻑⾧長這樣：

examples - loading icon1. 使⽤用 SVGOMG 壓縮

https://jakearchibald.github.io/svgomg/

examples - loading icon2. ⼿手動刪除⼀一些不需要的設定 3. 第⼀一個 path 改⽤用 circle 畫

examples - loading icon我想要外⾯面那圈有正在跑的感覺~ 我們家 UX

examples - loading icon4. ⽤用 css 加上動畫

examples - loading icon4. ⽤用 css 加上動畫

examples - loading icon5. 直接在 svg 裡加上 text

examples - loading icon6. 兩個 path 可以合併成⼀一個 polygon

7. ( 加上 title 跟 desc，提升 accessibility )

thanks for your listening

SCALABLE

VECTOR

GRAPHICS