use-svg-icon
SVG icon
Why ?
在既有 icon system 下為何還需要 svg icon 呢？眼睛很挑
Pixel-Art Poopaye!
icon font 不是用的好好的？
難找、 語義未明、 不彈性 只有單色、 跨網域就心煩
What ?
那麼 SVG 好在哪裡呢 ?Is it good to drink ?
Inline SVG v.s. Icon Fonts
Inline SVG v.s. Icon Fonts
vector
css control
position align
no CORS
semantics
accessibility
usability
[ ! ] browser support
vector: font 有些字級在 render 時會糊糊的
css control: inline svg powerful stroke & filter
position align: svg 不用去管那堆有的沒的 line-height, vertical-align, display: inline-block
CORS
semantics: <svg> is just a image
accessibility: <title>, <desc>, aria-labelledbyref: svg readability and accessibility | svg4everybody
usability: pure text, 不開心就自己寫，就自己寫呀~
browser support: IE8? Let it go~
source: https://css-tricks.com/icon-fonts-vs-svg/
Browser support
- IE 9+
- IE 8-
with svg4everybody.legacy.js + PNG
- Android 3+
svg support detection
SVG icon syntax
SVG icon syntax - old
use <g> tag set viewBox in markup<svg>
<defs>
<g id="shape-icon-1">
<!-- all the paths and shapes and whatnot for this icon -->
<g>
<g id="shape-icon-2">
<!-- all the paths and shapes and whatnot for this icon -->
<g>
</defs>
</svg>
<!-- in use -->
<svg class="icon" viewBox="214.7 0 182.6 792">
<use xlink:href="#shape-icon-1" />
</svg>
SVG icon syntax - new
use <symbol> tag set viewBox in svg no extra <defs> tag<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="beaker" viewBox="214.7 0 182.6 792">
<!-- <path>s and whatever other shapes in here -->
</symbol>
<symbol id="shape-icon-2" viewBox="0 26 100 48">
<!-- <path>s and whatever other shapes in here -->
</symbol>
</svg>
<!-- in use -->
<svg class="icon">
<use xlink:href="#shape-icon-1" />
</svg>
Where ?
1. in HTML
e.g.,<?php echo file_get_contents("kiwi.svg"); ?>
2. Ajax
基本上就是把 svg 撈回來塞進 body 裡，收工How ?
1. ✋ ✋ + text-editor
hard to understand the SVG icon
2. auto-generating tool
gulp-svgstore
本次重頭戲終於來了！End.
謝謝
gulp-svgstore
0. prepare
1. basic
完整、合格的 svg 圖檔gulp.task('svgicons', ['clean:svg'], function() {
gulp.src(path.svg.src + '*.svg')
.pipe(svgstore())
.pipe(gulp.dest(path.svg.dest));
});
2. inlineSVG
gulp.task('svgicons', ['clean:svg'], function() {
gulp.src(path.svg.src + '**/*.svg')
.pipe(svgstore({inlineSvg: true}))
.pipe(gulp.dest(path.svg.dest));
});
3. basic prefix id
gulp.task('svgicons', ['clean:svg'], function() {
gulp.src(path.svg.src + '**/*.svg')
.pipe(rename({prefix: 'icon-'}))
.pipe(svgstore({inlineSvg: true}))
.pipe(gulp.dest(path.svg.dest));
});
4. auto prefix id
gulp.task('svgicons', ['clean:svg'], function() {
gulp.src(path.svg.src + '**/*.svg', { base: path.svg.src})
.pipe(rename(function (path) {
var name = path.dirname.split(path.sep);
name.push(path.basename);
path.basename = name.join('-');
}))
.pipe(svgstore({inlineSvg: true}))
.pipe(gulp.dest(path.svg.dest));
});
5. svg optimization
with gulp-imagemin
gulp.task('svgicons', ['clean:svg'], function() {
gulp.src(path.svg.src + '**/*.svg', { base: path.svg.src})
.pipe(rename(function (path) {
var name = path.dirname.split(path.sep);
name.push(path.basename);
path.basename = name.join('-');
}))
.pipe(imagemin())
.pipe(svgstore({inlineSvg: true}))
.pipe(gulp.dest(path.svg.dest));
});
6. add svg fallback, if necessary.
with gulp-svgfallback
var minifySVGs = (function() {
return gulp.src(path.svg.src + '**/*.svg', { base: path.svg.src})
.pipe(rename(function (path) {
var name = path.dirname.split(path.sep);
name.push(path.basename);
path.basename = name.join('-');
}))
.pipe(imagemin());
})();
gulp.task('svgicons', ['svgfallback'], function() {
// svgstore
minifySVGs
.pipe(svgstore({inlineSvg: true}))
.pipe(gulp.dest(path.svg.dest));
});
gulp.task('svgfallback', ['clean:svg'], function() {
// svgfallback
minifySVGs
.pipe(svgfallback())
.pipe(gulp.dest(path.svg.dest));
});
6. add svg fallback, if necessary.
with gulp-svgfallback
這邊 css 寫法不是很好 不過大家也不用太講究了Ref
Q & A
Thanks for attention
i/ Accessibility [1]
<!-- 1 -->
<symbol id="twitter">
<title>twitter</title>
<path etc.../>
</symbol>
<!-- 2 -->
<svg title="twitter">
<use xlink:href="map.svg#twitter"/>
</svg>
<!-- 3 -->
<svg role="presentation">
<use xlink:href="map.svg#twitter"/>
</svg>
<!-- 4 -->
<svg title="Find me on Twitter" role="img">
<use xlink:href="map.svg#twitter"/>
</svg>
<!-- 5 -->
<svg title="send a mail" aria-labelledby="gmail-icon-title gmail-icon-desc">
<title id="gmail-icon-title">a icon of google mail</title>
<desc id="gmail-icon-desc">send a mail to my Google mail</desc>
<use xlink:href="map.svg#gmail"/>
</svg>
SVG icon