WordPress Enable SVG Support

Uploading an SVG to WordPress

Because WordPress does not offer SVG support out of the box, you will have to work a bit more to include them into your website. In the following sections, we’ll go through how to add SVG files to your website using a plugin and manually.

Method 1: Enable SVG File Uploads Manually

You may manually allow your WordPress site to accept SVG files if you choose not to use a plugin. Then we’ll look at how that procedure works.

Step 1: Modify the Functions.php file on your website.

To get started, change the functions.php file on your website. In your dashboard, navigate to Appearance > Edit Themes and pick the functions.php file:

Alternatively, you may use a File Transfer Protocol (FTP) tool such as FileZilla to access your site’s data.

Before making any serious work on your website, it’s essential to establish a child theme or switch to a development environment. This will protect your live site from damage while you make modifications.

Step 2: Insert a Code Snippet

<?php
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 cxc_mime_types( $mimes ){
	$mimes['svg'] = 'image/svg+xml';
	return $mimes;
}
add_filter( 'upload_mimes', 'cxc_mime_types' );

function cxc_fix_svg() {
	echo '<style type="text/css">
	.attachment-266x266, .thumbnail img {
		width: 100% !important;
		height: auto !important;
	}
	</style>';
}
add_action( 'admin_head', 'cxc_fix_svg' );
?>

Step 3: Another Way

<?php
add_filter( 'upload_mimes', 'cxc_file_types_to_uploads' );
function cxc_file_types_to_uploads( $file_types ){
	$cxc_filetypes = array();
	$cxc_filetypes['svg'] = 'image/svg+xml';
	$file_types = array_merge($file_types, $cxc_filetypes );
	return $file_types;
}
?>

Method 2: Make Use of a Plugin

Plugins, like many other WordPress jobs, may make enabling SVG support straightforward. All you need to do is select the appropriate tool and specify a few parameters.

Step 1: Get the Plugin

First, you’ll need to download and install an SVG plugin. We recommend SVG Support: 

After you install and activate the plugin, a new menu option will appear in your WordPress dashboard under Settings > SVG Support. You will be given instructions on how to style SVG files for your website there:

You’ll also be able to change a few crucial administrative settings. This includes only allowing administrators to upload SVG files:

After that, you’ll be able to immediately upload SVG files to your Media Library. However, there are a few other things that must be addressed first.

Step 2: Enable SVG GZip support on your server.

How you approach this stage will be determined by your web host and server configuration. GZip, for example, is already enabled for a specified set of file formats in WP Engine. Having said that, “image/svg+xml” is not one of them.

Adding this type to your website’s list will ensure that your SVG files are properly and rapidly optimised. In order for everything to work properly, you must include this file type in your .htaccess file.

Step 3: Confirm that the plugin is properly securing files.

One disadvantage of utilising SVG files, and the main reason this file type has not yet been included into WordPress core, is security concerns. Because SVG files are based on XML, they are subject to External Entity assaults, among other threats.

It is advised that you limit SVG upload access to administrators exclusively when configuring your SVG plugin. An even more safe method is to’sanitize’ your SVG files before uploading them. This removes any extraneous XML code that might leave your site vulnerable to assaults.

Although the SVG Support plugin does not feature automatic sanitization, some plugins do. One of them is Safe SVG:

You may alternatively install your own sanitizer and use it separately. The Safe SVG plugin’s sanitizer code is available on GitHub for anybody to use.

If you intend to utilise the following technique for allowing SVGs on your WordPress website, having your own sanitizer on hand is also a smart idea.