2 Ways to Add SVG Support

Usually when I publish something on my blog I never use SVG images in my posts and in theory you would never need them too in your site content.

But the thing is that we’re not always using WordPress publishing tools (The Block Editor, Elementor etc) for content editing, sometimes we create landing pages with them. My decision to create a tutorial like this came to me when some of my customers who use my Simple WordPress Crossposting plugin tried to upload SVG images in Elementor and then to crosspost such articles to another site (which obviously didn’t have SVG support) using REST API.

When you try to upload an SVG icon to a WordPress website, you’re going to have an error like this in Media Upload:

Or if you try to upload it via REST API, then it will return 500 Server Error with the following response body:

{
	"code":"rest_upload_sideload_error",
	"message":"Sorry, you are not allowed to upload this file type.",
	"data":{
		"status":500
	}
}

1. Code Snippet to Allow SVG Uploads

Here we go:

add_filter( 'upload_mimes', 'rudr_svg_upload_mimes' );

function rudr_svg_upload_mimes( $mimes ) {
	
	// it is recommended to uncomment these lines for security reasons
	// if( ! current_user_can( 'administrator' ) ) {
	// 	return $mimes;
	// }

	$mimes[ 'svg' ]  = 'image/svg+xml';
	$mimes[ 'svgz' ] = 'image/svg+xml';

	return $mimes;
	
}

add_filter( 'wp_check_filetype_and_ext', 'rudr_svg_filetype_ext', 10, 5 );

function rudr_svg_filetype_ext( $data, $file, $filename, $mimes, $real_mime ) {

	if( ! $data[ 'type' ] ) {

		$filetype  = wp_check_filetype( $filename, $mimes );
		$type = $filetype[ 'type' ];
		$ext = $filetype[ 'ext' ];
		
		if( $type && 0 === strpos( $type, 'image/' ) && 'svg' !== $ext ) {
			$ext  = false;
			$type = false;
		}

		$data = array( 
			'ext' => $ext,
			'type' => $type, 
			'proper_filename' => $data[ 'proper_filename' ],
		);
		
	}

	return $data;

}

If you don’t know where to insert this code, please read this guide.

2. You Can Use a Plugin for That

I think there are plenty of plugin you could use, but this one works pretty great for me:

You just need to install and activate it and that’s pretty much it. As you can see, it is free and available in your WordPress dashboard in Plugins > Add New.

# WordPress, Attachments

Misha Rudrastyh

Hey guys and welcome to my website. For more than 10 years I've been doing my best to share with you some superb WordPress guides and tips for free.

Need some developer help? Contact me

Follow me on X