之前對於 SVG 檔案都只有從 UI 那邊拿來 => 壓縮後丟到線上； 但陰錯陽差下接到了 UX 的新需求，需要去稍微改寫既有的 SVG，因此就順便再讀了一下相關的資訊~ 藉此機會跟大家分享~

1. 2016 / 04 / 29
痞客邦前端組分享 - 徐如林
SVG
實作分享

2. SCALABLE
VECTOR
GRAPHICS

3. SCALABLE
VECTOR
GRAPHICS
1. why SVG?
2. viewPort
3. shape & path
4. text
5. <def>
6. examples

4. 1. 開源
2. SEO 較好
3. ( ⽐比起 jpg / png ) 屬於向量圖 - 不因放⼤大縮⼩小⽽而失真
4. ( ⽐比起 icon font ) 可以有很多顏⾊色
5. ⽀支援多種濾鏡和特殊效果
6. 不需要 gif 也能有動畫
7. 可以與使⽤用者互動
why SVG ?

5. SCALABLE
VECTOR
GRAPHICS
1. why SVG?
2. viewPort
3. shape & path
4. text
5. <def>
6. examples

6. viewPort
1. viewPort? viewBox?
2. preserveAspectRatio
• meet / slice
• xMin / xMid / xMax
YMin / YMid / YMax
http://commons.oreilly.com/

7. viewPort
1. viewPort? viewBox?
2. preserveAspectRatio
• meet / slice
• xMin / xMid / xMax
YMin / YMid / YMax
http://commons.oreilly.com/

8. SCALABLE
VECTOR
GRAPHICS
1. why SVG?
2. viewPort
3. shape & path
4. text
5. <def>
6. examples

9. 1. rect ⻑⾧長⽅方形
2. circle 圓形
3. ellipse 橢圓形
4. polygon 多邊形
shape & path

10. shape & path

11. 1. Mx y 開始處
2. Lx y 直線
3. Hx ⽔水平線
4. Vy 垂直線
5. Arx ry 夾⾓角 ⼤大⾓角弧? 順時鐘? x y 圓弧
6. Z end & closepath
shape & path

12. 1. Mx y 開始處
2. Lx y 直線
3. Hx ⽔水平線
4. Vy 垂直線
5. Arx ry 夾⾓角 ⼤大⾓角弧? 順時鐘? x y 圓弧
6. Z end & closepath
shape & path

13. 1. Mx y 開始處
2. Lx y 直線
3. Hx ⽔水平線
4. Vy 垂直線
5. Arx ry 夾⾓角 ⼤大⾓角弧? 順時鐘? x y 圓弧
6. Z end & closepath
shape & path

14. 1. Mx y 開始處
2. Lx y 直線
3. Hx ⽔水平線
4. Vy 垂直線
5. Arx ry 夾⾓角 ⼤大⾓角弧? 順時鐘? x y 圓弧
6. Z end & closepath
shape & path

15. 1. Mx y 開始處
2. Lx y 直線
3. Hx ⽔水平線
4. Vy 垂直線
5. Arx ry 夾⾓角 ⼤大⾓角弧? 順時鐘? x y 圓弧
6. Z end & closepath
shape & path

16. SCALABLE
VECTOR
GRAPHICS
1. why SVG?
2. viewPort
3. shape & path
4. text
5. <def>
6. examples

17. SVG text

18. SVG text

19. SCALABLE
VECTOR
GRAPHICS
1. why SVG?
2. viewPort
3. shape & path
4. text
5. <def>
6. examples

20. <def> in SVG

21. SCALABLE
VECTOR
GRAPHICS
1. why SVG?
2. viewPort
3. shape & path
4. text
5. <def>
6. examples

22. examples - simple charts
定義各種 marker

23. examples - simple charts
⿊黑外框的⽩白點
紅⾊色的愛⼼心
綠⾊色的菱形
定義各種 marker

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

25. examples - loading icon
svg 的部分

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

27. examples - loading icon
1. 使⽤用 SVGOMG 壓縮
https://jakearchibald.github.io/svgomg/

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

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

30. examples - loading icon
4. ⽤用 css 加上動畫

31. examples - loading icon
4. ⽤用 css 加上動畫

32. examples - loading icon
5. 直接在 svg 裡加上 text

33. examples - loading icon
6. 兩個 path 可以合併成⼀一個 polygon
7. ( 加上 title 跟 desc，提升 accessibility )

34. thanks for your listening
SCALABLE
VECTOR
GRAPHICS