right click > Trace Bitmap> multicolor (scroll to color in detection mod)
https://designbundles.net/design-school/how-to-convert-a-jpegpng-to-a-vector-in-inkscape
Auto trace won’t do a good job in any app, free or paid. You’ll need to trace it by hand. As a graphic designer, I spent many, many hours doing exactly this–hand tracing shitty raster logos:
As someone who is not a graphic designer, I spent almost a week tracing and web optimizing my workplace’s logo.
Before I started, it was stored as a compressed .jpeg in a fucking word document from 2010 or earlier
Sorry for being vague, I don’t do this often…
Something something… path…
trace bitmap tool…Which is probably covered in your links.
Anyway…
You’ll likely have to play with whatever levels and clean up manually.
Level filters can be used on individual color channels if I remember right.
Beware the tool not liking super sharp angles too much. Finding the sweet spot between too much smoothing and too much noise is sometimes annoying.
Compression artifacts can cause noise in the path, the cleaner the source the better.I don’t remember the menu, but you can also edit individual points in the generated path if needed.
Anyway, that’s what I do to transform a picture into a 2D path to later import in 3D CAD software.
Thanks to @MattW03@lemmy.ca, @chasingtheflow@lemmy.world, @DarrinBrunner@lemmy.world, @DarkSirrush@piefed.ca, @InEnduringGrowStrong@sh.itjust.works, @young_broccoli@lemmy.dbzer0.com, @FriendOfDeSoto@startrek.website, @Albbi@lemmy.ca for taking the time to answer and for giving suggestions.👍
It’ll take me a little while to work my way through all of these; I was kind of hoping there would be a quick and dirty (and easy) way to just convert an image file to svg, but as I suspected, this is a much more involved process. The LibreWolf logo, I suspect, is probably one of the trickier choices I could have made for svg conversion/tracing, which is why I chose it.
EDIT: But take a look at these! These are from Betterbird; how did they get the png and the svg so identical-looking? Perhaps they started with the svg first . . . ?
png:
With gradient pics the quickest way i usually do is Trace Bitmap the main shape in a single color an then add the color gradient later.
(the shape is a bit round because i was quick, but you can fine tune the setting)
@MattW03@lemmy.ca Thanks! Looks pretty sharp. I’ll have to study your screenshot carefully . . . BTW, I’m using Inkscape from the Mint repos, which is verison 1.2; do you think it’s worth upgrading to whatever it is now (1.4x I think?)?
I don’t think so. Inkskape was already mature years ago. I just have a more recent version because i’m on an arch-base distro, mint is perfect for work.
Perhaps they started with the svg first . . . ?
Yup. Might have been done in Illustrator but the end result is the same.
Good luck with your project.
Won’t let me upload the svg, but I swear it looks identical to the one above. Sorcery!
Most competent graphic designers will always do logos as svg first, as its incredibly simple to convert that to various other formats - it can even be done with a script easily.
Using an svg as the base also means you can manipulate the file for other users much more easily, and even embed the svg as HTML code - which means no separate files to load on a webpage!
I dont really know how to use Inkspace so my method is probably very roundaboutish but the way I used to do it was:
1.- Use gimp to turn the image into solid colours. IIRC the option is called posterize, I would choose 5 coulours for this Image but you have to experiment whats best.
2.-With the colour selection tool, select one colour and make a new png for only that colour shape.
3.- Do the same for the rest of the colours.
4.- Import one of the colour pngs into inkscape and use the vectorize function, I very rarely needed to do adjustments to it unless the shape was complicated.
5.- Remove the imported png and adjust the colour of your new vector object if needed.
6.- Repeat 4 and 5 for the rest of the pngs on the same inkscape document.
7.- Align objects if needed and save to svg.Hope I explained it in an understandable way, if not, feel free to ask.
No tool in Inkscape will get this 100% right without the need to spruce it up afterwards. I would play around with the trace tool until I get a preview result that gets everything right, i.e. the edges - don’t worry about the colors because they are easier to fix later - except the gradient in the ear and on the chest. And then you go in afterwards and manually fix/draw over those sections until they look like the bitmap.
I’m not anywhere near my computer so I can’t give you more specific instructions.
How about https://www.svgviewer.dev/s/s0OaHB2x
I was curious about the terminal command in the first link you posted. It turned it into an svg, but it didn’t really make an svg. I was curious if it was going to be able to automate it a bit. I guess it gets all the colours in there though. You could probably do that outline tracing after that.
I’m curious about this too. Making SVGs is something I feel like I’d like but haven’t touched.
