SVG 初心者分享

Jocelyn Hsu 前端魔法師小聚 ( 2016/07/06 @ 達暉資訊 )

看懂 UI 給的亂碼檔

about me

徐如林 Jocelyn Hsu

現任職於 PIXNET 擔任前端工程師 ( 歡迎大家來當我同事~!! )

rulinshyu@gmail.com

outline

what / why

基本屬性介紹

路徑與圖形

文字

defs & use

截圖與遮色片

what / why

基本屬性介紹

路徑與圖形

文字

defs & use

截圖與遮色片

what / why

S CALABLE

V ECTOR

G RAPHICS

what / why

開源

SEO 較好

( 相較於 png / jpg ) 不因縮放而失真

( 相較於 icon font ) 不限定單色

不需要使用 gif 也能有動畫

互動性更高

what / why

基本屬性介紹

路徑與圖形

文字

defs & use

截圖與遮色片

基本屬性介紹

width & height

viewBox ( ≠ viewPort )

preserveAspectRatio

基本屬性介紹

width & height

viewBox ( ≠ viewPort )

preserveAspectRatio

width & height

viewBox ( ≠ viewPort )

preserveAspectRatio

基本屬性介紹

參考範例： http://codepen.io/jonitrythall/pen/8d101869058142d3ce019b249ed35e2b?editors=1100

基本屬性介紹

width & height

viewBox ( ≠ viewPort )

preserveAspectRatio

width & height

viewBox ( ≠ viewPort )

preserveAspectRatio

基本屬性介紹

參考範例： http://codepen.io/jonitrythall/pen/8d101869058142d3ce019b249ed35e2b?editors=1100

基本屬性介紹

width & height

viewBox ( ≠ viewPort )

preserveAspectRatio

none

"對齊位置 尺寸"

基本屬性介紹

width & height

viewBox ( ≠ viewPort )

preserveAspectRatio

none

"對齊位置 尺寸"

"對齊位置 尺寸"

對齊位置

xMin / xMid / xMax

YMin / YMid / YMax

尺寸

meet / slice

參考範例： http://codepen.io/jonitrythall/pen/8d101869058142d3ce019b249ed35e2b?editors=1100

基本屬性介紹

width & height

viewBox ( ≠ viewPort )

preserveAspectRatio

none

"對齊位置 尺寸"

what / why

基本屬性介紹

路徑與圖形

文字

defs & use

截圖與遮色片

路徑與圖形

rect

circle

ellipse

polygon

路徑與圖形

rect

circle

ellipse

polygon

路徑與圖形

可惜事情沒有這麼理想

通常 UI 給的圖都是圖形組合成的

路徑與圖形

這是在瀏覽器上呈現的樣子

路徑與圖形

這是在瀏覽器上呈現的樣子

推測：大概就是一個 circle 跟一個 polygon 吧

路徑與圖形這是在編輯器上的樣子

路徑與圖形這是在編輯器上的樣子 滿滿的都是 path

路徑與圖形

<path d="…"></path> Mx y 開始處

Lx y 直線

Hx ⽔水平線

Vy 垂直線

Arx ry 夾⾓角 ⼤大⾓角弧? 順時鐘? x y 圓弧

Z end & closepath

路徑與圖形

<path d="…"></path> Mx y 開始處

Lx y 直線

Hx ⽔水平線

Vy 垂直線

Arx ry 夾⾓角 ⼤大⾓角弧? 順時鐘? x y 圓弧

Z end & closepath

1

2

3

1 2 3

路徑與圖形

<path d="…"></path> Mx y 開始處

Lx y 直線

Hx ⽔水平線

Vy 垂直線

Arx ry 夾⾓角 ⼤大⾓角弧? 順時鐘? x y 圓弧

Z end & closepath

what / why

基本屬性介紹

路徑與圖形

文字

defs & use

截圖與遮色片

文字

x & y

dx & dy

textPath

文字

x & y

dx & dy

textPath

文字

x & y

dx & dy

textPath

文字

x & y

dx & dy

textPath

文字

x & y

dx & dy

textPath

文字

x & y

dx & dy

textPath

參考範例：https://developer.mozilla.org/en-US/docs/Web/SVG/Element/textPath

參考範例：https://developer.mozilla.org/en-US/docs/Web/SVG/Element/textPath

文字

x & y

dx & dy

textPath

what / why

基本屬性介紹

路徑與圖形

文字

defs & use

截圖與遮色片

避免繪製不必要的元件

重用性

defs & use

避免繪製不必要的元件

重用性

defs & use

避免繪製不必要的元件

重用性

defs & use

避免繪製不必要的元件

重用性

defs & use

避免繪製不必要的元件

重用性

defs & use

避免繪製不必要的元件

重用性

defs & use

defs & use

避免繪製不必要的元件

重用性

defs & use

避免繪製不必要的元件

重用性

defs & use

避免繪製不必要的元件

重用性

defs & use

what / why

基本屬性介紹

路徑與圖形

文字

defs & use

截圖與遮色片

圖形以外的都會被剪裁

定義 <clipPath>

設定 clip-path 屬性

截圖與遮色片

參考範例： http://www.oxxostudio.tw/articles/201406/svg-09-clipping-masking.html

圖形以外的都會被剪裁

定義 <clipPath>

設定 clip-path 屬性

截圖與遮色片

參考範例： http://www.oxxostudio.tw/articles/201406/svg-09-clipping-masking.html

圖形以外的都會被剪裁

定義 <clipPath>

設定 clip-path 屬性

截圖與遮色片

截圖與遮色片

灰階分佈：越黑越透明，越白越不透明

定義 <mask>

設定 mask 屬性

參考範例： http://www.oxxostudio.tw/articles/201406/svg-09-clipping-masking.html

灰階分佈：越黑越透明，越白越不透明

定義 <mask>

設定 mask 屬性

截圖與遮色片

參考範例： http://www.oxxostudio.tw/articles/201406/svg-09-clipping-masking.html

灰階分佈：越黑越透明，越白越不透明

定義 <mask>

設定 mask 屬性

截圖與遮色片

截圖與遮色片

參考範例：http://codepen.io/fixcl/pen/CHgrn?editors=1100

截圖與遮色片

定義漸層

截圖與遮色片

定義遮色片

截圖與遮色片

套用遮色片

截圖與遮色片

截圖與遮色片

再加上一點細節 ( 理論上 )

截圖與遮色片

https://codepen.io/rulinshyu/details/vKJNVO/ 請不吝批評與指教 m(_ _)m

補上細節 -

references

You, Me & SVG | codeschool

SVG 完整教學 31 天 | oxxostudio

SVG Tutorial | MDN

http://commons.oreilly.com/wiki/index.php/SVG_Essentials

https://sarasoueidan.com/tags/svg/index.html

http://tutorials.jenkov.com/svg/index.html

http://jonibologna.com/svg-viewbox-and-viewport/

thanks for your listening