SVG
ICON
OVERVIEW
WHY SVG?
Sprite Management
Color Variation
Size Variation
Design Variation
Pixel Density
CSS Rules
/* Icon */
.icon {
/* Blue Notes Icon */
&.icon-notes-blue {
@include size(22px 24px);
@include retina-image(icons/notes-blue, 22px 24px);
.active & {
@include retina-image(icons/notes-gray, 22px 24px);
}
}
/* Gray Notes Icon */
&.icon-notes-gray {
@include size(22px 24px);
@include retina-image(icons/notes-gray, 22px 24px);
}
/* Blue Activity Icon */
&.icon-activity-blue {
@include size(38px 24px);
@include retina-image(icons/activity-blue, 38px 24px);
.active & {
@include retina-image(icons/activity-gray, 38px 24px);
}
}
/* Gray Activity Icon */
&.icon-activity-gray {
@include size(38px 22px);
@include retina-image(icons/activity-gray, 38px 22px);
}
/* Blue Attachments Icon */
&.icon-attachments-blue {
@include size(22px 24px);
@include retina-image(icons/attachments-blue, 22px 24px);
.active & {
@include retina-image(icons/attachments-gray, 22px 24px);
}
}
/* Gray Attachments Icon */
&.icon-attachments-gray {
@include size(22px 24px);
@include retina-image(icons/attachments-gray, 22px 24px);
}
/* Large Blue Notes Icon */
&.icon-notes-blue-lg {
@include size(56px 64px);
@include retina-image(icons/notes-blue-lg, 56px 64px);
}
}HERE IS HOW
- Put SVGs in folder
- Install GruntJS
- Install Grunt SVG Store
- Config Grunt SVG
- Run Grunt
- Insert SVG Def
- Insert SVG tag
- Write CSS
Vector Images
GruntJS
A JavaScript task runner built for automation. Can be used for minification, compilation, unit testing or whatever needs to get done.
Get Started: http://gruntjs.com/getting-started
SVG Store
GruntJS contribution specifically for combining SVGs from a folder.
Get Started: https://github.com/FWeinb/grunt-svgstore
Configure Grunt
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
svgstore: {
options: {
prefix : 'icon-', // This will prefix each <g> ID
},
default : {
files: {
'dest/svg-defs.svg': ['img/icons/svg/*.svg'],
}
}
}
});
// Load plugins
grunt.loadNpmTasks('grunt-svgstore');
// Default task(s).
grunt.registerTask('default', ['svgstore']);
};
Run, Grunt, Run!
kwirth$ grunt svgstore
Running "svgstore:default" (svgstore) task
File app/assets/images/icons/svg/svg-defs.svg created.
Done, without errors.
kwirth$ svg-defs.svg
<svg xmlns="http://www.w3.org/2000/svg">
<symbol viewBox="0 0 18 19" id="icon-pending-approval">
<title>pending-approval</title>
<g><path fill-rule="evenodd" clip-rule="evenodd" fill="#F1AC5F" d="M11.7,16.3C11.3,17.6,10.2,19,9,19c-1.2,0-2.2-1.4-2.6-2.5
c0.4-0.2,0.8-0.4,1.2-0.6C7.6,16,8.3,17.6,9,17.6c0.7,0,1.4-1.8,1.4-1.9C10.8,15.9,11.2,16.1,11.7,16.3z M17.5,11.7
c0,0.1-0.1,0.6-0.1,0.7c0,0.1,0.3,0.7,0.4,1c0.1,0.2,0.2,0.8,0.2,0.9c0,1.5-1.3,1.9-2.3,1.9c-1.8,0-3.9-1-5.6-1.8
c0.4-0.3,1.1-0.8,1.3-0.8c0,0,3,1.3,4.3,1.3c0.4,0,1-0.1,1-0.6c0-0.3-0.2-0.9-0.4-1.2c-1.1,0.1-1.8-0.7-1.8-1.5
c0-0.8,0.6-1.4,1.5-1.4C16.9,10.3,17.5,10.9,17.5,11.7z M16.6,4.5C16.6,5,16,6,15.7,6.4c-3,3.8-7.1,6.5-10.5,7.9
c-1.2,0.5-1.8,0.7-2.9,0.7c-0.5,0-0.9,0-0.9-0.6c0-1.1,1.8-3.2,2.7-4c0.8,0.8,1.8,1.5,2.7,2.1l1.3-0.7l-3-2.3
c0.6-0.7,3.5-2.8,3.7-2.8c0.2,0,2.5,1.7,3.2,2.2l1-1l-2.9-2.1C11.8,5.1,14,4,15.7,4C16.1,4,16.6,3.9,16.6,4.5z M18,4.5
c0,0.9-0.6,2.1-1.4,3.1c-3.3,3.9-7.3,6.5-10.9,8c-0.8,0.4-2.5,0.8-3.4,0.8c-1.1,0-2.3-0.6-2.3-1.9c0-2.8,5.1-7.1,7.6-8.6
C6.3,5.2,3.8,4,2.3,4C1.9,4,1.4,4.1,1.4,4.6c0,0.4,0.2,0.9,0.4,1.2c1,0,1.7,0.7,1.7,1.5c0,1-0.8,1.5-1.5,1.5
c-0.9,0-1.5-0.6-1.5-1.5c0-0.1,0.2-0.7,0.2-0.7c0-0.3-0.7-1-0.7-2c0-1.5,1.4-1.8,2.3-1.8c1.1,0,2.4,0.4,3.5,0.8
c1,0.4,3,1.5,3.2,1.5c0.1,0,4.1-2.5,6.8-2.5C17,2.5,18,3.2,18,4.5z M11.6,2.5v0.1c-0.4,0.1-0.8,0.3-1.1,0.5C10.4,3,9.7,1.4,9,1.4
c-0.8,0-1.4,1.8-1.5,1.9C7.2,3.1,6.8,2.9,6.3,2.7C6.8,1.4,7.7,0,9,0C10.2,0,11.1,1.2,11.6,2.5z"/>
</g>
</symbol>
<symbol viewBox="0 0 16 15" id="icon-starred"><title>starred</title> <path fill-rule="evenodd" clip-rule="evenodd" fill="#FFDA64" d="M10.4,4.9L16,5.7c-1.3,1.2-2.7,2.6-4,3.8v0.1l1,5.4l-5-2.6L3,15
l1-5.4c0,0,0,0,0-0.1C2.7,8.3,1.3,7,0,5.7l5.6-0.8L8,0C8.8,1.6,10.4,4.9,10.4,4.9z"/>
</symbol>
</svg>Insert SVG Definitions
RUBY (Requires a helper)
<%= inline_svg('icons/svg/svg-defs.svg') %>Insert SVG Tag
<svg viewBox="0 0 100 100" class="icon icon-star">
<use xlink:href="#icon-star"></use>
</svg>Write CSS (or Sass)
/* Icon */
.icon {
width: 64px;
height: 60px;
display: block;
float: left;
/* Starred Icon */
&.icon-starred {
fill: #ffda64;
stroke: #ffd44b;
stroke-width: 10;
}
/* Unstarred Icon */
&.icon-unstarred {
fill: none;
stroke: #ccc;
stroke-width: 10;
}
}Browser Support?
Does not work:
IE8 or older
Safari 5 or older
iOS 4.3 or older
Android 2.3 or older
QUESTIONS?
@wirthdesign
Resources
Icon System with SVG Sprites
https://css-tricks.com/svg-sprites-use-better-icon-fonts/
Grunt SVG Store
https://github.com/FWeinb/grunt-svgstore
Gulp SVG Sprites
https://github.com/shakyShane/gulp-svg-sprites
Understanding and Manually Improving SVG Optimization
https://css-tricks.com/understanding-and-manually-improving-svg-optimization/
SVG Icon Overview
By Kevin Wirth
