iT邦幫忙

DAY 30
3

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

Day30 - SVG 完整教學 30+1 天

非常感謝 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 會有非常完整的認識,應用也會更加得心應手。

基本介紹:
Day1 - 初探 SVG ( 同步發表於:第7屆iT邦幫忙鐵人賽 )
Day2 - SVG Layer ( 同步發表於:第7屆iT邦幫忙鐵人賽 )
Day3 - SVG 基本形狀 ( 同步發表於:第7屆iT邦幫忙鐵人賽 )
Day4 - SVG Path 基礎篇 ( 同步發表於:第7屆iT邦幫忙鐵人賽 )
Day5 - SVG Path 進階篇 ( 同步發表於:第7屆iT邦幫忙鐵人賽 )
Day6 - SVG stroke 邊框 ( 同步發表於:第7屆iT邦幫忙鐵人賽 )
Day7 - SVG Stroke-miterlimit ( 同步發表於:第7屆iT邦幫忙鐵人賽 )
Day8 - SVG Stroke-marker ( 同步發表於:第7屆iT邦幫忙鐵人賽 )

深入理解:
Day9 - 理解 SVG viewport 與 viewbox ( 同步發表於:第7屆iT邦幫忙鐵人賽 )
Day10 - SVG fill 填色 ( 同步發表於:第7屆iT邦幫忙鐵人賽 )
Day11 - 再談 SVG 漸層色 ( 同步發表於:第7屆iT邦幫忙鐵人賽 )
Day12 - 有趣的 SVG Patterns ( 同步發表於:第7屆iT邦幫忙鐵人賽 )
Day13 - SVG text 文字 ( 同步發表於:第7屆iT邦幫忙鐵人賽 )
Day14 - SVG Clipping and Masking ( 同步發表於:第7屆iT邦幫忙鐵人賽 )
Day15 - 再談 SVG defs ( 同步發表於:第7屆iT邦幫忙鐵人賽 )
Day16 - SVG transform 基礎篇 ( 同步發表於:第7屆iT邦幫忙鐵人賽 )
Day17 - SVG transform Matrix ( 同步發表於:第7屆iT邦幫忙鐵人賽 )
Day18 - 初探 SVG SMIL Animation ( 同步發表於:第7屆iT邦幫忙鐵人賽 )
Day19 - 深入理解 SVG SMIL Animation ( 同步發表於:第7屆iT邦幫忙鐵人賽 )

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

更多研究:
Day24 - 初探 SVG filter ( 同步發表於:第7屆iT邦幫忙鐵人賽 )
Day25 - SVG filter - feColorMatrix ( 同步發表於:第7屆iT邦幫忙鐵人賽 )
Day26 - SVG filter - feGaussianBlur ( 同步發表於:第7屆iT邦幫忙鐵人賽 )
Day27 - SVG filter - feComponentTransfer ( 同步發表於:第7屆iT邦幫忙鐵人賽 )
Day28 - SVG filter - feImage ( 同步發表於:第7屆iT邦幫忙鐵人賽 )
Day29 - SVG filter - feDisplacementMap ( 同步發表於:第7屆iT邦幫忙鐵人賽 )
Day30 - SVG filter - feDisplacementMap 水波動畫 ( 同步發表於:第7屆iT邦幫忙鐵人賽 )
Day31 - SVG filter - feConvolveMatrix( 同步發表於:第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

SVG 工具與框架:
svg editor:好用的線上繪製 SVG 工具
D3.js:最強大的繪製 SVG 視覺圖表 JS 框架
C3.js:第二強大的繪製 SVG 視覺圖表 JS 框架
snap.svg:最強大的操作 SVG 動畫 JS 框架

======================================

以上,明年再見囉! ^_^


上一篇
Day29 - SVG filter - feDisplacementMap
下一篇
Day30+1 - SVG filter - feConvolveMatrix
系列文
SVG 30 天 ~ 就要醬玩31

尚未有邦友留言

立即登入留言