I happen to have bookmarked a few new-to-me SVG tools that all seemed to fit together in interesting ways, so I thought I would have a play and share.
Raster to SVG
One type of these tools is Raster-to-SVG. That is, taking something like a photo and “vectorizing” it. I happen to have my multivitamin bottle on my desk, so I “drew” that (no laughing).
Now I want that in vector. So my first step was SVGcode, a Progressive Web App (PWA) from Thomas Steiner that I think is pretty cool. (Feels in the spirit of SVGOMG for optimization that I also think is cool.) First I took a “better” straight on photo of the “drawing”.
The I dropped this on SVGcode. It died. That is, it “spun” for a while then ultimately threw some “Out of Bounds” error. I think the graphic was just too big. All I did was crop it down to closer around the drawings edges and tried again, and then it worked. After fiddling all the knobs, this was the best I could do.
There must have been too much shading on the photo on the paper so that crud at the bottom right seemed unavoidable. Certainly a cleaner picture (perhaps even a good scan) would have avoided this. That stuff is pretty easy to grab and clean up in something like Adobe Illustrator.
But — if you’re going to use Illustrator, might as well us it’s raster-to-vector abilities anyway. I tried that, just dragging the image onto a new document and clicking the Image Trace button. This ended up cleaner was faster than SVGcode (but, SVGcode is free, and Illustrator is expensive, so there’s that.)
I also had Vectorizer.AI on my list to try, and this was the result there:
It’s clearly designed for full color raster images and conversion and had no options to control anything. Certainly worth trying if you’re shooting for that look.
SVG to 3D
The other tools on my list was this Vector to 3D tool. So all I did was upload the nicest vectorized copy I had, and…
Ha! There was a solid white background behind my SVG, so I had to go and delete that. But the look with just lines wasn’t really doing much, so I fiddled with the SVG such that it was transparent around the object, but the objects had backgrounds. Then I uploaded that and fiddled with the controls and got this!
I think that’s pretty darn cool! There is a lot of controls on this app, and more to unlock with paid plans, so that’s certainly worth checking out.
The other 3D tool I had bookmarked that took SVG was design.glyf.space. I took my same SVG asset, the one with the colored backgrounds, and dropped it on there, choosing the simplest looking model first. This is probably easiest to understand as a video since the model I picked kinda went with stacked flat layers:
This tool is more in the AI-weirdness category so you’ll have to have a good play with the different possibilities there.
I don’t even know what to tell you there.
