How to Safely Enable WordPress SVG Support

Updated on November 07, 2017

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 because 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 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 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 whether it is in a standalone file or embedded directly in HTML is indexed and will show up in Google image search.

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

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.

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?

This article was written by Brian Jackson
Brian focuses on our inbound marketing efforts; everything from developing new online growth strategies, content creation, technical SEO, and outreach within the WordPress community. He has a huge passion for WordPress, has been using it for 8+ years, and even develops a couple premium plugins. Brian enjoys blogging, movies, bike rides, and flipping websites.

Hand-picked related articles

  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

            https://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.

Leave a Reply

Send this to a friend