SVG icon

Why ?

眼睛很挑

Pixel-Art Poopaye!

image source: http://www.minecraftpixelarttemplates.com/2013/11/despicable-me-minion-2.html

icon font 不是用的好好的？

難找、 語義未明、 不彈性

只有單色、 跨網域就心煩

What ?

Is it good to drink ?

Inline SVG
v.s.
Icon Fonts

Inline SVG v.s. Icon Fonts

source: https://css-tricks.com/icon-fonts-vs-svg/

Browser support

svg support detection

SVG icon syntax

SVG icon syntax - old

  1. use <g> tag
  2. set viewBox in markup
source: https://css-tricks.com/svg-symbol-good-choice-icons/

SVG icon syntax - new

  1. use <symbol> tag
  2. set viewBox in svg
  3. no extra <defs> tag
source: https://css-tricks.com/svg-symbol-good-choice-icons/

Where ?

1. in HTML

e.g., 
<?php echo file_get_contents("kiwi.svg"); ?>

2. Ajax

How ?

1. ✋ ✋ + text-editor

hard to understand the SVG icon

2. auto-generating tool

gulp-svgstore

End.

謝謝

gulp-svgstore

0. prepare

prepare svgs

1. basic

2. inlineSVG

3. basic prefix id

4. auto prefix id

5. svg optimization

with gulp-imagemin

6. add svg fallback, if necessary.

with gulp-svgfallback

6. add svg fallback, if necessary.

with gulp-svgfallback

Q & A

Thanks for attention

簡報內容以 CC 姓名標示-相同方式分享 4.0 國際授權釋出

i/ Accessibility [1]