Converting .png to .svg 'trace-bitmap', coming out bubbled/soft edges, advice
I have a png that I'm trying to convert to vector graphic (svg) and, following a youtube tutorial, I've successfully "trace-bitmap"'d the png. However, comparing the two, the original png, and the 'traced' svg, it seems that no matter how I set my 'single scan' thresholds, etc, the tracing always wants to come out bubbled instead of having sharp lines and corners like the original.
BTW I am using Inkscape here to do this.
My original issue:
I have an .svg that I've downloaded from noun icons, which, unbeknownst to me at the time, has an embedded png image inside of it, instead of being comprised of only vector graphic paths. And because of this, I'm not able to affect the icon with the 'fill' or 'stroke' property in CSS like I need to. But I like the icon enough that I want to somehow create those inner vector graphic paths.
So far, I've tried just exporting the entire thing as a .png, which is where my above example comes from, and then from that, trace-bitmapping it, in Inkscape, into another .svg (to replace the original). As can be seen in the picture, this tracing isn't working out as I'd hoped, ruining the original aesthetic of the image.
Mightn't there be another approach that could be had here?
14 Replies
you won't get a lot better
what you can do is to use another icon or re-create everything manually
time to get that pen tool and make it from scratch ๐
it's a fun project for the whole family week
if that tracing gives you paths you probably can smooth out the corners ๐
or modify it to add the rounded corners
but still, it needs manual work
yep the automatic tools only can get you so far ๐
sadly
it's easier to just try to find something else
https://www.freeconvert.com/svg-converter I've had some luck with this. I would def look at the output and clean it up if needed after running it through https://jakearchibald.github.io/svgomg/
Recraft did a reasonably good job of vectorizing โ handled a gradient properly & didn't generate a ton of points.
Even that though, I had to go through and do some manual cleaning.
Recraft: Generative AI Design Tool
Create and edit digital illustrations, art, and 3D graphics in a uniform brand style. Use Recraft to quickly generate designs for your app, website, or brand online for free.
the problem of "did a ton of points" is that it quickly bloats the file
for example, all the rounded corners can be done with an arch, instead of 600 points
Oh yeah, I get most of my vectors from Vecteezy & for reasons unbeknownst to me their preferred format is Encapsulated PostScript which generally converts to a mess in SVG.
That's why I was saying Recraft wasn't too bad on the file size. It could be better, but it definitely is the best I've seen so far.
๐คฎ
that is disgusting!
Are you kidding? It got the gradient which was what impressed me.
I'll admit you could remove 80% of the points, but if you wanted to do that you could likely remove them in less time than it would take to draw it.
yeah, the gradient is impressive, but ... a straight line is 6 points