SVG sprites & stacks
Sprite modes
- view
tiled sprites with pre-defined
<view>elements, useful for foreground images via SVG fragment identifiers - defs
inline sprites using the
<defs>element - symbol
inline sprites using the
<symbol>element - stack
SVG stacks — icons as
background-imageviaurl(icon.svg#ID)
API
The SVGSpriter module is a low-level building block: register SVG source files, compile, and write the resulting files yourself. See the full API documentation (markdown) for details, or continue below for the command line way.
Command line
Install the CLI globally, then use the svgforge command:
npm install svgforge-cli -gsvgforge --view --view-example --dest=out assets/*.svgCreate a «view» sprite plus an example HTML document.
svgforge --defs --defs-render-css --defs-example --dest=out assets/*.svgCreate a «defs» sprite with a CSS stylesheet and an example document.
svgforge -S -p 10 assets/*.svgCreate a «stack» sprite with 10px padding around all shapes.
svgforge --config config.json 'assets/**/*.svg'Use a config file and recursive globbing.