Today I’m going to show you how to enable WordPress SVG support securely.
We will discuss SVG browser support and some warnings if you plan on switching to SVG.
SVG is a vector graphic commonly used to display logos and icons on websites.
They are most popular among programmers and designers since they are scalable image formats. SVGs generally take up less file space, and they’re not pixelated on retina screens.
WordPress, by default, does not support uploading SVG files mainly due to security concerns.
Someday, we will be able to use SVG in WordPress core, but we aren’t quite there yet.
What’s an SVG?
Wikipedia describes an SVG (Scalable Vector Graphics) is a two-dimensional vector image format with interactivity and animation support.
Even your code or text editor can manipulate them.
The World Wide Web Consortium has been developing the SVG specification as an open standard since 1999.
The adoption rate of SVGs is currently 29.1% on all websites, but it’s rising, as you can see below.
Famous sites like Google, ESPN, Reddit, Dropbox, and our Rovity website use SVGs.
Browser Support for SVG
All major browsers and mobile browsers currently support SVG.
Advantages of SVGs
An SVG is a vector format so that it can be easily resized in both browsers and photo editing tools. These features make them an excellent choice for graphic and web designers.
When editing a PNG or JPG, you usually can’t upscale them without pixelation.
With SVGs, they look pixel perfect (or should I say vector perfect) every time, even if they are upscaled infinitely.
Therefore, they are one of the best image formats for retina display devices.
Google indexes SVGs, so it’s good for SEO. Google will index images linked to SVG documents and show them in an image search.
SVGs are usually (but not always) smaller files than PNGs or JPGs.
You can speed up your WordPress site by using SVGs because it will decrease the overall page size.
All of our servers are GZIP-enabled so that they can handle your SVG files. Try Rovity’s premium shared hosting.
Many sites utilize SVGs for logos and icons that are not too detailed. The file sizes will decrease significantly.
PNGs and JPGs are generally preferred for images with more detail like perhaps your blog post “featured images.”
Also, it’s crucial to note that Facebook and Twitter do not support SVGs.
The Importance of SVG Security
WordPress does not provide SVG support yet because of security concerns.
You can follow the ongoing discussion about SVGs in WP core, which started in 2013.
SVG is an XML file, so it has some vulnerabilities that regular image formats don’t have.
XXE, XSS, and bomb nested entities are examples of such attacks.
Many SVG plugins use the following code on the repository. These plugins enable SVG uploads in the WordPress media library via the MIME type modification.
This is a dangerous way to do this!
So don’t just go ahead and download the first free SVG plugin you find 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 to Sanitize SVG
Sanitization avoids security issues (such as a malicious code injection), code conflicts, and errors by cleaning code or input.
This can include data encoding, string filtering, and validation, etc.
The SVG-Sanitizer library by Daryll Doyle plays a role here.
Daryll described it as his attempts to create a decent sanitizer for SVG in PHP. To see this tool in action, have a look at the SVG sanitizer demo.
It would help if you also considered who can upload SVGs to your site.
For example, if you are on a site with multiple authors, you don’t know what SVG they will upload. And this could expose your site.
It is advisable to restrict SVG uploads to administrators and those who follow the security matters.
How to Enable WordPress SVG Support Safely
Daryll has created a WordPress plugin called WP SVG. Safe SVG is another name for this plugin.
Safe SVG provides SVG-Sanitizer functionality for uploading SVG images to WordPress media libraries.
The plugin also allows you to view SVGs as standard images in the WordPress media library.
You can download Safe SVG for free from the WordPress repository. You can also search for it in the “Add New” plugins page in your WordPress dashboard.
With a few clicks, you can get up and go.
The premium version is also available at wpsvg.com. Premium version provides an additional SVG optimization and the ability to restrict certain users from uploading SVGs.
We’ll use the free version in the example below.
The plugin has no settings after installation. When you upload your SVGs, Safe SVG will sanitize them.
Below, you can see the SVG file we used in place of our logo. You can view it in the media library.
This also allowed us to edit the WordPress header’s SVG logo using the Theme’s control panel.
The image below shows that the .svg file is indeed being loaded. On retina screens, it looks beautiful.
That’s all!
You now have WordPress SVG support enabled safely.
Utilize this plugin and or method at your own risk since it is not endorsed or supported by WordPress core.
If you were already uploading SVGs with only the MIME type snippet, please do it this way.
Are you using SVGs for the first time?
Make sure you have GZIP enabled on your Web server for “image/svg+xml” files. Thus, they will be compressed and load as quickly as possible.
Sometimes system administrators only enable the standard file types.
Note: All Rovity servers already enable GZIP for SVGs.
Summary
SVGs make your site more visually appealing.
SVGs are great for your logos and icons, ensuring they look pixel-perfect on every device.
What are your thoughts on WordPress SVG? Have you added SVGs to your WordPress site yet?
