NanoSVG uses lossless techniques to compress your SVG and save up to 80% bandwidth.
- Compress 22% better than the competition, resulting in smaller SVG images
- Selectively embed fonts to ensure your SVG images works everywhere without loss of fonts irrespective of how you embed them.
- Cleans out malicious codes and scripts
This package requires a paid license from Nano
For free usage, visit Nano.
###This package will be deprecated on July 2023 Radica Software, the development team behind Vecta.io, has decided that our Nano Pro offering will reach end-of-life on July 24, 2023. After this date, maintenance, enhancements, and support for this product will cease.
Installation
npm install -g nanosvg
Usages
Nanosvg can be used on the command line (CLI), or as a module in any node.js compatible build system.
Usages on CLI
Activation
nanosvg --activate=YOUR_SERIAL_KEY
Command line syntax
nanosvg src_glob dest_folder [--options=value]+
Examples
//Compress a single file and output to folder with default options
nanosvg "./test.svg" "./compressed"
//Compress all svg files and output to folder with default options
nanosvg "./images/*.svg" "./compressed"
//Compress all dxf files and output to folder with default options
nanosvg "./images/*.dxf" "./compressed"
//Compress all svg files and output to folder
//with no font embedding and precision = 4
nanosvg "./images/*.svg" "./compressed" --fonts=false --precision=4
//Compress all svg files using config file
//Prepare config.json file before compressing
//config.json content
{
"fonts": false,
"attrs": [
"my_attr",
"other_attr"
]
}
//Compress with --config option
nanosvg "./images/*.svg" "./compressed" --config config.json
Usage as a module
var nanofy = require('nanosvg');
//Compress a single file and output to folder with default options
nanofy('./test.svg', './compressed').then(function () {
console.log('Completed');
});
//Compress all svg files and output to folder with default options
nanofy('./images/*.svg', './compressed').then(function () {
console.log('Completed');
});
//Compress all svg files and output to folder
//with no font embedding and precision = 4
nanofy('./images/*.svg', './compressed', {
fonts: false,
precision: 4
}).then(function () { console.log('Completed'); });
//Compress all svg files and preserve "my_attribute" attribute in
//the SVG
nanofy('./images/*.svg', './compressed', {
attrs: [
'my_attribute',
'other_attr'
]
}).then(function () { console.log('Completed'); });
//Compress SVG from buffer
_fs.readFile('./test.svg').then(function(buffer) {
return nanofy(buffer, null, {silent: true}).then(function(compressed_buffer) {
return _fs.writeFile('./nanofied.svg', compressed_buffer);
});
});
//Gulp task to watch for SVG changes
gulp.task('Watch SVG', function() {
gulp.watch('watch/this/folder/*.svg')
.on('change', function(file) {
nanofy(file, './destination/folder');
});
});
Options
precision=3 <number>
Set the number of decimal places to compress for numerical values, defaults to 3. Applies only to values with decimal places larger than precision.
<!-- original -->
<path d="M 0 0 C 123.75 50 117.1875 11.5625 140.93753 11.56251"/>
<!-- precision = 3 (default) -->
<path d="M0 0c123.75 50 117.188 11.563 140.938 11.563"/>
<!-- precision = 4 -->
<path d="M0 0c123.75 50 117.1875 11.5625 140.9375 11.5625"/>
fonts=true <boolean>
Enable the embedding of fonts, defaults to true. If enabled, will embed fonts into the SVG, if text and fonts are detected. Fonts must be available on Google fonts.
classes=false
Do not modify your classes in the SVG, defaults to false.
<!-- Original -->
<rect class="MyClass" x="0" y="0" width="50" height="50"/>
<!-- classes = false -->
<path class="A" fill="none" d="M0 0h50v50H.5z"/>
<!-- classes = true -->
<path class="MyClass" fill="none" d="M0 0h50v50H.5z"/>
ids=false
Do not modify your id(s) in the SVG, defaults to false.
<!-- Original -->
<rect id="MyID" x="0" y="0" width="50" height="50"/>
<!-- ids = false -->
<path ids="A" fill="none" d="M0 0h50v50H.5z"/>
<!-- ids = true -->
<path ids="MyID" fill="none" d="M0 0h50v50H.5z"/>
structure=false
Do not modify your structure in the SVG, defaults to false. Useful when used on object
tags, when you want to maintain original structure for interactivity.
events=false
Do not modify your events in the SVG, defaults to false. Useful when used on object
tags, when you want to maintain these events for interactivity.
wordpress=false
Export as WordPress-compatible SVG, defaults to false.
react=false
Export as React SVG component in JSX file format, defaults to false.
font_path=path-to-font-folder
Embed custom fonts. Supported format: ttf & woff
Example:
- MyFont.ttf is placed in a folder "myfonts"
- nanosvg src_glob dest_folder --local_fonts=myfonts
- SVG as below
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" text-anchor="middle">
<!-- font-family must be the same as the font file name -->
<text font-size="28" fill="#000" font-family="MyFont" stroke="none">
<tspan x="210" y="180">Embed this font</tspan>
</text>
</svg>
config=path-to-config
Compress with configuration file. The configuration file can contain all of the options.
{
"font_path": "path-to-font-folder",
"structure": true,
"attrs": [
"my_attr",
"other_attr"
]
}
gzip=false
Compress with gzip, defaults to false.
br=11 <number>
Configure brotli compression quality, defaults to 11. Compression quality level ranged from 0-11.
Got any question? Shoot us an email at support@vecta.io