Every so often I find myself with a JPG logo that I really want an SVG for… It’s a pain because the JPG just won’t scale for web or print work.
There are a number of tracers out there, however until recently I’ve always found that they create more problems than they solve. A recent project put me back looking for one of those tools, and figuring that it is 2020, things must have improved by now… I was pleased to find svg-tracer.glitch.me which seems to do a decent job.
A couple of lessons I learnt in the process:
- Black logos on white backgrounds work the best. It’s obvious, but worth stating.
- Multicoloured logos might require a little more work. If you have seperate blocks of colour in the logo (cleared with a gap between them) everything is happy, however if you have overlapping colours, things get interesting. I ended up selecting the colours in the logo and then creating different graphics which I then sent through the tracer seperately. I then pulled the different layers in Sketch (Inkscape would be fine) and lined everything up.
- Logos with overlapping transparency… Forget it unless you are more patient than me!
I would recommend sending the final SVG through a SVG optimiser like ImageOptim (make sure to disable lossy minification otherwise the ViewBox attribute gets ripped out) or Jake Archibald’s OMGSVG.
Yes, I know that Adobe Illustrator has this kind of thing built in… But I’m not investing in Adobe products.
Post changelog
- 2020-05-17 – Decouple gulp from SCSS generation
