svg_fallback
v0.2.12
Published
Generates SVG library and PNG+CSS fallback.
Downloads
228
Readme
svg_fallback
Generates SVG library and PNG+CSS fallback.
Save your time and enjoy SVG : )
Plugin takes folders with SVG and generates:
- SVG-library for using with
<use xlink:href="#symbolName"/>
- Fallback for old browsers: sprite + CSS.
Getting Started
This plugin requires Grunt ~0.4.5
If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:
npm install svg_fallback --save-dev
Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
grunt.loadNpmTasks('svg_fallback');
The "svg_fallback" task
Overview
In your project's Gruntfile, add a section named svg_fallback
to the data object passed into grunt.initConfig()
.
grunt.initConfig({
svg_fallback: {
options: {
// Task-specific options go here.
},
your_target: {
// Target-specific file lists and/or options go here.
},
},
});
Required options:
your_target.src
Type: String
Folder with folders containing icons. Folder name is used as a prefix for icons and name for sprites and stylesheets.
your_target.dest
Type: String
Folder for created content.
Optional:
You can redefine options of spritesmith, for example:
options.algorithm
Type: String
Default value: binary-tree
options.padding
Type: String
Default value: 10
List of spritesmith options is here: npmjs.org/package/spritesmith
options.svgclass
Type: String
Custom class for SVG element
options.svgstyle
Type: String
Custom style
for SVG element
options.usei8class
Type: Bool
Default value: false
Set true
if you need .ie8
class only, without universal fallback for the most of old browsers
options.movestyles
Type: Bool
Default value: false
Set true
if you need to move the content of embedded <style>
tags to the icon's files, prefixed with their IDs, so there won't be conflicts for different icons.
Usage Examples
Default:
grunt.initConfig({
svg_fallback: {
your_target: {
src: 'sources/',
dest: 'result/'
}
}
});
If you need to redefine options for spritesmith, place it to section options
:
svg_fallback: {
options: {
algorithm: 'binary-tree',
padding: 10
},
your_target: {
src: 'sources/',
dest: 'result/'
}
}
If you need to test intermediate results, add option debug
:
svg_fallback: {
options: {
debug: true
},
your_target: {
src: 'sources/',
dest: 'result/'
}
}
and folder temp will not be removed.
Color and resize your icons
It works for transparent svg only.
You can add config.json to folder with icons and define preffered changes of initial svg-files.
Example of config:
{
// default color for all svg-images, OPTIONAL
"color": "orangered",
// set list of default sizes if you need to resize initial svg-images, OPTIONAL
"default-sizes": {
// set size for particular icon
"arrow-up": {
// set width or height
"width": "182"
},
"home": {
"height": "42"
}
},
// set list of modifications, OPTIONAL.
// List is used for creating files modificatios before it turns to PNG-sprite
"icons": {
"arrow-up": [{
"width": "50"
}, {
"color": "green"
}, {
"width": "150",
"color": "steelblue"
}],
"home": [{
"width": "150"
}, {
"width": "170",
"color": "teal"
}, {
"height": "62",
"color": "yellowgreen"
}]
}
}
You can use any part of config or not use it at all.
For input, output and config examples feel free to look into test folder.
More information
Input:
souces
└ myicons
└ mail.svg
kitten.svg
and output:
result
└ myicons.css
myicons.png
myicons.svg
myicons.css:
With universal fallback:
.myicons {
display: inline-block;
background-image: url(myicons.png);
/* This hides bg-image in modern browsers except IE9 */
background: -webkit-linear-gradient(transparent, transparent);
background: linear-gradient(transparent, transparent);
/* This hides bg-image in IE9 */
background-position: -1000vh 0 !important;
fill: orangered;
}
.myicons--mail {
width: 182px;
height: 262px;
background-position: -192px 0;
}
.myicons--mail--green {
width: 182px;
height: 262px;
background-position: 0 0;
fill: green;
}
With IE8 only fallback:
.myicons {
fill: orangered;
}
.ie8 .myicons {
display: inline-block;
background-image: url(myicons.png);
}
.myicons--mail {
width: 182px;
height: 262px;
background-position: -192px 0;
}
.myicons--mail--green {
width: 182px;
height: 262px;
background-position: 0 0;
fill: green;
}
...
Usage of svg
Add SVG-library to the page and add particular icons this way:
<svg xmlns="http://www.w3.org/2000/svg" class="myicons myicons--mail">
<use xlink:href="#myicons--mail"/>
</svg>
Contributing
In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.
Release History
0.2.12 — Update spritesmith to 1.3.0. Add movestyles option (tnx @kizu).
0.2.11 — Fix closing tags again.
0.2.10 — Symbols with modifications removed from generated library.
0.2.9 — Fix closing tags for files with <style> inside.
0.2.8 — Fix closing tags. Use param 'closetags: false' to switch it off.
0.2.7 — Fixes incorrect \s
. Thanks @kizu.
0.2.3 — Fix colorizing. Improve clearing of SVG.
0.2.2 — Fix closing tags.
0.2.1 — Plugin find unclosed tags and close it. From now you can set particular folder from set using param folder
.
0.2.0 — Universal fallback is added. Works for Android 2.x, Opera Mini, IE8. Fix preview for old browsers.
0.1.38 — Fix creating file modifications with hex colors
0.1.36 — Add options for custom class for svg (svgclass
) and for custom style (svgstyle
)
0.1.35 — Add text fields for easy copying and using icons
0.1.34 — Fix colorizing PNG if there aren't variations for files in config
0.1.33 — Fix colorizing SVG in CSS
0.1.32 — Fix colorizing when colors come from defaults
0.1.30 — Change delimiter in names of SVG-symbols: was -
, now --
— for consistency with class names
0.1.26 — Move changing SVG functions to module svg-modify
0.1.24 — Fix behavior for folders without config
0.1.20 — Add prefix for sizes to names of files
0.1.16 — Add config for resize SVG-images to default sizes
0.1.15 — Add opening demo page in default browser
0.1.14 — Add icons sizes to demo list
0.1.13 — Add property fill
to CSS