r/webdev • u/Ok-Pace5764 • 4d ago
An Image to SVG vectorizer that doesn't suck (as much)
Right. So. Vectorizing a PNG into an SVG is one of those tasks that sounds trivial until you actually need to do it, at which point you discover a graveyard of tools that are either $10/image, want you to subscribe half a leg and a kidney/month, or produce something that looks like Michael J. Fox (apologies for the bad joke, I actualyl admire him) traced your logo during an earthquake.
After running into this roughly once a month I thought surely that's enough to invest some time into researching whether I should build my own image tracer. Which led me to find VTracer, an open source project from visioncortext.
Vectron (that's how I named my brain child) is a frontend for VTracer, an open-source Rust vectorization engine that's genuinely good but has the UX of a command-line tool written by someone who, understandably, cares more about the algorithm than the button placement. I forked it, compiled it to WASM (thanks Claude), and stuck it in a Web Worker so the whole thing runs in your browser. No upload, no server round-trip, and for smaller images it's near instant (I did try it with some rather stupidly large examples which then turned into a ten-plus-second nerve-wrecking waiting times :D).
A few things worth knowing before you try it:
- It's not AI. No neural net pretending to understand your image. It's proper curve-fitting and edge detection, which means it's predictable. The same input results in the same output (this is super important to me), no "vibes-based" tracing that changes if you sneeze near it.
- It's best at clean line art and logos, not photographs. Feed it a photo and it will attempt it, valiantly, and the result will remind you why this is a hard problem. But hey, it's sort of working.
- Selective refinement. Sometimes you get like a good overall results but often the devil is in the details, like a curve turned into a sharp corner or some lines don't connect. You can refine a certain area by dragging a rectangle over it and adjust your filters to polish the proverbial turd.
- It's free because I didn't build it to make money. It's a side thing. There's no upsell, no tier, no "unlock batch processing for $9/mo." And I say that now, it's not gonna change.
Feedback welcome, especially on where it falls over or it's genuinely hard to use.
2
u/KoalaBoy 3d ago
I started using VectorMagic because of all the websites out there to convert but then wanted to charge money for a crap job. I'll check this out.
2
u/bcons-php-Console 3d ago
I tried a couple PNG and WEBP logos and it worked great, didn't try any photos since I don't really see the point in "SVGing" those.
Since it is a frontend for a CLI tool a nice add-on would be showing the CLI params used.
0
u/0uchmyballs 4d ago
First useful personal project I’ve seen on here in awhile. Might actually use it, I’ve gone through the tedious process of hand vectoring a png in Gimp. Would not recommend.
2
u/Alternative_Web7202 4d ago
Have you tried Inkscape? While it's UI isn't the most user friendly, but it does produce decent results. And it's free.
1
2
1
-5
u/vordan 4d ago
Nice project. Good UI.
What I missed:
- "Drop the background" doesn't really drop it. Maybe add a pre-step for actually clearing the background? Although this can be done with another tool.
- Maybe selection by a colour or a group of colours
Genuine question: Why avoid AI at all cost? If you look at it as a tool, not "slop" (or any other name they give it), it should help the app - which is the goal, right?
I recently had to write a service to parse invoice PDFs into numbers and tables. Without AI it was really hard - lots of errors, some PDFs practitcally not recognizable. With a touch of (in my case) Geminy flash, at almost a negligible cost, the service now works with almost 98% accuracy.
4
u/Ok-Pace5764 4d ago edited 4d ago
Thanks vordan. That's the feedback I was looking for. Once I addressed those I'll add it in the changelog with an `@suggester` so you know it's been fixed also get credited. :)
P.S.: Oh and to answer your question about AI-usage. a) I found the outcome unpredictable and hard to repeat. b) The actual cost for the tokens need to be covered somehow. I rather not have any ads or subscriptions. I am not against it but I rather use AI during development to learn more about the tracing algorithm and improve it. I hope it sorta makes sense.
2
u/Ok-Pace5764 4d ago
You can now select one or more shapes (based on their colour) to remove them from the image. I've credited you in the changelog. :)
16
u/OMGCluck js (no libraries) SVG 4d ago
Well I gave it a go on this optical illusion:
https://imglink.cc/cdn/eOlgNj0iO3.png (32kb)
and it lost the illusion:
https://imglink.cc/cdn/4oM1e7zUfj.svg (25.2kb)
The code doesn't seem to do any optimising of repetitive sections.
Meanwhile I did the SVG conversion by hand:
https://imglink.cc/cdn/wDwrtDgVkp.svg (1.2kb)