CentrioHost Blog

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?
• Why SVG Security is Important
• How to Safely Enable WordPress SVG Support

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 Host SEO use SVGs.

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+

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 Host SEO 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)

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.

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 nee