Have ideas to improve npm?Join in the discussion! »

nanosvg

1.5.4 • 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

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


//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:

  1. MyFont.ttf is placed in a folder "myfonts"
  2. nanosvg src_glob dest_folder --local_fonts=myfonts
  3. 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

Install

npm i nanosvg

DownloadsWeekly Downloads

273

Version

1.5.4

License

none

Unpacked Size

465 kB

Total Files

7

Last publish

Collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar