NodeJs convert PNG to SVG?

Question

i search a solution to convert a PNG or JPEG Image to a SVG Vectordrawing. I found a lot "Convert SVG to PNG" but nothing about converting a PNG to a SVG. Can someone help me pls?

Answer 1

Based on original the Potrace there is an npm package called node-potrace to generate SVG silhouettes from bitmap images.

Potrace is a tool for tracing a bitmap, which means, transforming a bitmap into a smooth, scalable image. T

Demo: http://kilobtye.github.io/potrace/

Answer 2

I'm trying to collect different image tracing libraries into one single project, currently potrace, imagetracerjs and geometrize here: (WIP / very new project)

browser/node.js : API: https://www.npmjs.com/package/svg-png-converter

command line tool: https://www.npmjs.com/package/svg-png-converter-cli

user-friendly playground (WIP): https://cancerberosgx.github.io/demos/bitmap2vector-converter/

no so friendly playground (only potrace implementation) : https://cancerberosgx.github.io/demos/svg-png-converter/playground/#

For logo-drawing like images it works fine. For photos, it can replicate it almost exactly but the svg generated is too complex.

The library will optimize the resulting SVG using svgo which simplifies and decreases its size a lot.

If anybody knows about another JS image tracing library please comment.

Answer 3

If you want to convert multiple png files to svg, you can use this script.

const fs = require('fs')
const potrace = require('potrace')

const convertFolderPath = 'converts'
const files = [
  'file 1',
  'file 2'
]

const convertFile = file => {
  return new Promise((resolve, reject) => {
    potrace.trace(file, (err, svg) => {
      if (err) reject(err)
      const splitFilePath = file.split('/')
      const filename = splitFilePath[splitFilePath.length - 1]
      const splitFilename = filename.split('.')
      splitFilename[splitFilename.length - 1] = 'svg'
      const newFilename = splitFilename.join('.')
      const outputPath = `${convertFolderPath}/${newFilename}`
      fs.writeFileSync(outputPath, svg)
      resolve(true)
    })
  })
}

if (!fs.existsSync(convertFolderPath)) {
  fs.mkdirSync(convertFolderPath)
}

let convertedFiles = 0
files.forEach(async file => {
  await convertFile(file)
  convertedFiles++
  console.log(`${convertedFiles}/${files.length} converted`)
})

Answer 4

PNG to SVG is similar than JPG to SVG

Quoting This answer

Three options

Use Online convert's API

http://apiv2.online-convert.com/

Run your own node.js server and use Potrace or AutoTrace

https://www.npmjs.com/package/potrace used by Online convert https://www.npmjs.com/package/autotrace

Or use imagetracerjs client side.

https://github.com/jankovicsandras/imagetracerjs

If you want to go into option 2, I have made a nodejs server implementing potrace on https://github.com/piercus/nodeJpg2SVG