Nutrient Packed Morsels

    svg-inplace-rasterize
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.3 • Public • Published

    SVG Inplace Rasterize

    Rasterize parts of an SVG to keep it animatable while reducing size and improving render time.

    Getting started

    npm i svg-inplace-rasterize # add -g to make cli available 
    svg-inplace-rasterize --input test/files/wiki-example.svg --output tmp/out.svg -m 3 --format webp
    const { InplaceRasterizer } = require('svg-inplace-rasterize');
     
    const rasterizer = new InplaceRasterizer();
     
    const stream = fs.createReadStream('file.svg');
     
    const svg = await rasterizer.rasterize(stream, {
      multiplier: 3,
      filter: $ => $('g'), // Cheerio object
      format: 'webp'
    });
     
    fs.writeFile('out.svg', svg);

    Features

    This library takes some elements in a SVG file, rasterizes them using LibRsvg, and replaces the original elements with <image> tags with data uris.

    It uses Sharp to create WebP images from the PNG output of LibRsvg.

    Filter

    You can select which elements to rasterize by using the filter option. This library uses Cheerio, which has the same API as jQuery.

    The CLI uses this function by default, which selects all elements with an id that have no children with ids:

    function($) {
      const x = $('*[id]:not([id$="!"])').toArray();
      return x.filter(el => !$(el).children('*[id]:not([id$="!"])').length);
    }

    Building librsvg

    If librsvg has to be built from scratch, libffi must be installed on your system, and in your PKG_CONFIG_PATH.

    export PKG_CONFIG_PATH="/usr/local/Cellar/libffi/3.2.1/lib/pkgconfig:${PKG_CONFIG_PATH}"

    Requirements

    • No transforms on elements that are rasterized, nor on their parents.

    Todo

    • Support transform (very common on Inkscape files)

    Special characters

    Applies to leaf-with-id and leaf-with-id-illustrator:

    • Id ends with @: do not rasterize
    • Id ends with &: force rasterize
    • Id ends with !: act as if no id

    Install

    npm i svg-inplace-rasterize

    DownloadsWeekly Downloads

    14

    Version

    0.0.3

    License

    MIT

    Unpacked Size

    14.1 kB

    Total Files

    8

    Last publish

    Collaborators

    • siemenvdm
    • izidormaklary
    • oliverobrien
    • hansottowirtz