How to Safely Enable WordPress SVG Support (2 Simple Clicks)

By Brian Jackson Updated on August 28, 2018
1.2K
Shares

SVG is an XML-based vector image which is commonly used by websites and brands to display logos and icons on their websites. The main reason they are especially popular among developers and designers is that they are a scalable image format, generally smaller in file size (sometimes by quite a bit), and don’t pixelate on retina screens. WordPress by default though doesn’t allow you to upload the SVG file format, mainly due to security concerns. Today we are going to dive into one way to safely enable WordPress SVG support, discuss browser support, as well as some caveats if you decide you want to switch to the vector image format.

Hopefully one day we will have SVG as part of WordPress core, but we are not quite there yet.

What is an SVG?

According to Wikipedia, an SVG (scalable vector graphics) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. You can even manipulate them with code or your text editor. The SVG specification is an open standard developed by the World Wide Web Consortium since 1999. SVGs are currently only utilized by 3.4% of all websites, but as you can see below, the adoption rate is growing rapidly. Popular sites such as Google, Reddit, Dropbox, ESPN, and even our own website here at Kinsta use SVGs.

svg usage statistics

SVG usage statistics April 2016 – April 2017

SVG Browser Support

SVGs are currently supported by all major browsers and mobile browsers. The only issue you might run into is if you still need support for IE8, which we hope you don’t. IE8 only has around a 0.36% market share and is no longer supported. Here is a great article by Lubos on why developers should stop supporting IE8, IE9, and IE10. From a business perspective, this might not always be possible, but he brings up some good points. If for some desperate reason you still need IE8 support, you could define a fallback image (PNG or JPG) for your SVGs, but we won’t be going into that today. Below is a list of supported browsers:

  • Internet Explorer 9, 10, 11+ and Edge
  • Firefox 3+
  • Chrome 4+
  • Safari 3.2+
  • Opera 10+
  • iOS Safari 3.2+
  • Opera Mini (all)
  • Android Browser 4.4+
svg browser support

SVG browser support

Benefits of SVGs

SVGs are a vector format, meaning they are automatically scalable in both browsers and photo editing tools. This makes them great for both graphic and web designers. Normally when you try to edit a PNG or JPG in a tool like Photoshop, Sketch, or Paint, you can’t upscale them without pixelation. With SVGs, you can upscale them to an infinite amount and they will look pixel perfect (or should we say vector perfect) every time. This is why they are a great image format to use for retina screens.

Google indexes SVGs, which is great news for SEO purposes. SVG content that is linked to a file itself will be indexed and show up in Google image search. You can see this first-hand with the SVG illustrations we use on the Kinsta by doing an advanced image search. Note: Inline SVGs, or rather those composed of just code, are typically not indexed.

SVGs are traditionally (not always) smaller in file size than PNGs or JPGs. By using SVGs, you can actually speed up your WordPress site as you will decrease your overall page size. Genki wrote a great article where he compares the size of SVG vs PNG vs JPEG. Below are a few takeaways from his testing in which he compared the three different image types.

JPG (optimized size: 81.4 KB)

JPG size

JPG image

PNG (optimized size: 85.1 KB)

PNG size

PNG image

SVG (optimized size: 6.1 KB)

SVG size

SVG image

As you can see above, the SVG is a decrease in file size of 92.51% when compared to the JPG. And when compared to the PNG, 92.83%. Those are pretty impressive file size differences. However, there is one caveat, as he tested more detailed images, the SVGs eventually actually became larger in size than the JPG or PNG.

That is why many sites use SVGs for less detailed images such as logos, icons, etc. as they will see a significant decrease in file sizes. But for more images with great detail, like perhaps your blog post “featured images,” you might want to stick with a PNG or JPG but you can still optimize them. Many websites use a hybrid approach, using both file types together where it makes sense.

Also, it is important to note that social media networks like Facebook and Twitter don’t support SVGs for sharing. So if you used SVGs for your featured images, you would have to utilize the Yoast SEO feature and upload a PNG or JPG for the OG and meta tags.

Why SVG Security is Important

The reason SVG is not part of WordPress core yet is that there are security concerns to be addressed. You can follow the active discussion about SVGs in WordPress core (#24251) which was started back in 2013.  SVG is an XML file, which by itself opens it up to different vulnerabilities of which normal image formats aren’t affected. These include XML external entity attacks (XXE), bomb nested entities, and XSS attacks.

Mario Heiderich published an insightful presentation about the security risks due to active content injection with SVG files. One example given was that JavaScript was embedded in an SVG and it actually managed to call Mario on Skype. That is kind of scary! SecuPress, authors of a WordPress security plugin, also touched on the subject of being careful when adding SVGs to WordPress, and the importance of doing it the right way.

Many SVG plugins on the repository are utilizing the following code, which simply enables the MIME type to allow uploading of SVGs to the WordPress media library. This is not the safe way to do this! So don’t go and just download the first free SVG plugin you see or copy paste this code and think your good to go.

function cc_mime_types($mimes) {
 $mimes['svg'] = 'image/svg+xml';
 return $mimes;
}
add_filter('upload_mimes', 'cc_mime_types');

The solution is that SVGs need to be sanitized. Sanitization is basically the cleaning of code or input to avoid security issues (such as code injection), code conflicts, and errors. This could entail things such as encoding data, filtering and validating strings, etc. This is where Daryll Doyle’s SVG-Sanitizer library comes into play, which he refers to as “his attempt to build a decent SVG sanitizer in PHP.” Check out the demo of his SVG sanitizer to see it in action.

svg sanitizer

SVG sanitizer demo

It is also important that you consider who on your site has access to upload SVGs. For example, f you are on a multi-author site, you have no idea what kind of SVG someone else might upload, exposing your site. Restricting SVG uploads to administrators and those that understand some of the security concerns is advisable.

How to Safely Enable WordPress SVG Support

Daryll has developed a plugin, WP SVG (also know as Safe SVG), which utilizes the SVG-Sanitizer library upon uploading SVG images to your WordPress media library. The plugin also enables you to view SVGs like normal images in the media library. You can download Safe SVG for free from the WordPress repository or by searching for it within your WordPress dashboard under “Add New” plugins. You can get up and going with a few simple clicks.

wp-svg

WP SVG plugin

He also has a premium version, located at wpsvg.com, which allows you to restrict certain users from uploading SVGs and additional SVG optimization. In this example below, we are going to simply use the free version.

Before uploading your SVG, it is important to understand that they behave slightly differently than images. When exporting an SVG from your photo editing tool, you will want to export the text as curves (or create an outline), otherwise, it might render slightly different in various browsers.

export text as curves

Affinity Designer – Export text as curves SVG

After you install the plugin, there are no settings, it will simply sanitize your SVGs upon upload. On our test site below you can see we replaced our logo with an SVG file, it is view-able like normal in the media library.

svg in media library

SVG in WordPress media library

This also then allowed us to use our theme’s control panel to change the logo in our WordPress header over to our SVG file. You can see below it is indeed serving up the .svg file. And looks beautiful now on retina screens.

Tired of WordPress hosting support that seems to know less than you do?

We understand! That’s why Kinsta only employs high-skilled developers and Linux Engineers. The expertise of our support department is second to none, and we’re available 24x7 to help!
SVG in wordpress header

SVG in WordPress header

There is one additional tweak we had to make. In IE9-11 desktop & mobile don’t properly scale SVG files yet. Adding height and width fixes this issue. This might vary per theme, but on our test site we simply modified our header.php file and added these custom dimensions. Some WordPress themes use CSS to modify the scaling, which is not good for performance reasons, but due to that it might require you adding additional code to fix the IE issue.

modified header for SVG

Modified header.php file for SVG IE scaling issue

And that’s it! You have now safely enabled WordPress SVG support. This plugin and or method isn’t endorsed or supported by WordPress core, so of course, use at your own risk. However, if you were already uploading SVGs with only the MIME type snippet, then, by all means, please do it this way.

Also, if you have never used SVGs before, ensure you have GZIP enabled on your server for the “image/svg+xml” file type. This will ensure they are compressed and will load as fast as possible. Sometimes sysadmins only enable the more standard file types. Note: GZIP is enabled on all Kinsta servers already for SVGs.

Summary

SVGs are a great way to enhance the look of your site! We recommend utilizing SVGs, PNG, and JPGs together to achieve the best performance, as very detailed images will not perform as good in SVG format. SVGs are great for your logo, to ensure it looks pixel-perfect on every screen, along with icons. What are your thoughts? Have you used SVGs yet on your WordPress site?

If you enjoyed this article, then you'll love Kinsta's WordPress hosting platform. Whether it's speeding up your website or getting 24x7 support from our veteran WordPress team, we're here to help your business succeed. Our Google Cloud powered infrastructure focuses on auto-scaling, performance, and security. Let us show you the Kinsta difference! Check out our features

Hand-picked related articles

Comment policy: We love comments and appreciate the time that readers spend to share ideas and give feedback. However, all comments are manually moderated and those deemed to be spam or solely promotional will be deleted.
  1. Gravatar for this comment's author
    Kevin Donnigan April 30, 2017 at 6:58 am

    I use the function all the time, but I didn’t know about the WP SVG plugin. Looks handy.

    1. Gravatar for this comment's author
      Brian Jackson April 30, 2017 at 9:16 pm

      Definitely a great plugin! I highly recommend using the plugin, rather than just the function, as this sanitizes the SVGs upon upload.

      1. Gravatar for this comment's author
        Kevin Donnigan May 1, 2017 at 8:45 am

        Good point! I appreciate it.

  2. Gravatar for this comment's author
    WP Team Support May 2, 2017 at 7:23 am

    Extraordinary explanation for the SVG graphics plugin. Keep up the good work!

  3. Gravatar for this comment's author
    Alessandro Dragonetti May 18, 2017 at 1:45 pm

    Very interesting article Brian. After the installation of plugin WP SVG, what did you use to convert all old images (jpg or png) to svg?

    Thanks!

    1. Gravatar for this comment's author
      Brian Jackson May 18, 2017 at 2:37 pm

      Hey Alessandro, we wouldn’t recommend using only SVGs on your site. It’s better to only use them in combination. For example, on our Kinsta site, we use an SVG for our logo and for icons (as seen on https://kinsta.com/features/). For more detailed images, like featured images on blog posts, etc… you will still want to use JPGs/PNGs.

      And we didn’t convert to SVG, we always use the original SVG/create it.

  4. Gravatar for this comment's author
    Tibow May 30, 2017 at 2:21 am

    Hello,

    So I guess that calling SVG file in my WordPress page template like this isn’t safe at all ?

    echo file_get_contents( get_stylesheet_directory_uri() . ‘/img/home.svg’ );

    1) I create my SVG in illustrator
    2) I upload it on my server with Filezilla
    3) I call the SVG with the code above in php

    What do you think about it ?

    Thanks

    1. Gravatar for this comment's author
      Brian Jackson May 31, 2017 at 9:31 am

      Correct, it would be safer to use the free plugin mentioned above as the file gets sanitized upon uploading. You can then call it via PHP after it is in your media library.

  5. Gravatar for this comment's author
    Paul Aswad June 5, 2017 at 10:30 am

    Nice! Thank you for the post. Saw this on FB a few weeks ago, and this is when it came in handy! I set this up for a client, which was super easy and got amazing quality graphics! The only issue I’m having is SVGs are not showing up in Firefox. Do you know of a fix or did I miss something in the article?! :-o

    1. Gravatar for this comment's author
      Brian Jackson June 5, 2017 at 10:36 am

      Hey Paul. Glad it was helpful :) Firefox supports SVG files in pretty much every version (all the way back to Firefox 2). We are using SVGs on this website (and it runs WordPress). I have SVGs on 6+ other sites and they all work fine in Firefox. So it definitely isn’t a browser issue. Did you clear your cache everywhere? Also, make sure to specify dimensions on the images. Did you create your SVGs with a photo editing program or simply download them from somewhere?

      1. Gravatar for this comment's author
        Paul Aswad June 5, 2017 at 1:01 pm

        Hi Brian,

        Thanks for getting back to me! FF is up to date. Cache is cleared everywhere (server / browser) and dimensions are there. SVGs were created using Adobe Illustrator Creative Cloud…. I can’t bring my client back to PNGs LOL

        1. Gravatar for this comment's author
          Brian Jackson June 5, 2017 at 1:03 pm

          You mind sharing URL?

          1. Gravatar for this comment's author
            Paul Aswad June 5, 2017 at 1:26 pm

            iweartruth.com and someone just told me on all 3 browsers (Chrome FF and Safari) there is no logo……

          2. Gravatar for this comment's author
            Brian Jackson June 5, 2017 at 1:37 pm

            Ya you have some weird styles set on your image… As you can see in the picture attached I was able to get it to show up in Firefox after playing around in devtools. http://jmp.sh/ePeyQAJ

            I had to remove the width:100% from these classes:
            .mk-image-holder
            .mk-image .mk-image-inner img

            As well as the inline style of 100%.

            Your theme is making this process a lot harder than it should be :(

          3. Gravatar for this comment's author
            Paul Aswad June 6, 2017 at 4:48 am

            Brian thank you for pointing this out. I will forward it to the theme authors for an update. Their theme is SVG compatible so probably a little bug. I really appreciate you taking the time for this and it won’t be forgotten :-)

  6. Gravatar for this comment's author
    Shizart Gremen October 11, 2017 at 11:03 am

    Thanks. The sanitizer is a nice touch.

  7. Gravatar for this comment's author
    Brian Jackson October 28, 2017 at 11:48 pm

    Hey!

    Ya we aren’t using SVGs in our article, but we do use them on our site. For example, our logo at the top of the site is an SVG, along with icons on our feature pages, etc… Thanks

  8. Gravatar for this comment's author
    Visualmodo WordPress Themes November 3, 2017 at 5:26 am

    Excellent post, we make a custom plugin for icons in .SVG easy upload in WordPress too.

  9. Gravatar for this comment's author
    ed January 18, 2018 at 2:44 pm

    Hi

    About google indexing – yes, a file (like img src) is indexed. I’ve seen no real evidence that inline SVGs are routinely indexed, even on big sites

    1. Gravatar for this comment's author
      Brian Jackson January 18, 2018 at 2:57 pm

      Hey Ed! Thanks for catching that. You are correct, it should be SVGs that are linked directly to a file will be indexed by Google. I’ve updated the post above and gave an example of our indexed SVGs on our Kinsta site.

      Thanks again

  10. Gravatar for this comment's author
    Joseph March 11, 2018 at 6:02 pm

    I was wondering where I am going wrong with creating an SVG logo or icon. I have been learning Inkscape and have created several logos and icons and after creating them and attempting to use them in my Avada WP theme or even on a standard HTML page I have noticed that these SVG files are not scaling and just stay the same size. What should I do? Is this an issue at the production level, meaning at the time that I create and save the created SVG file on Inkspace or is this more of a WP or Avada theme issue? Wondering if you know of any web based material that you can point me in the direction of so that I can learn what to do? I have been searching online to learn but have only ran into stuff that is either not accurate, too vague or just not detailed enough. Thanks and would greatly appreciate the help.

    1. Gravatar for this comment's author
      Brian Jackson March 11, 2018 at 6:11 pm

      Hey Joseph,
      As long as you are uploading the SVGs correctly, the scaling issue is more likely to a CSS issue with your theme. I would recommend opening up a ticket with Avada crew.

  11. Gravatar for this comment's author
    Andrew March 28, 2018 at 11:30 am

    “Normally when you try to edit a PNG or JPG in a tool like Photoshop or Paint”

    Paint!!!

    Love!!!

  12. Gravatar for this comment's author
    Abhyudaya March 31, 2018 at 11:32 pm

    I am planning to use SVG images on my site to improve performance. These will be verified SVGs created by my team. I want to understand that is it safe to use them? Are SVGs open to attack or are the unverified SVGs the ones we need to be careful about?

    1. Gravatar for this comment's author
      Brian Jackson April 1, 2018 at 12:36 pm

      Yes, SVGs are safe. Just use a plugin like mentioned above to make sure they are sanitized upon upload and ensure only verified users can upload them.

  13. Gravatar for this comment's author
    Alexa Garcia April 5, 2018 at 2:32 pm

    Hi, I was just wondering how I would upload an SVG font file into my WordPress website?

    1. Gravatar for this comment's author
      Brian Jackson April 10, 2018 at 11:20 pm

      Hey Alexa,
      If you install the free Safe SVG plugin mentioned above, you can just upload SVGs to your media library like any other image.

  14. Gravatar for this comment's author
    Shmellycat June 4, 2018 at 6:23 am

    Thank you so much for this, I was having problems uploading an appstore image.

  15. Gravatar for this comment's author
    Lauren August 6, 2018 at 9:24 pm

    I installed the plugin and uploaded my svg for the header image/ logo. When I choose select and crop, it shows my image selected and only gives me the option to crop. I click Crop, and it says “There was an error cropping your image.”
    It seems like a wordpress issue, because the svg looks great when I pull it up in a chrome window. Any ideas?

    1. Gravatar for this comment's author
      Brian Jackson August 6, 2018 at 10:32 pm

      Hey Lauren,
      Yes I don’t think you’ll be able to crop SVGs in WordPress. This isn’t a plugin problem, but rather a lack of support by WordPress. This plugins simply sanitizes them and allows you to see them. I would recommend cropping your SVGs before uploading them.

  16. Gravatar for this comment's author
    Sarath September 6, 2018 at 10:19 pm

    I tried to install the SVG after installing the plugin, but it says ““ic_clients@2.svg.xml” has failed to upload.
    Sorry, this file type is not permitted for security reasons.” and I couldn’t upload the SVG files. Please help!!

    1. Gravatar for this comment's author
      Brian Jackson September 6, 2018 at 11:00 pm

      Hey Sarath! Are you sure you’re uploading a .SVG file? The file name above shows .XML.

  17. Gravatar for this comment's author
    Lynn September 9, 2018 at 9:25 am

    This is a great post — thank you! I had not known about their security risks until I tried uploading one to my site just now. So the sanitizer cleans on upload. That sanitation process prevents hackers from injecting malicious code into an SVG. Left unsanitized (dirty code) the SVG graphic is always going to be more vulnerable.

Leave a Reply

Use WordPress?

Use WordPress?

Join 20,000+ others who get our FREE weekly newsletter with WordPress tips on how to drive more traffic and revenue to your business!

Consent

You have Successfully Subscribed!

Send this to a friend