- Status / TODO
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)
- 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.
--optimizeoptimizes 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.
npm install svg-png-converter
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.
Pass a Buffer as input, and receive a Buffer as output with a JPEG image content.
Transform a literal SVG string to a DataUrl containing JPEG with custom size and quality jpeg
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):
Support color output and does good job preserving the original colors by default
has multiple settings to configure output quality, size, colors, noise, etc.
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.
--optimizeminify output SVG with svgo. This is THE svg optimization tool which has as dependency and runs in the browser.
Convert a .gif file using
imagetracer implementation, limiting output number of colors to 16, not rendering segments smaller than 4
Command Line examples
svg2png --input "some/**/*.svg" --output ../assets/jpeg --format jpegsvg-png-converter --input " > tmp.svg
png2svg --input "some/**/*.png" --output vectorspng2svg --input foo.jpeg > tmp.svg
Status / TODO
- Node.js API and tests
- CLI tests
- browser tests
- Make sure we are using Potrace latest forks and not the original one.
- add https://github.com/cancerberoSgx/svgo
- 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 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
It also uses bitmap2vector that is a facade over