Purpose : PNG to SVG vector transformation

[mastef]

I've been looking into how to reduce the filesize of files like this :

The .png is 66kb big, but as a svg file should be much much smaller. This could be a great use-case for frontend web images optimization.

Provided issues like #13 #7 and #6 would be implemented, the result could be very close?

Also possibly merging neighbouring same-color shapes. Maybe applying gradient on the final frame.

[Tw1ddle]

Do you mean for the original pngs to load eventually or to completely replace them? If the former, then this has a mode that uses primitive and might suit your use case: https://github.com/axe312ger/sqip

[mastef]

To completely replace them - redraw an illustration from a source .jpg / .png to .svg

[Tw1ddle]

For an image that uses a limited colour palette like your example image, a flood-filling approach that makes SVG polygons by tracing each contiguous block of colour would work much better than hillclimbing.

The hillclimbing approach used in Geometrize produces shapes that won't be "optimally" placed, which changes the style of the output image.

Also, obviously when using fewer shapes you often lose details, like the steam on the coffee cup in your example.

So I don't think the approach here is ideal for completely replacing raster images with SVG, if the aim is to reduce file size.

[mastef]

@Tw1ddle Any ideas of projects that would be better suited for this?

I was basically thinking of creating an image with 10k shapes and then merging ( and simplifying ) same color neighbour shapes.

[Tw1ddle]

This has some examples of tools applied to continuous tone images. They all blow up the file size: https://en.wikipedia.org/wiki/Image_tracing#Usage_domains - but given just a few blocks of colour like in your example, they will do much better.

[Tw1ddle]

Hope that answered your question! :smile:

[cancerberoSgx]

@mastef

Hello, I'm experimenting with image tracing technologies with the purpose of converting bitmap images to vector graphics.

Right know I have relatively well results and working on a tool that provide JavaScript API for Node.js and browsers and CLI: https://www.npmjs.com/package/svg-png-converter

The tracing libraries used are potrace and bitmap2vector

Right now I'm trying to build a geometrize JavaScript API from geometrize-haxe sources https://github.com/Tw1ddle/geometrize-haxe-web/issues/3 and https://github.com/Tw1ddle/geometrize-haxe/pull/15 since I think it can be a a very good technology for this (and also because I think it would be awesome to have a official JavaScript API of this project). Checkout https://github.com/Tw1ddle/geometrize-haxe-web/issues/3#issuecomment-504338229

Help welcome and also if you know another image tracing technology that might be useful for this....

Thanks