What Is an SVG File (And How do You Upload SVGs to WordPress)?

The main reason SVG files 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 what SVGs are, how they can be beneficial, and how you can safely enable WordPress SVG support. We will also 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 File?

SVG (Scalable Vector Graphics) is an XML-based vector image that is commonly used by websites and brands to display logos and icons on their websites. Wikipedia defines SVG as:

An SVG (scalable vector graphics) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) since 1999.

You can even manipulate SVG files with code or your text editor. SVGs are currently utilized by 33% of all websites and 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 File Browser Support

SVG files are currently supported by all major browsers including 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% browser 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 SVG images, but we won’t be going into that today. Below is a list of supported browsers:

• Internet Explorer 9, 10, 11+ and Edge
• Firefox 2+
• Chrome 4+
• Safari 3.1+
• Opera 10+
• iOS Safari 3.2+
• Android Browser 3+
• Firefox for Android 86+
• Opera Mini (all)
• Opera Mobile 12+
• Chrome for Android 89+
• UC Browser for Android 12.12+
• Samsung Internet 4+
• QQ Browser 10.4
• Baidu Browser 7.12
• KaiOS Browser 2.5

Benefits of Using SVG Files

SVG files 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 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 and here’s our JPG vs JPEG comparison. Below are a few takeaways from his testing in which he compared the three different image types.

JPG (optimized size: 81.4 KB)

PNG (optimized size: 85.1 KB)

SVG (optimized size: 6.1 KB)

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, otherwise you could risk your featured image not showing up at all.

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 you’re 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.

It is also important that you consider who on your site has access to upload SVGs. For example, if 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 go with a few simple clicks.

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

As an alternative plugin, you might want to check out SVG Support.

Before uploading your SVG file, 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.

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.

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.

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.

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?

Brian Jackson

Brian has a huge passion for WordPress, has been using it for over a decade, and even develops a couple of premium plugins. Brian enjoys blogging, movies, and hiking. Connect with Brian on Twitter.

• LinkedIn
• Twitter