SVG 初心者分享
•
7 likes•640 views
當初會開始閱讀 SVG 文件，是因為想要再優化 SVG 檔案． 1. 不管怎麼使用自動化工具，仍然沒辦法非常有效的最佳化． 2. 開始好奇為什麼 SVG 檔可以這麼肥 ( 圖形明明很簡單，用 css 也可以達成 ) 後來才發現原來它很厲害~!! 身為 SVG 初心者，我整理了一下這陣子閱讀與練習的心得，有幸與大家一起分享討論． 對於沒使用過的人，希望能藉此簡介 SVG 的厲害之處； 對於已經是箇中高手的人，則希望能拋磚引玉讓之後有更多人一起討論 =D
Recommended
More Related Content
Similar to SVG 初心者分享
Similar to SVG 初心者分享 (20)
SVG 初心者分享
- 1. SVG 初心者分享 Jocelyn Hsu 前端魔法師小聚 ( 2016/07/06 @ 達暉資訊 ) 看懂 UI 給的亂碼檔
- 2. about me 徐如林 Jocelyn Hsu 現任職於 PIXNET 擔任前端工程師 ( 歡迎大家來當我同事~!! ) rulinshyu@gmail.com
- 3. outline what / why 基本屬性介紹 路徑與圖形 文字 defs & use 截圖與遮色片
- 4. what / why 基本屬性介紹 路徑與圖形 文字 defs & use 截圖與遮色片
- 6. what / why 開源 SEO 較好 ( 相較於 png / jpg ) 不因縮放而失真 ( 相較於 icon font ) 不限定單色 不需要使用 gif 也能有動畫 互動性更高
- 7. what / why 基本屬性介紹 路徑與圖形 文字 defs & use 截圖與遮色片
- 8. 基本屬性介紹 width & height viewBox ( ≠ viewPort ) preserveAspectRatio
- 9. 基本屬性介紹 width & height viewBox ( ≠ viewPort ) preserveAspectRatio
- 10. width & height viewBox ( ≠ viewPort ) preserveAspectRatio 基本屬性介紹 參考範例： http://codepen.io/jonitrythall/pen/8d101869058142d3ce019b249ed35e2b?editors=1100
- 11. 基本屬性介紹 width & height viewBox ( ≠ viewPort ) preserveAspectRatio
- 12. width & height viewBox ( ≠ viewPort ) preserveAspectRatio 基本屬性介紹 參考範例： http://codepen.io/jonitrythall/pen/8d101869058142d3ce019b249ed35e2b?editors=1100
- 13. 基本屬性介紹 width & height viewBox ( ≠ viewPort ) preserveAspectRatio none "對齊位置 尺寸"
- 14. 基本屬性介紹 width & height viewBox ( ≠ viewPort ) preserveAspectRatio none "對齊位置 尺寸" "對齊位置 尺寸" 對齊位置 xMin / xMid / xMax YMin / YMid / YMax 尺寸 meet / slice
- 15. 參考範例： http://codepen.io/jonitrythall/pen/8d101869058142d3ce019b249ed35e2b?editors=1100 基本屬性介紹 width & height viewBox ( ≠ viewPort ) preserveAspectRatio none "對齊位置 尺寸"
- 16. what / why 基本屬性介紹 路徑與圖形 文字 defs & use 截圖與遮色片
- 21. 路徑與圖形 這是在瀏覽器上呈現的樣子 推測：大概就是一個 circle 跟一個 polygon 吧
- 22. 路徑與圖形 這是在編輯器上的樣子
- 24. 路徑與圖形 <path d="…"></path> Mx y 開始處 Lx y 直線 Hx ⽔水平線 Vy 垂直線 Arx ry 夾⾓角 ⼤大⾓角弧? 順時鐘? x y 圓弧 Z end & closepath
- 25. 路徑與圖形 <path d="…"></path> Mx y 開始處 Lx y 直線 Hx ⽔水平線 Vy 垂直線 Arx ry 夾⾓角 ⼤大⾓角弧? 順時鐘? x y 圓弧 Z end & closepath 1 2 3 1 2 3
- 26. 路徑與圖形 <path d="…"></path> Mx y 開始處 Lx y 直線 Hx ⽔水平線 Vy 垂直線 Arx ry 夾⾓角 ⼤大⾓角弧? 順時鐘? x y 圓弧 Z end & closepath
- 27. what / why 基本屬性介紹 路徑與圖形 文字 defs & use 截圖與遮色片
- 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
- 33. 文字 x & y dx & dy textPath 參考範例： https://developer.mozilla.org/en-US/docs/Web/SVG/Element/textPath
- 34. 參考範例： https://developer.mozilla.org/en-US/docs/Web/SVG/Element/textPath 文字 x & y dx & dy textPath
- 35. what / why 基本屬性介紹 路徑與圖形 文字 defs & use 截圖與遮色片
- 42. 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 屬性 截圖與遮色片
- 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 屬性 截圖與遮色片
- 54. 截圖與遮色片 定義漸層
- 55. 截圖與遮色片 定義遮色片
- 56. 截圖與遮色片 套用遮色片
- 57. 截圖與遮色片
- 58. 截圖與遮色片 再加上一點細節 ( 理論上 )
- 60. 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/
- 61. thanks for your listening