PIXNET 內部分享，希望之後手機上能有更多的 SVG 應用 =D

1. SVG 初心者分享
Jocelyn Hsu
2016 / 08 / 11 @ 痞客邦 SMALL TALK
看懂 UI 給的亂碼檔

2. outline
what / why
基本屬性介紹
路徑與圖形
文字
defs & use
截圖與遮色片

3. what / why
基本屬性介紹
路徑與圖形
文字
defs & use
截圖與遮色片

4. what / why
SCALABLE
VECTOR
GRAPHICS

5. what / why
開源
SEO 較好
( 相較於 png / jpg ) 不因縮放而失真
( 相較於 icon font ) 不限定單色
不需要使用 gif 也能有動畫
互動性更高

6. what / why
基本屬性介紹
路徑與圖形
文字
defs & use
截圖與遮色片

7. 基本屬性介紹
width & height
viewBox ( ≠ viewPort )
preserveAspectRatio

8. 基本屬性介紹
width & height
viewBox ( ≠ viewPort )
preserveAspectRatio

9. width & height
viewBox ( ≠ viewPort )
preserveAspectRatio
基本屬性介紹
參考範例：
http://codepen.io/jonitrythall/pen/8d101869058142d3ce019b249ed35e2b?editors=1100

10. 基本屬性介紹
width & height
viewBox ( ≠ viewPort )
preserveAspectRatio

11. width & height
viewBox ( ≠ viewPort )
preserveAspectRatio
基本屬性介紹
參考範例：
http://codepen.io/jonitrythall/pen/8d101869058142d3ce019b249ed35e2b?editors=1100

12. 基本屬性介紹
width & height
viewBox ( ≠ viewPort )
preserveAspectRatio
none
"對齊位置 尺寸"

13. 基本屬性介紹
width & height
viewBox ( ≠ viewPort )
preserveAspectRatio
none
"對齊位置 尺寸"
"對齊位置 尺寸"
對齊位置
xMin / xMid / xMax
YMin / YMid / YMax
尺寸
meet / slice

14. 參考範例：
http://codepen.io/jonitrythall/pen/8d101869058142d3ce019b249ed35e2b?editors=1100
基本屬性介紹
width & height
viewBox ( ≠ viewPort )
preserveAspectRatio
none
"對齊位置 尺寸"

15. what / why
基本屬性介紹
路徑與圖形
文字
defs & use
截圖與遮色片

16. 路徑與圖形
rect
circle
ellipse
polygon

17. 路徑與圖形
rect
circle
ellipse
polygon

18. 路徑與圖形
這是在瀏覽器上呈現的樣子

19. 路徑與圖形
這是在編輯器上的樣子

20. 路徑與圖形
<path d="…"></path>
Mx y 開始處
Lx y 直線
Hx ⽔水平線
Vy 垂直線
Arx ry 夾⾓角 ⼤大⾓角弧? 順時鐘? x y 圓弧
Z end & closepath

21. 路徑與圖形
<path d="…"></path>
Mx y 開始處
Lx y 直線
Hx ⽔水平線
Vy 垂直線
Arx ry 夾⾓角 ⼤大⾓角弧? 順時鐘? x y 圓弧
Z end & closepath

22. 路徑與圖形
<path d="…"></path>
Mx y 開始處
Lx y 直線
Hx ⽔水平線
Vy 垂直線
Arx ry 夾⾓角 ⼤大⾓角弧? 順時鐘? x y 圓弧
Z end & closepath
1
2
3
1 2 3

24. 本來的檔案

25. 重寫後的檔案

26. what / why
基本屬性介紹
路徑與圖形
文字
defs & use
截圖與遮色片

27. 文字
x & y
dx & dy
textPath

28. 文字
x & y
dx & dy
textPath

29. 文字
x & y
dx & dy
textPath

30. 文字
x & y
dx & dy
textPath

31. 文字
x & y
dx & dy
textPath

32. 文字
x & y
dx & dy
textPath
參考範例：
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/textPath

33. 參考範例：
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/textPath
文字
x & y
dx & dy
textPath

34. what / why
基本屬性介紹
路徑與圖形
文字
defs & use
截圖與遮色片

35. 避免繪製不必要的元件
重用性
defs & use

36. 避免繪製不必要的元件
重用性
defs & use

37. 避免繪製不必要的元件
重用性
defs & use

38. 避免繪製不必要的元件
重用性
defs & use

39. 避免繪製不必要的元件
重用性
defs & use

40. 避免繪製不必要的元件
重用性
defs & use

41. 避免繪製不必要的元件
重用性
defs & use

42. 避免繪製不必要的元件
重用性
defs & use

43. 避免繪製不必要的元件
重用性
defs & use

44. 避免繪製不必要的元件
重用性
defs & use

45. 避免繪製不必要的元件
重用性
defs & use

46. what / why
基本屬性介紹
路徑與圖形
文字
defs & use
截圖與遮色片

47. 圖形以外的都會被剪裁
定義 <clipPath>
設定 clip-path 屬性
截圖與遮色片

48. 參考範例：
http://www.oxxostudio.tw/articles/201406/svg-09-clipping-masking.html
圖形以外的都會被剪裁
定義 <clipPath>
設定 clip-path 屬性
截圖與遮色片

49. 參考範例：
http://www.oxxostudio.tw/articles/201406/svg-09-clipping-masking.html
圖形以外的都會被剪裁
定義 <clipPath>
設定 clip-path 屬性
截圖與遮色片

50. 截圖與遮色片
灰階分佈：越黑越透明，越白越不透明
定義 <mask>
設定 mask 屬性

51. 參考範例：
http://www.oxxostudio.tw/articles/201406/svg-09-clipping-masking.html
灰階分佈：越黑越透明，越白越不透明
定義 <mask>
設定 mask 屬性
截圖與遮色片

52. 參考範例：
http://www.oxxostudio.tw/articles/201406/svg-09-clipping-masking.html
灰階分佈：越黑越透明，越白越不透明
定義 <mask>
設定 mask 屬性
截圖與遮色片

53. 截圖與遮色片
參考範例：http://codepen.io/fixcl/pen/CHgrn?editors=1100

54. 截圖與遮色片

55. 截圖與遮色片

56. 截圖與遮色片
再加上一點細節

57. 截圖與遮色片
細節在這：https://codepen.io/rulinshyu/details/vKJNVO/
請不吝批評與指教 m(_ _)m

59. references
You, Me & SVG | codeschool
SVG 完整教學 31 天 | oxxostudio
SVG Tutorial | MDN
http://commons.oreilly.com/wiki/index.php/SVG_Essentials
https://sarasoueidan.com/tags/svg/index.html
http://tutorials.jenkov.com/svg/index.html
http://jonibologna.com/svg-viewbox-and-viewport/

60. thanks for your listening