Conversion of JPEG to SVG in Javascript

Question

Can anyone help... how to convert Image to Vectors (SVG) through Javascript.......! Any help will be awesome....!

Walkin

Duplicate of https://mcmap.net/q/67183/-convert-svg-to-image-jpeg-png-etc-in-the-browser from same user. – Nuncio

Maybe I was confused by the two questions having identical titles! – Nuncio

@Joe: I can see how that would confuse you, yes. The questions themselves are phrased differently, tho'. Hmm... – Equestrian

Ya, he's wanting to go both ways. Wait, that sounded bad. – Epagoge

Answer 1

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

Yancey

Answer 2

This project supports both bitmap to SVG and SVG to bitmap (png/jpeg/gif/etc),offers flexible settings, different renderers, JavaScript API for node.js and browser, and Command line .

If configured correctly it generates good results and small svg size. If you just want to transform logos / drawings then no config is needed but if photographs / realistic paintings then some you need to play with the settings until satisfied with size / quality ratio.

https://www.npmjs.com/package/svg-png-converter

It has a playground although right now I'm working on a better one since more features has been added:

https://cancerberosgx.github.io/demos/svg-png-converter/playground/#

Sinewy

Answer 3

What you're asking isn't really possible. I mean, you could try to do it, but I doubt the results would be particularly satisfying.

SVG to JPEG is a one-way conversion; converting a raster image to a vector image is non-trivial, see this question.

Equestrian

That said, it is possible to port e.g potrace to javascript using HTML5 canvas. It will likely be a bit slow, and it will require a bit of porting work, but it's not impossible. Tracing raster images and producing nice vector graphic results is a hard problem OTOH. – Chaulmoogra

@Erik Dahlström: For some value of "possible". – Equestrian

Hi there. Do you know if this is the current state of affairs in 2019? Thanks. – Grani

@Grani The limitation here is mostly theoretical, not technical. The kind of data an SVG image contains just isn’t the same kind of data a JPEG image contains. – Equestrian

@WillihamTotland thanks for quick response. understood, just wondering if automated tracing has advanced since 2010. thanks for your help! – Grani

@Grani It’s possible that someone has put some kind of AI to it and gotten better results, but I’m not aware of anything specific. – Equestrian

Answer 4

I too was looking for a simple conversion from image to svg - however it is not that easy, but I did find a tool which could take simple images (black and white) and transform them into svg files, also result was much nicer, since it somehow smooth the edges out - however when trying with color images, it did not work. If you want to make simple images and then later tranform into svg, then using an online converter could help you

I used this to convert a couple of simple .png images to .svg

http://image.online-convert.com/convert-to-svg

Bike