Enable SVG Support in WordPress
WordPress enables users to upload quite a few different kinds of image files. Youāll likely recognize the usual suspects, such as PNG and JPG. Displaying other file types, such as vector graphics, can be more problematic.
Fortunately, there are a few ways to incorporate vector files into your website. While not a native feature, Scalable Vector Graphics (SVG) files can be used to display two-dimensional images on WordPress sites. With a little reconfiguring, youāll be able to optimize some of your logos and other graphics using this file type.
Note: If you are hosting with WP Engine we natively support GZIP compression on SVG files.
In this article, weāll learn more about what SVG files are and why you might want to use them. Then weāll walk through two ways to enable their use on your website. Weāll also cover some important security precautions you may want to take. Letās get started!
What Is an SVG?
An SVG file is a type of vector image. Vector files are composed differently than more common image file types. For example, a JPG is made up of thousands of pixels. With an SVG file, on the other hand, that is not the case.
Vector images are more like a set of written instructions. They donāt contain pixels that form a larger image. Instead, they include a schema-like set of data that creates a two-dimensional image. This means there are some unique benefits to using SVG files.
Why Use SVG?
SVGs have a number of perks. Since they are highly scalable, you can manipulate the size as needed without impacting the quality of the image. As you might know all too well, if you try to scale a JPG up in size, the quality degrades to an unusable level very quickly.
Thatās where SVGs can come in handy. While they arenāt meant for displaying traditional photographs, they are a great choice for business logos, icons, and other simple graphics on your website.
Additionally, SVG files tend to be significantly smaller than other image types. This means your site wonāt get bogged down by graphics. Whatās more, SVG files are indexed by Google, and have been for quite some time. This can be a real boon for your siteās Search Engine Optimization (SEO).
How to Upload an SVG to WordPress
Since WordPress doesnāt include support for SVGs out of the box, youāll have to work a little harder to include them on your website. In the next few sections, weāll go over how to add SVG files to your website with a plugin and via a manual process.
Method 1: Use a Plugin
As with many WordPress tasks, plugins can make enabling SVG support simple. All you have to do is pick the right tool and configure a few settings.
Step 1: Download the Plugin
First, youāll need to download and install an SVG plugin. We recommend SVG Support:
Once youāve installed and activated the plugin, youāll have a new menu option in your WordPress dashboard under Settings > SVG Support. There, you will receive instructions on how to style SVG files for your website:
Additionally, youāll be able to configure a few important administrative settings. This includes restricting SVG uploading privileges to administrators only:
After that, youāll be able to upload SVG files directly to your Media Library. However, there are a few other important items to take care of first.
Step 2: Enable GZip support of SVG Files on Your Server
How you approach this step will depend on your web host and server setup. For example, here at WP Engine, GZip is already enabled for a specific list of file types. With that being said, āimage/svg+xmlā is not one of them.
Adding this type to the list for your website will ensure that your SVG files are optimized appropriately and quickly. Youāll need to include this file type in your .htaccess file, in order for everything to run smoothly.
Step 3: Ensure That the Plugin Is Correctly Securing Files
One of the downsides to using SVG files, and the primary reason this file type has not yet been incorporated into WordPress core, is due to security issues. Since SVG files are XML-based, they are vulnerable to External Entity attacks, among other risks.
When you configure your SVG plugin, itās recommended that you limit SVG upload access to administrators only. However, an even more secure approach is to āsanitizeā your SVG files before you upload them. This eliminates any of the unnecessary XML code that might leave your site open to attacks.
The SVG Support plugin does not include automatic sanitization, but there are other plugins that do. Safe SVG is one of them:
Alternatively, you can also install your own sanitizer and use it independently. The creator of Safe SVG has provided the pluginās sanitizer code on GitHub, for anyone to use.
Having your own sanitizer in place is also a good option if you plan to use the next method for enabling SVGs on your WordPress website.
Method 2: Manually Enable SVG File Uploads
If you prefer getting your hands dirty to using a plugin, you can manually enable your WordPress site to accept SVG files. Next, weāll take a look at how that process works.
Step 1: Edit Your Siteās Functions.php File
To get started, youāll need to edit your websiteās functions.php file. To do this, you can go to Appearance > Edit Themes in your dashboard, and select the functions.php file:
Alternatively, you can access your siteās files using a File Transfer Protocol (FTP) application such as FileZilla.
Either way, itās best to create a child theme or switch to a development environment before doing any major work on your website. This will keep your live site safe from harm while youāre making changes.
Step 2: Add a Code Snippet
Next, youāll need to add the following snippet of code to your functions.php file:
// Allow SVG
add_filter( 'wp_check_filetype_and_ext', function($data, $file, $filename, $mimes) {
global $wp_version;
if ( $wp_version !== '4.7.1' ) {
return $data;
}
$filetype = wp_check_filetype( $filename, $mimes );
return [
'ext' => $filetype['ext'],
'type' => $filetype['type'],
'proper_filename' => $data['proper_filename']
];
}, 10, 4 );
function cc_mime_types( $mimes ){
$mimes['svg'] = 'image/svg+xml';
return $mimes;
}
add_filter( 'upload_mimes', 'cc_mime_types' );
function fix_svg() {
echo '<style type="text/css">
.attachment-266x266, .thumbnail img {
width: 100% !important;
height: auto !important;
}
</style>';
}
add_action( 'admin_head', 'fix_svg' );
After that, youāll be able to upload SVG images to your Media Library. There, you can view and interact with them just like with other image file types.
Step 3: Secure Access and Limit SVG Upload Permissions
As we mentioned earlier, enabling SVG files does involve certain risks. To keep your site safe, you can set upload permissions for SVGs by creating custom user roles. You can use a plugin such as User Role Editor or WPFront User Role Editor to accomplish this.
These plugins enable you to customize the access and permission levels for your existing user roles. In other words, theyāll let you designate which users will have permission to upload SVGs. This will help you keep tabs on the security of those files.
Stay Secure With WP Engine
Natively, WordPress does not enable the use of SVG files. Thatās unfortunate, since these files tend to be the best option for displaying logos and other graphics. The good news is that with the help of some of our favorite developer resources, youāll be able to enable and secure the use of SVG files on your site.
Plus, keep in mind that on our WordPress hosting plans, youāll get access to professional support and well-developed website security solutions. Secure your site with us today!