svg-png-converter
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.9 • Public • Published

    svg-png-converter

    Contents

    Playground

    Checkout Project Playground to test converting SVG images to PNG and back again using different configurations.

    Also, checkout this app build with this library to transform bitmap to SVG online: bitmap2vector (WIP)

    Summary

    • Repository.
    • Convert SVG to PNG / JPEG
    • Convert PNG/JPEG to SVG.
      • produced SVG are paths that resembles the original image relatively well and in a relative small output length.
      • It does good job with cartoons / logos etc
      • photos / realistic images need to be configured using the options since they output could be large in size.
    • Supports browsers and node.js (Same JavaScript API).
    • --optimize optimizes SVG output files with svgo
    • Command Line interface.
    • Uses fabricjs to rasterize SVG documents into PNG/JPEG,.
    • Uses potrace and bitmap2vector to convert PNG/JPEG bitmap images to SVG vector graphics with flexible options to control output size / quality.

    Install

    npm install svg-png-converter

    svg2png

    • Accept several type of input objects: string, Buffer, typedArrays, DataUrls, Globs, etc

    • In the browser, Buffer is emulated with Buffer so the same API and implementation works both on it and Node.js.

    JavaScript API examples

    Example 1

    Pass a Buffer as input, and receive a Buffer as output with a JPEG image content.

    import {svg2png} from 'svg-png-converter'
     
    let outputBuffer = await svg2png({ 
      input: readFileSync('./ss/foo.svg'), 
      encoding: 'buffer', 
      format: 'jpeg',
    })
    writeFileSync("tmp25.jpg", outputBuffer)

    Example 2

    Transform a literal SVG string to a DataUrl containing JPEG with custom size and quality jpeg

    import {svg2png} from 'svg-png-converter'
     
    let s = await svg2png({ 
      input: `
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg width="632pt" height="91pt" viewBox="0.00 0.00 631.61 91.30" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 112)">
        <polygon fill="#ffffff" stroke="transparent" points="-4,4 -4,-112 58,-112 58,4 -4,4"/>
        <ellipse fill="none" stroke="#000000" cx="27" cy="-90" rx="27" ry="18"/>
        <text text-anchor="middle" x="27" y="-85.8" font-family="Times,serif" font-size="14.00" fill="#000000">a</text>
      </g>
    </svg>
    `.trim(), 
      encoding: 'dataURL', 
      format: 'jpeg',
      width: 100,
      height: 100,
      multiplier: .7,
      quality: .5
    })
    // data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ

    png2svg

    Image Tracers

    Transforming a bitmap image to a vector document is not straight forward. .This library accomplish that using different implementations and options to configure them. Right now it support the following "tracers" (some comments about each):

    • bitmap2vector

    • Support color output and does good job preserving the original colors by default

    • has multiple settings to configure output quality, size, colors, noise, etc.

    • potrace

    • Supports only monochromatic color output (configurable).

    • Does a good job preserving edges/shapes and color contrast / light.

    • Has options to remove noise, control quality, etc. Has options to add iterations for color posterization but is not simple / requires manual work.

    • (IMO) Potrace generated shapes are better / cleaner so if only monochromatic output is needed this could be better than the other tracers.

    SVG Optimization

    • passing --optimize minify output SVG with svgo. This is THE svg optimization tool which has as dependency and runs in the browser.

    JavaScript API

    Convert a .gif file using imagetracer implementation, limiting output number of colors to 16, not rendering segments smaller than 4

    import { png2svg } from 'svg-png-converter'
     
    const result = await png2svg({ 
      tracer: 'imagetracer', 
      optimize: true,
      input: readFileSync('test/assets/tmp2.`gif`') ,
      numberofcolors: 24, 
      pathomit: 1,
    })
    writeFileSync("tmp25.png", s)

    TODO

    Command Line examples

    svg2png

    svg2png --input "some/**/*.svg" --output ../assets/jpeg --format jpeg
    svg-png-converter --input " > tmp.svg

    png2svg

    png2svg --input "some/**/*.png" --output vectors 
    png2svg --input foo.jpeg > tmp.svg

    Options

    TODO

    See types.ts. Options apply both to JavaScript API and CLI.

    Status / TODO

    Ideas

    • This is another library to rasterize svgs DOM based and fast: https://github.com/canvg/canvg - we could support also that as an alternative to fabric and measure
    • switch between output/input images so we can perform png=>svg=> png multiple times to see if degrades or improves. Also a mechanism to perform this N times.
    • add ImageMagic to measure differenc e
    • idea: a general preprocessing ImageMagic/jimp filter - for example edge detection, scale. Perhaps jimp already support these

    Why?

    Why another SVG rasterize library?

    There are several packages that rasterize SVG, but all of them (or what I found) work only on node.js or only on the browser and I wanted something that has the same API for both environments.

    Why a library to convert bitmaps to SVG ?

    I found several projects that claim to convert bitmap to SVG but all of them implies pixel per pixel or data-url dumps of the bitmap.

    Nevertheless, I recently discovered libraries like http://potrace.sourceforge.net/, https://github.com/Tw1ddle/geometrize, https://github.com/fogleman/primitive that reproduce images from geometric primitives:

    A target image is provided as input. The algorithm tries to find the single most optimal shape that can be drawn to minimize the error between the target image and the drawn image. It repeats this process, adding one shape at a time. Around 50 to 200 shapes are needed to reach a result that is recognizable yet artistic and abstract. a SVG iterating on small shapes end up with an acceptable approximation of the original, and the produced SVG are indeed real paths.

    I observed that resulting vector images resembles the original acceptably well and the resulting document is indeed a collection of one or more shapes instead of just points or a data url. Also the resulting document size is acceptably small

    Many of them supports JavaScript and this one in particular supports both node.js and browsers: https://github.com/tooolbox/node-potrace, and that's what this project uses to transform SVG to bitmaps.

    It also uses bitmap2vector that is a facade over

    Install

    npm i svg-png-converter

    DownloadsWeekly Downloads

    1,095

    Version

    0.0.9

    License

    MIT

    Unpacked Size

    92 kB

    Total Files

    47

    Last publish

    Collaborators

    • cancerberosgx