{"id":773,"date":"2024-02-09T12:07:22","date_gmt":"2024-02-09T18:07:22","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=773"},"modified":"2024-02-09T12:07:22","modified_gmt":"2024-02-09T18:07:22","slug":"playing-with-raster-to-svg-to-3d-tools","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/playing-with-raster-to-svg-to-3d-tools\/","title":{"rendered":"Playing with Raster to SVG to 3D Tools"},"content":{"rendered":"\n

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. <\/p>\n\n\n\n

Raster to SVG<\/h2>\n\n\n\n

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). <\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

Now I want that in vector. So my first step was SVGcode<\/a>, a Progressive Web App (PWA) from Thomas Steiner<\/a> that I think is pretty cool. (Feels in the spirit of SVGOMG<\/a> for optimization that I also think is cool.) First I took a “better” straight on photo of the “drawing”.<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

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.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

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. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

But \u2014 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<\/strong> button. This ended up cleaner was faster than SVGcode (but, SVGcode is free, and Illustrator is expensive, so there’s that.)<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

I also had Vectorizer.AI<\/a> on my list to try, and this was the result there:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

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<\/a>. <\/p>\n\n\n\n

SVG to 3D<\/h2>\n\n\n\n

The other tools on my list was this Vector to 3D tool<\/a>. So all I did was upload the nicest vectorized copy I had, and… <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

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!<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

I think that’s pretty darn cool! There is a lot<\/em> of controls on this app, and more to unlock with paid plans, so that’s certainly worth checking out. <\/p>\n\n\n\n

The other 3D tool I had bookmarked that took SVG was design.glyf.space<\/a>. 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:<\/p>\n\n\n\n\t\t

\n\t\t\t