Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

nanosvg

1.4.2 • Public • Published

Nano

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
  • For more information, visit Nano

This package requires a paid license from Nano

For free usage, visit Nano.

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

Please purchase a license from Nano. That would help us improve and keep us going. A one time activation is required.

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 

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'); });
 
//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.

Install

npm i nanosvg

DownloadsWeekly Downloads

121

Version

1.4.2

License

none

Unpacked Size

433 kB

Total Files

7

Last publish

Collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar