With the rise of retina displays, the need for crisp, clean, hi-resolution graphics has become more and more important on the web. Logos can be particularly tricky because they are often detailed vector graphics that don’t resize especially well as the typical .png or .jpeg web formats. One alternative to these traditional image types is to use the web-friendly Scalable Vector Graphics (.svg). Support for this vector graphic type on the web is growing. You can see the browsers which support the .svg format on caniuse.com.
There are a number of articles about how to get WordPress to allow .svg file types (and the security risks associated with doing so) and I would recommend researching to be sure that this is the right approach for your site. Many of these solutions will work well if you’re customizing a single theme where you can display the logo image using a CSS background.
However, if you need to use the Header Image Customizer (found under Appearance > Customize) to load your .svg logo for any reason you will need to add an extra step to your process. This is a likely scenario if you are wanting to use a single theme on a WordPress MultiSite with unique logos for each site. The customize screen requires a cropping step that is incompatible with the image format. These are instructions for how to turn on support for the graphics type and then bypass the cropping screen.
- Install a plugin for the .svg graphics support. I used this one SVG Support which I was able to network activate in my MultiSite. I’m sure many of the other plugins or theme functions available could also fulfill this step.
- Add support for flexible headers to your theme. As seen in the WordPress Codex, the custom header in your theme needs to include flex-width and flex-height in order to be able to bypass the cropping screen. My function for the Genesis Framework looks like this.
- Resize your .svg image to the correct size. Because we are skipping the cropping step, your image will need to be uploaded after it is already formatted for the correct size. This will need to be done outside of WordPress.
- Upload your image with the customizer. You will now see an option to “Skip Cropping” in the bottom right-hand corner. Use this option to push the image through.
Want to partner with brandiD to add additional revenue to your web design / development company?
Promote brandiD’s extensive line of premium WordPress themes and branding services to add new revenue streams to your agency or online business… get up to 50% referral commissions on business that you send to our products or services, or use the brandiD’s designers and developers to complement your existing services!