[POST] SVG process in Gulp

[Rplus]

Case Study: Our SVG Icon Process
by Tyler Sticka, Feb 2, 2016
http://blog.cloudfour.com/our-svg-icon-process/

作者因 為之前寫了篇文章推坑大家來用 SVG icon 後
反應熱烈，所以就又寫了一篇文來分享他們團隊的 SVG 使用方式~
作者團隊的需求：

• Accessibility:
• Design: inherit color
• Performance: loading / request / cache
• Workflow: gulp
• Browsers: IE9+

---

這邊他使用的是 gulp-svg-sprite
https://github.com/jkphl/gulp-svg-sprite

有稍微講解 gulp 的設定
然後一路講到 markup 使用 <use xlink:href> 方式載入；再用 CSS 設定樣式

這邊他們團隊也喜歡使用 SUIT 的 naming~

---

有些小眉角：
方向不同的圖可以使用 svg 的 transform 來 rotate
<use> 的雙重參照，非常省

如果遇到要強制顏色的，可以直接在 SVG 裡使用 fill 來設定

接著的 Accessibility 是比較有趣的
gulp-svg-sprite 可接受外部的 data，使用 meta-inject (YAML format)
https://github.com/jkphl/svg-sprite/blob/master/docs/meta-data.md

褡把 title & description 都寫在這邊做 mapping~

---

而最後跨瀏覽器的部份
因為 IE 不認得外部 svg 檔案

SVG use with External Reference, Take 2
by Chris Coyier // Sep 23, 2015
https://css-tricks.com/svg-use-with-external-reference-take-2/

解法如果不是直接在 HTML 就 injected svg
那就是要靠 JS 把 SVG 撈進來 inject 進 DOM 裡
這邊他用的是 svgxuse
https://github.com/Keyamoon/svgxuse

以前比較常見到的 & CSS-tricks 推薦的是 svg4wverybody
https://github.com/jonathantneal/svg4everybody

---

結論就是，
工具包好了、坑也都標示了
快下來用 SVG icon~

[Rplus]

oneTab list:
http://www.one-tab.com/page/9y4d8OpIR7Okl0VS5CIa4Q

[Rplus]

aaa