Day30 - SVG 完整教學 30+1 天 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

DAY 30

SVG 30 天 ~ 就要醬玩系列第 30 篇

Day30 - SVG 完整教學 30+1 天

鐵人賽 svg

2014-10-22 19:48:23

9874 瀏覽

非常感謝 IT 邦幫忙舉辦鐵人賽，因為有了之前的文章，讓我學會了保哥寫的 GIT 和洧杰哥寫的 SASS，今年總算是鼓起勇氣來參賽了，30 天不長不短，但是對自己來說卻是一個挑戰，畢竟雖然自己都有寫 blog 的習慣，但要連續三十天還真的有些困難，但慶幸的是，我終於也在今天達成了連續三十天的鐵人目標！三十天以來，一開始對於發文系統有諸多抱怨，但一天一天的看到了工作團隊的努力和用心，也越來越能掌握發文的步調和方式，總而言之，不好意思在初期的抱怨，也很感謝有這個空間可以分享和發表，明年希望自己能拿出更多更好的東西來分享！^_^

其實我總共寫了 31 篇文章，不過第 30 篇和 29 篇已經融合再一起，加上這篇總共是 32 篇 ( 正式的介紹共 30 篇 )，這篇發完之後會立馬接著發第 31 篇，就大功告成！這篇只是所有文章的索引，以及參賽以來的一些感想與心得。:)

( oxxostudio.tw 同步發表：SVG 完整教學 31 天 )

======= 以下，正文開始 ====================

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

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

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

應用：
Day20 - SVG pie chart 圓餅圖實作 ( 同步發表於：第7屆iT邦幫忙鐵人賽 )
Day21 - 控制 SVG 的小小注意事項 ( 同步發表於：第7屆iT邦幫忙鐵人賽 )
Day22 - 寫 jquery 產生 SVG 圓餅圖 ( 同步發表於：第7屆iT邦幫忙鐵人賽 )
Day23 - SVG + CSS 製作 Material Design 進度條 ( 同步發表於：第7屆iT邦幫忙鐵人賽 )

除了教學，也要分享一下這幾個月來我所參考的一些 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