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!
Benbodhi says
May 14, 2016 at 10:51 pmHey,
This is really cool! I stumbled across it looking into ways people are using SVG in the customizer. I am the developer of SVG Support, so thanks for the shout out there too 🙂
I am looking to incorporate customizer support into my plugin, so hopefully will see it in a release soon.
Cheers
Ben
Allyson says
September 16, 2016 at 10:54 pmThanks, very helpful tip!
Brian says
October 5, 2016 at 8:58 amNot working. Skip cropping is missing latest version(4.6.1) during upload.
Jelena says
November 24, 2016 at 9:33 pmcorrect its not working. Even when u try to upload a custom logo there is no skip crop option.
Dirk says
February 23, 2017 at 10:48 amHi Kimberly,
same here, there is no possibility to skip the crop of the SVG. It would be nice if you can update. It sound like a very good workaround.
Stop….you wrote
‘width’ => 260,
‘flex-height’ => true,
‘height’ => 100,
Is it not working, if the SVG-File is smaller?
Thank you very much in advance.
Tiffany says
November 14, 2016 at 6:14 amOnce I figured out that I only needed to add “‘flex-width’ => true,” rather than copy and paste all of the code above, it worked like a charm. Thank you!
Sarah Fenn says
January 29, 2017 at 4:45 amHi thanks for the help 🙂 I am incredibly new to WordPress (my first time using it) and I wasn’t sure where you put that code?
Simon says
March 5, 2017 at 5:04 pmHi –
I’m trying to do this to allow an SVG in the custom logo image of the 2017 theme, rather than the header image.
Surely I need to add the flex-width somewhere else for the logo image?
Thanks in advance…
Marcus Tibesar says
August 21, 2017 at 9:07 pmTHANK YOU!!!
SVG ROCKS – just hope it is secure!
martin says
October 8, 2017 at 2:43 pmthis is great and all…but what, exactly do the lines of code for the functions.php need to say? nothing i m doing is getting past the skip cropping part, and i cannot get an svg file to work for my logo at all.