How to add a SVG logo to your website.
When adding a logo to a website we have always used a PNG or JPG file, which is a raster format that will degrade in clarity as it is enlarged. Being able to now add a SVG file, which is vector format, allows you to have your website logo look crystal clear on all devices including retina displays.
Having your logo in vector format allows it to be enlarged infinitely without it pixelating or losing quality. This assures you, that your company’s logo will look the way it should no matter what device it is viewed on.
When building out websites for my clients I always use GeneratePress as the starting framework. In my opinion it is the fastest, lightest and most perfectly coded WordPress theme available. When adding your logo to GeneratePress you can easily add your logo as a SVG file with a little bit of custom CSS backed by a plugin that supports SVG files.
Opening a raster version of your logo, such as a PNG or JPG, in Illustrator and saving it as a SVG does not make your logo vector. It must have been created in vector format from the beginning to be used as a true SVG file.
Also, make sure you SVG logo file does not have any live type in it. All text in your logo file must be outlined or else the SVG file will not import correctly. You can easily do this in Adobe Illustrator by selecting all of your live text, go to the Type menu, scroll down and select Create Outlines. Make sure to save a backup copy of your logo with the live text before you outline it for the SVG version.
GeneratePress SVG logo Video Tutorial
Below is a video I made with the steps needed to add a SVG logo to GeneratePress, along with a couple tips on better aligning your logo on both desktop and mobile headers. The link to the SVG plugin used is also listed below the video.
SVG Support – Plugin needed to support SVG files
Hopefully this video helped you if you were having problems adding a SVG logo to GeneratePress. Please let me know if you have any questions, I am always happy to help.