SVG 完整教學 31 天
從還沒有這個 blog 的時候,我就已經開始在寫 SVG 相關的技術,只是寫的哩哩辣辣的,而從這個 oxxostudio.tw 正式上線之後,我就決定好好的來寫個完整的 SVG 教學,最主要是寫給我自己看,我始終抱持著一個理念,可能當幾個月或幾年之後,我忘記了 SVG 該如何寫,這時候我就需要一個完整的教學介紹來教我自己,但目前放眼望去,撰寫 SVG 教學的人寥寥無幾,分布在世界各地,往往必須要這裡找找那裏逛逛,花費不少時間,因此如果我寫出來的東西,對以後忘記 SVG 的我而言,能夠立馬看懂,那麼沒有接觸過 SVG 的也能立馬看懂。
第七屆 IT 鐵人賽
碰巧在寫了二十篇左右的時候,遇上了一年一度的「第七屆 IT 鐵人賽」,要連續撰寫三十天的技術分享文章,正好把這幾個月以來所撰寫的 SVG 分享出去,也為自己幾個月來的累積做個紀錄 ( 每篇我都是平均三到五天才寫完...),當然,目前寫的三十一篇是到今天這個時間點的數字,未來希望自己也要繼續持續的寫,畢竟有一個更難的 feTurbulence 濾鏡尚未理解,而且我正磨刀霍霍要來玩 snap.svg 和 D3.js 吶!
以下是我所撰寫的 SVG 完整教學,從一開始的入門,到中期的控制 SVG,到後期的 SVG 濾鏡,看完這三十一篇之後,相信對於 SVG 會有非常完整的認識,應用也會更加得心應手。
基本介紹
- Day1 - 初探 SVG
- Day2 - SVG Layer
- Day3 - SVG 基本形狀
- Day4 - SVG Path 基礎篇
- Day5 - SVG Path 進階篇
- Day6 - SVG stroke 邊框
- Day7 - SVG Stroke-miterlimit
- Day8 - SVG Stroke-marker
深入理解
- Day9 - 理解 SVG viewport 與 viewbox
- Day10 - SVG fill 填色
- Day11 - 再談 SVG 漸層色
- Day12 - 有趣的 SVG Patterns
- Day13 - SVG text 文字
- Day14 - SVG Clipping and Masking
- Day15 - 再談 SVG defs
- Day16 - SVG transform 基礎篇
- Day17 - SVG transform Matrix
- Day18 - 初探 SVG SMIL Animation
- Day19 - 深入理解 SVG SMIL Animation
應用
- Day20 - SVG pie chart 圓餅圖實作
- Day21 - 控制 SVG 的小小注意事項
- Day22 - 寫 jquery 產生 SVG 圓餅圖
- Day23 - SVG + CSS 製作 Material Design 進度條
更多應用
- Day24 - 初探 SVG filter
- Day25 - SVG filter - feColorMatrix
- Day26 - SVG filter - feGaussianBlur
- Day27 - SVG filter - feComponentTransfer
- Day28 - SVG filter - feImage
- Day29 - SVG filter - feDisplacementMap
- Day30 - SVG filter - feDisplacementMap 水波動畫
- Day31 - SVG filter - feConvolveMatrix
小結
除了教學,也要分享一下這幾個月來我所參考的一些 SVG 資訊給大家,畢竟我寫的是我自己的認知與理解,如果能參考更多高手的資訊,相信可以吸收得更快更好。
教學與介紹
- W3C SVG:制定 SVG 標準的說明文件一定要閱讀
- W3C SVG filter:SVG filter 所有屬性說明
- Filter Effects in SVG:很豐富的 SVG filter 範例介紹
- docs.webplatform.org:國外很豐富的 SVG 基礎介紹
- MDN SVG Tutorial:初學者必來的 MDN SVG 基礎教學
- jenkov SVG Tutorial:同樣是初學者必備的 SVG 完整基礎教學
- SVG 1.1 Full Reference:滿豐富的 SVG 範例參考
- An SVG Primer for Today's Browsers
SVG 工具與框架
- svg editor:好用的線上繪製 SVG 工具
- D3.js:最強大的繪製 SVG 視覺圖表 JS 框架
- C3.js:第二強大的繪製 SVG 視覺圖表 JS 框架
- snap.svg:最強大的操作 SVG 動畫 JS 框架