Neatly Positioned Magazines

    nanosvg

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

    88

    Version

    1.5.7

    License

    none

    Unpacked Size

    482 kB

    Total Files

    7

    Last publish

    Collaborators

    • yan.radica
    • weiluo.radica
    • fahmi.radica
    • neel.radica
    • yiqian.radica
    • tom.radica