iT邦幫忙

鐵人檔案

2014 iT 邦幫忙鐵人賽
回列表

SVG 30 天 ~ 就要醬玩 系列

利用 30 天的時間搞懂 SVG 的原理與應用,讓網頁設計更如虎添翼~

鐵人鍊成 | 共 31 篇文章 | 36 人訂閱 訂閱系列文 RSS系列文
DAY 1

Day1 - 初探 SVG

第一次參加鐵人賽真是緊張,在很多想寫的主題下,選擇了 SVG,主要除了瀏覽器已經都開始支援,更重要的是自己對圖形與設計的愛,對於視覺設計師而言,向量繪圖和基礎動...

2014-09-23 ‧ 由 oxxo 分享
DAY 2

Day2 - SVG Layer

許多的設計師談到向量繪圖,總是相當的興奮,但只要一提到向量繪圖裡的程式碼,馬上就暈頭轉向不知所云,這篇將要以 Illustrator 做為輔助工具出發,帶領大家...

2014-09-24 ‧ 由 oxxo 分享
DAY 3

Day3 - SVG 基本形狀

通常我們在學習向量圖,第一個一定是學基本形狀,基本形狀不外乎這幾個:矩形、圓角矩形、圓形、橢圓、多邊形,因此 SVG 的基本形狀也從這幾個出發,當然,如果會使用...

2014-09-25 ‧ 由 oxxo 分享
DAY 4

Day4 - SVG Path 基礎篇

接下來要談談 SVG 裡頭最為重要的元素:Path,因為SVG 是向量圖,所有的物件和元素都是由 Path ( 路徑 ) 所組成,所以 Path 就具有相當多的...

2014-09-26 ‧ 由 oxxo 分享
DAY 5

Day5 - SVG Path 進階篇

上一篇 看完了 Path 大部分的指令,這一篇就要介紹 Path 最困難的 A 指令。( oxxostudio.tw 同步發表: SVG 研究之路 (5) -...

2014-09-27 ‧ 由 oxxo 分享
DAY 6

Day6 - SVG stroke 邊框

前面的章節都在介紹繪製形狀,而我都是使用單純的線條來描繪形狀的邊框,因此這篇就來聊聊 stroke ( 邊框 ) 的設定。( oxxostudio.tw 同步發...

2014-09-28 ‧ 由 oxxo 分享
DAY 7

Day7 - SVG Stroke-miterlimit

在之前 SVG 研究之路 (6) - stroke 邊框 有介紹過邊框的用法,不過其實 Stroke 還有其他的屬性可以設定使用,以下將介紹:「stroke-...

2014-09-29 ‧ 由 oxxo 分享
DAY 8

Day8 - SVG Stroke-marker

在前兩篇都有介紹了 stroke 的用法,其實 stroke 還有另外一個特別的功能可以設定,就是「marker」,顧名思義,就是在線段的起點、中間點或結束點,...

2014-09-30 ‧ 由 oxxo 分享
DAY 9

Day9 - 理解 SVG viewport 與 viewbox

前一天的文章裡有提到 viewbox ,但是總覺得沒有直接來篇文章介紹,觀念上再遇到的時候又會亂掉了。這篇主要會介紹 viewport ,當中包含了 viewb...

2014-10-01 ‧ 由 oxxo 分享
DAY 10

Day10 - SVG fill 填色

介紹過了 stroke 邊框之後,接下來就要介紹 fill 填色。( oxxostudio.tw 同步發表:SVG 研究之路 (7) - fill 填色 ,現在...

2014-10-02 ‧ 由 oxxo 分享