How to Correctly Enable WordPress SVG Support @ TwentySixForty

Tutorial Overview.

In this tutorial, I will explain what SVGs are, some of the benefits of using them, and when to use them. Then I will explain how to enable WordPress SVG support manually and with a plugin. Lastly, I will explain how to sanitize your SVGs so they are safe to use on your website.

Quickies.

What is an SVG?
Some of the Benefits of Using SVGs.
When Should you use an SVG?
How to Enable WordPress SVG Support with a Plugin.
Enable SVG Support in WordPress with the SVG Support Plugin.
Use the Safe SVG Plugin to Enable SVG Support in WordPress.
Enable WordPress SVG Support Manually.
How to Manually Sanitize Your SVGs.

What is an SVG?

SVG, or Scalable Vector Graphics, is an XML-based vector graphic format used to display scalable, two-dimensional graphics. Unlike JPGs and PNGs, SVGs do not rely on pixels to form an image. They use XML-based text files to define the colors, paths, curves and letters that make up the image. The XML code in an SVG can be manipulated with JavaScript and CSS making them extremely flexible and responsive. SVGs are commonly used by web developers to display icons and logos without pixelating them.

Some of the Benefits of Using SVGs.

Responsiveness & Scalability.

Since high definition and retina displays are becoming more common, it is important to design your website to display well on these devices. One of the huge benefits of SVGs is they display at the same quality no matter what screen size or resolution. They are infinitely scalable, resolution-independent and will display crisp and clear at any size without any pixelation, loss in quality or change in file size.

Performance.

SVGs usually have smaller file sizes than PNGs and JPGs. Since SVGs take up less space, they will help to speed up your website and will decrease the overall size of the web page.

Accessibility.

Since SVG files are text-based, they can be indexed and searched by Google and they are readable by screen readers and similar devices. This can be a nice boost for your website’s SEO.

SVG Security Issues in WordPress.

Since SVGs are XML-based text files, the browser must read the text in the files in order to display the graphics. This leaves the website open to possible vulnerabilities including unauthorized access to website data and various other exploits and attacks.

When Should you use an SVG?

SVGs are perfect for logos, icons and other simple graphics. They are not meant to be used to display photographs and more detailed images.

How to Enable WordPress SVG Support with a Plugin.

The easiest way to enable WordPress SVG support is with a plugin. The 2 most used SVG plugins in WordPress are SVG Support and Safe SVG. There are some differences between these plugins that are important to understand. Safe SVG is designed to allow you to upload SVGs to WordPress while sanitizing them to avoid any security vulnerabilities. It’s main focus is security. SVG Support is geared more towards ease of use and making it easier to style and animate your SVGs. It does not sanitize your SVGs.

Enable SVG Support in WordPress with the SVG Support Plugin.

Install and activate the SVG Support plugin. Instructions: How to Install a WordPress Plugin.
Upload SVGs to the Media Library like you would with any other image.
To access the plugin settings, go to Settings > SVG Support in the Admin Sidebar.

SVG Support Plugin

This plugin comes with a number of settings including the ability to restrict SVG uploads to admin users only. If you have multiple authors on your blog, this is a great setting.

SVG Support Plugin Settings

Enabling the advanced mode will give you the ability to embed the SVG using an image tag. This allows you to easily style and animate your SVGs.

SVG Support Advanced Mode

Enable SVG Support in WordPress with the Safe SVG Plugin.

Install and activate the Safe SVG plugin. Instructions: How to Install a WordPress Plugin.
Upload SVGs to the Media Library like you would with any other image.

There are no settings in the free version of this plugin but you will now be able to safely upload SVGs to your WordPress website. To purchase the advanced version with additional features check out wpsvg.com.

Enable WordPress SVG Support Manually.

With a little work, you can enable SVG support by adding a bit of code to your website. A couple of ways to do this are by directly editing the functions.php file or using a code snippets plugin. Keep in mind, if you use this method there are no security measures in place so be sure to get your SVGs from a reliable source and only allow trusted people to upload images to your website.

How to Add the Code to the functions.php File via FTP.

If you use this method, it would be best to use a child theme so your edits don’t get overwritten when you run updates. Instructions: How to Make a WordPress Child Theme.

Make an FTP connection to the website. Instructions: How to Make an FTP Connection with FileZilla.
Locate the child theme folder and open it. Path: wp-content > themes > child-theme.
Open the functions.php file in a text editor like notepad++, Sublime Text or something similar.
Add the following code to the bottom of the functions.php file.

// Enable SVG support
function add_mime_types($mimes) {
	$mimes['svg'] = 'image/svg+xml';
	return $mimes;
}
add_filter('upload_mimes', 'add_mime_types');

Save the functions.php file.

You will now be able to upload SVGs to your WordPress website.

How to Add the Code to WordPress with a Plugin.

Login to the admin area of the website.
Install and activate the Code Snippets plugin. Instructions: How to Install a WordPress Plugin.

code snippets plugin

Click on Snippets in the admin sidebar.

Click Add New in the upper left corner of the page.

Add Snippet

Enter a Title for the snippet and paste the below code into the Code box.

// Enable SVG support
function add_mime_types($mimes) {
	$mimes['svg'] = 'image/svg+xml';
	return $mimes;
}
add_filter('upload_mimes', 'add_mime_types');

Add New Snippet

Click on Activate in the upper right corner.

How to Manually Sanitize Your SVGs.

Daryll Doyle, the developer of Safe SVG, has created an online interface that will sanitize your SVGs. Check out his SVG Sanitizer Test. You can use this to check SVGs before you upload them to WordPress. If you would like to integrate or build your own SVG sanitizer, you can use this open source code to get started:
SVG Sanitizer on GitHub