Enabling SVG Support in WordPress Programmatically

Introduction

SVG (Scalable Vector Graphics) is a format that has been gaining attention due to its scalability and responsiveness. WordPress, by default, does not support SVG file uploads for security reasons. However, there are ways to enable SVG support programmatically for your WordPress website. This blog will guide you through the steps to achieve that, thereby allowing for greater customization and flexibility.

Methods to Enable SVG Support

There are various methods to enable SVG support, but we’ll focus on doing this programmatically using PHP. You can add this code to your theme’s functions.php file or install a simple plugin.

Method 1: 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' );
?>

<?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;
}
?>

Also read: How Disable Zoom, Lightbox, And Gallery Slider On WooCommerce Single Product

Method 2: Make Use of a Plugin

While adding SVG support programmatically to your WordPress website offers a lot of control, using a plugin can simplify the process, particularly for those who are less familiar with coding. Plugins often come with added features like SVG sanitization, which enhances the security of your uploads.

Step 1: Installation

First, download and set up a plugin called SVG Support.

After it’s on, go to your WordPress settings. You’ll see a new option called SVG Support. Click on it to learn how to make your SVG files look good on your website.

You can also make it so only the website’s admins can upload SVG files.

Once you do all this, you can start adding SVG files to your website. But make sure to check for other important stuff first.

Step 2: Turn On GZip for SVGs on Your Server

The way to do this depends on who’s hosting your website and how your server is set up. Some hosts, like WP Engine, already use GZip for certain files but not for SVGs.

To make sure your SVGs load fast, you need to add this type of file to your website’s list. Do this in your .htaccess file on your server.

Step 3: Make Sure the Plugin Keeps Files Safe

SVG files can have some security risks, which is why WordPress doesn’t support them by default. These files can be open to certain types of attacks because they’re based on XML.

When you set up your SVG plugin, it’s a good idea to let only admins upload SVGs. For extra safety, you can ‘clean’ the SVG files before you upload them to get rid of any risky code.

While the SVG Support plugin doesn’t clean the files for you, some plugins do. One example is Safe SVG.

You can also use your own tool to clean SVG files. The code for the Safe SVG cleaning tool is free for anyone to use and can be found on GitHub.

Having your own cleaning tool is smart if you’re going to use SVGs on your WordPress site.