nanosvg

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 [e-mail]