Enable SVG Support In WordPress

Enable SVG Support in WordPress

If you ever trying to upload an SVG file to your WordPress site then you will have definitely got an error that says “Sorry this type of file is not permitted”. Then you don’t have to worry about that, because it’s a common problem since WordPress does not support SVG by default. If you want to solve this issue, then sit tight and keep on reading this article! We’ll show you how to enable SVG Support in WordPress with or without plugins!

What is an SVG File?

SVG (Scalable Vector Graphics) is an XML-based vector image file used for images. Vector files are composed differently than more common image file types. Unlike a png or jpg image which is made up of a fixed number of pixels, a vector image uses geometric forms such as lines, shapes, and other image attributes to represent different parts of the image. While common image formats like JPG and PNG are made up of tons of tiny squares called pixels.

This means there are some unique benefits to using SVG files. The benefits of SVG are the high quality of the image and the vectorial feature that lets you resize it without losing the quality. SVG files are used widely today for website animated images.

Why WordPress does not support SVG Files?

If you have ever tried to upload an SVG file to your WordPress site you must have probably received a security error like the one shown above image.

The reason WordPress has decided not to include support for SVG files as part of its core (default files) is due to the security risks it imposes. So if they will let the upload of the file without the proper security checks we will have a great security problem on our site.

Because an SVG is an XML file that has big problems with security. it opens up many vulnerabilities that do not affect normal image formats. For example, It can be used to gain unauthorized access to user data, XML external entity attacks, and trigger Billion Laughs Attack, and XSS attacks, and also an attacker can easily exploit them by inserting malicious code. As a result, if your site is exposed to an injection attack that could lead to a catastrophic site hack. isn’t it Scary?

That’s why you need to be careful when uploading SVG files to your site. If you want to upload SVG to WordPress, it’s important to do it the right way, especially if you want to upload files that you obtain for free from unknown sources or websites.

The solution to prevent unwanted code or attacks is to sanitizing the SVG files. This solution removes the suspicious codes and errors, making the files safe for your site. Recklessly uploading SVGs to WordPress could lead to serious consequences (such as a hacker can hack your website and crash your servers).

The methods we will be sharing in this article will try to sanitize SVG files to improve their security. However, these methods cannot totally prevent malicious code from being uploaded or injected into your site.

The best solution to prevent these issues is only to use SVG files that are created by reliable sources.

How to Enable SVG Support in WordPress

You can easily Enable SVG Support in WordPress to upload SVG files by adding simple function code in your theme or by uploading an appropriate plugin.

Method 1: Use a Trusted Plugin to enable SVG Support in WordPress

On the WordPress Directory, you can easily find different plugins that made possible the SVG support for WordPress without adding any extra code or having coding knowledge.

In this method, we will be using a plugin to upload SVG images. We’re going to use the SVG Support plugin, which can enable SVG Support in WordPress to your media library.

SVG Support plugin is a free plugin that can easily sanitize your SVGs upon upload. It can also Restrict SVG upload ability to Administrators only.

Method 2: Edit Your Themes Functions.php to enable SVG Support in WordPress

If you don’t want to use a plugin on your site, then you can use this method. You can access your funtions.php file from the dashboard. Go to Appearance > Theme Editor and select Theme Functions from the right-hand side of your admin dashboard.

When editing your functions.php file, it’s always best practice to create a child theme. This will allow you to revert back to the parent theme if you face any problems there.

Copy and paste the code below into the bottom of your functions.php file.

<?php
/**
 * Add Mime Types
 */
function theme_svgs_upload_mimes( $mimes = array() ) 
{
	// allow SVG file upload
	$mimes['svg'] = 'image/svg+xml';
	$mimes['svgz'] = 'image/svg+xml';
	return $mimes;
}
add_filter( 'upload_mimes', 'theme_svgs_upload_mimes', 99 );


/**
 * Check Mime Types
 */
function theme_svgs_upload_check( $checked, $file, $filename, $mimes ) 
{
	if ( ! $checked['type'] ) 
	{
		$check_filetype		= wp_check_filetype( $filename, $mimes );
		$ext				= $check_filetype['ext'];
		$type				= $check_filetype['type'];
		$proper_filename	= $filename;

		if ( $type && 0 === strpos( $type, 'image/' ) && $ext !== 'svg' ) 
		{
			$ext = $type = false;
		}
		$checked = compact( 'ext','type','proper_filename' );
	}
	return $checked;
}
add_filter( 'wp_check_filetype_and_ext', 'theme_svgs_upload_check', 10, 4 );


/**
 * Display SVG in attachment modal
 */
function theme_svgs_response_for_svg( $response, $attachment, $meta ) 
{
	if ( $response['mime'] == 'image/svg+xml' && empty( $response['sizes'] ) ) 
	{
		$svg_path = get_attached_file( $attachment->ID );

		if ( ! file_exists( $svg_path ) ) 
		{
			// If SVG is external, use the URL instead of the path
			$svg_path = $response['url'];
		}

		$dimensions = theme_svgs_get_dimensions( $svg_path );

		$response['sizes'] = array(
			'full' => array(
				'url' => $response['url'],
				'width' => $dimensions->width,
				'height' => $dimensions->height,
				'orientation' => $dimensions->width > $dimensions->height ? 'landscape' : 'portrait'
			)
		);
	}
	return $response;
}
add_filter( 'wp_prepare_attachment_for_js', 'theme_svgs_response_for_svg', 10, 3 );

/**
 * Get SVG Dimensions
 */
function theme_svgs_get_dimensions( $svg ) 
{
	$svg = simplexml_load_file( $svg );

	if ( $svg === FALSE ) 
	{
		$width = '0';
		$height = '0';

	} 
	else 
	{
		$attributes = $svg->attributes();
		$width = (string) $attributes->width;
		$height = (string) $attributes->height;
	}
	return (object) array( 'width' => $width, 'height' => $height );
}

?>

After you save the changes, you should be able to upload SVG files without any issues. However, this will not sanitize your SVG file so you will need to manually do this. You can sanitize your SVG files before uploading them to your site by using SVG Sanitizer.

Conclusion

Hopefully, by this article, you have got a better understanding of what are SVG images, how SVG images work, and what security issues can arise from using them.

Enable SVG Support in WordPress