SVG 完整教學 31 天

從還沒有這個 blog 的時候,我就已經開始在寫 SVG 相關的技術,只是寫的哩哩辣辣的,而從這個 oxxostudio.tw 正式上線之後,我就決定好好的來寫個完整的 SVG 教學,最主要是寫給我自己看,我始終抱持著一個理念,可能當幾個月或幾年之後,我忘記了 SVG 該如何寫,這時候我就需要一個完整的教學介紹來教我自己,但目前放眼望去,撰寫 SVG 教學的人寥寥無幾,分布在世界各地,往往必須要這裡找找那裏逛逛,花費不少時間,因此如果我寫出來的東西,對以後忘記 SVG 的我而言,能夠立馬看懂,那麼沒有接觸過 SVG 的也能立馬看懂。

第七屆 IT 鐵人賽

碰巧在寫了二十篇左右的時候,遇上了一年一度的「第七屆 IT 鐵人賽」,要連續撰寫三十天的技術分享文章,正好把這幾個月以來所撰寫的 SVG 分享出去,也為自己幾個月來的累積做個紀錄 ( 每篇我都是平均三到五天才寫完...),當然,目前寫的三十一篇是到今天這個時間點的數字,未來希望自己也要繼續持續的寫,畢竟有一個更難的 feTurbulence 濾鏡尚未理解,而且我正磨刀霍霍要來玩 snap.svg 和 D3.js 吶!

以下是我所撰寫的 SVG 完整教學,從一開始的入門,到中期的控制 SVG,到後期的 SVG 濾鏡,看完這三十一篇之後,相信對於 SVG 會有非常完整的認識,應用也會更加得心應手。

SVG 完整教學 31 天

基本介紹

深入理解

應用

更多應用

小結

除了教學,也要分享一下這幾個月來我所參考的一些 SVG 資訊給大家,畢竟我寫的是我自己的認知與理解,如果能參考更多高手的資訊,相信可以吸收得更快更好。

教學與介紹

SVG 工具與框架

有興趣瞧瞧其他新文章嗎?