This is a simple change that can have a HUGE impact on your visuals. Even if the rest of your website is completely awesome, a blurry logo is going to make a bad first impression and harkens back to the days before high definition screens. If you’ve ever struggled with knowing the exact resolution to save your logo file as and/or notice that it still looks blurry no matter how big you make it, then you're probably still using either a png or a jpeg file. And now's the time to ditch those pixel based files for a crystal clear looking svg.
Wait, a what?
An svg is a vector file specifically for use on the web (svg stands for scalable vector graphic). (Remember my post about how great vector files are? Good news- they can be used on websites too!) This has the same advantages as a vector file in print- they are infinitely scalable, with no pixel edges, ever. Basically, you are guaranteed perfect resolution no matter what browser or device you use.
Here’s what you need to do to add an SVG logo to your Wordpress website
- Get your logo in an svg format
You’ll need to start with a vector format to begin with (depending on what programs you have, AI/EPS etc), then re-save it as an SVG. In Canva, this is easy to do - just select “SVG” as the file type when you click on download. Only have your logo in a jpeg or png? I offer a vectorization service to help clients convert their pixel-based logos to vectors, contact me for details. - Install a plugin to enable SVGs
This advice applies if your builder doesn't natively support SVGs, which is most of them (Bricks Builder gets a trophy for its native support of SVGs).
There are many free plugins in Wordpress repository to choose from- I recommend Safe SVG because it also "sanitizes" the file to make sure its stripped of vulnerabilities that hackers might exploit. Once you’ve installed, don’t forget to activate it. - Upload your SVG
I find that SVGs uploaded directly to the media library work best. You may get a "file type not supported" error if you try to upload it via Gutenberg or your page builder. - Replace your logo in the Customizer
Or wherever your theme has the site logo setting. The customizer is found at Dashboard > Appearance > Customize, then usually under Site Identity.
That’s it! Excited to see more great looking, crystal clear logos out there on the web. Once you start seeing how good a vector logo looks, you won't be able to stop seeing all the blurry ones that bring down an otherwise great looking site.
