• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer
brandiD

brandiD

Making the Web More Personal

  • About
    • About brandiD
    • Meet The Team
  • Work With Us
    • Personal Brand Platform
    • Business Brand Platform
    • Personal Branding for Women
    • Authority Building
    • Membership & Course Platform
    • Website Design & Development
  • Our Work
    • Brands and Logos
    • Testimonials
  • Blog
    • Resources
  • Podcast
  • Contact

Using SVG Logos with the WordPress Customizer

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.

SVG

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.

    1. 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.
    2. 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.

    1. 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.
    2. 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.

Screen Shot 2016-02-29 at 9.14.57 PM


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!

  • This field is for validation purposes and should be left unchanged.

Sharing is caring!

  • Facebook
  • Twitter
  • LinkedIn

Filed Under: General, StudioPress / Genesis, WordPress

Reader Interactions

Comments

  1. Benbodhi says

    May 14, 2016 at 10:51 pm

    Hey,
    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

    Reply
  2. Allyson says

    September 16, 2016 at 10:54 pm

    Thanks, very helpful tip!

    Reply
  3. Brian says

    October 5, 2016 at 8:58 am

    Not working. Skip cropping is missing latest version(4.6.1) during upload.

    Reply
    • Jelena says

      November 24, 2016 at 9:33 pm

      correct its not working. Even when u try to upload a custom logo there is no skip crop option.

      Reply
      • Dirk says

        February 23, 2017 at 10:48 am

        Hi 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.

        Reply
    • Gwyneth Llewelyn says

      May 26, 2022 at 8:56 pm

      Mind you, the solution presented here by the author is designed for the Genesis Framework; others might require some tweaking to get them working.

      Each framework will handle the situation differently, so there is no one-size-fits all solution that will work on all cases…

      Reply
  4. Tiffany says

    November 14, 2016 at 6:14 am

    Once 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!

    Reply
  5. Sarah Fenn says

    January 29, 2017 at 4:45 am

    Hi 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?

    Reply
    • Gwyneth Llewelyn says

      May 26, 2022 at 8:38 pm

      Well, it’s 4 years after you made that question, but you know how Google is… people like me will still find your question after so many years, so perhaps a short answer is due:

      The code is usually written on the functions.php file that comes with every theme (if yours doesn’t have one, just create one from scratch).

      That’s it 🙂

      Reply
  6. Simon says

    March 5, 2017 at 5:04 pm

    Hi –

    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…

    Reply
  7. Marcus Tibesar says

    August 21, 2017 at 9:07 pm

    THANK YOU!!!

    SVG ROCKS – just hope it is secure!

    Reply
  8. martin says

    October 8, 2017 at 2:43 pm

    this 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.

    Reply
    • Kim Gorga says

      June 11, 2019 at 4:51 pm

      Did anyone ever figure this out? I’ve added the code in several variations and can’t seem to get past the crop part – to get WP to add a skip cropping option.

      Reply
  9. Andrew Wilkerson says

    September 20, 2019 at 6:19 am

    I paid for some logos and now I don’t even know if I can use the recommended .svg files I had created for me. Oh well, yet another time consuming nightmare to figure out on WordPress and now I’ll probably get hacked just because I tried to make my ‘brand’ look good with a new logo. If only we could run a business these days without a website, I’ve lost patience with all this. When will it be easy to simply have an .svg logo on WordPress? They were talking about all this years ago. It’s 2019 and here I am fiddling with .pngs all night and they still won’t work well on all devices.

    Reply
    • Gwyneth Llewelyn says

      May 26, 2022 at 8:53 pm

      I completely agree with you!
      There is a world-wide-ranging paranoia regarding SVG files (as if it weren’t an industry standard set by the W3C!) just because you can embed a few scripts in them — which are so easy to filter out anyway! — while no such ‘fear’ exists regarding PNG or JPEG files, which, with very crafty means, can be designed to break through a website’s security; although such cases are very few and relatively easy to thwart (just resize/crop the image a tiny little bit before displaying it), they are, on the other hand, far more dangerous — since they’re completely unexpected. SVGs, by contrast, are much easier to check for vulnerabilities (while still allowing the file to be displayed!), and, if they aren’t — because they contain embedded images, for instance, which may have been tampered with — a simple script (or plugin) can simply discard anything that looks suspicious.

      Content management systems — and search engines! — are all about ‘mobile first’ designs, which are far easier to create using images with vector data, since each mobile device will have its own resolution, and it becomes harder and harder to properly resize raster images so that they remain legible and crisp, no matter at what size the user is going to view the website. Using vector data makes this issue trivial; also, a well-designed SVG will be tiny, compared to similar-sized raster images, no matter what compression level has been used on those (and you can compress SVGs too, if you wish).

      Anyway, I feel your pain, and just wanted to add my whole-hearted support of your comment. We need WordPress — as well as so many other tools, including social media — to start taking vector data seriously.

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

  • Interested in

    insights and tips
    to build your brand and business?

  • This field is for validation purposes and should be left unchanged.

Ready to uncover

Your Personal Brand?

Buy the book, "Build Your Brand: The Distinctive Guide to Soul-Based Marketing".

Buy Now

What’s your

brand persona?

Take the free Personal Branding Quiz and uncover what makes YOUR brand memorable.

Take the quiz

In the

Media

Listen to brandiD founder Rachel Gogos on EOFire.com

Listen Now

Build a business that

gets noticed online

Download the free SOULiD Framework guide to Personal Branding and start building your brand today.

Grab the guide

Award: Top Blog 2020

We’re excited to help you achieve your next level of success.
Contact us
today and together we’ll make the
magic happen.

Footer

724.260.0026 — info@thebrandid.com
Privacy Policy | Terms of Service | Client Login
  • Email
  • Facebook
  • LinkedIn

Copyright © 2022 | Made with | All Rights Reserved.

Get the Editorial Content Calendar

Our editorial calendar serves as a system for scheduling, planning, and outlining the content you want to share across your connection platforms over a given length of time.

  • Enter your information below to get the link sent directly to your email!

  • If your business, organization, or project already has a domain or website, please share the URLs here or put "none" if you don't yet have a domain.
  • Tell us as much as possible about your challenges, goals, and what we can help you with (Personal Branding, Logo Design, Web Design and Development, Copywriting, Online Authority Building, etc).
  • If your budget is under $5,000, check out do-it-yourself options in the the brandiD Themes
  • Please provide best number to reach you at.
  • This field is for validation purposes and should be left unchanged.