Andy Tran

Enable or Upload SVG Image in WordPress Media Without Plugin

by | Aug 26, 2021 | Wordpress

What is an Scalable Vector Graphics (SVG) Image ?

Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) since 1999.
 
“SVG is a Scalable Vector Graphics, that enables to resize image or zoom in or zoom out the image without any distortion or blurriness in quality. Image Quality and clarity remain same if you increase width or size of an image, while in case of JGP/JPEG and PNG images, get blur or pixelated if the size is changed, also almost all modern browser supports the SVG file format. That’s why many users are uploading their website logo and icon in SVG file format.
 
By default, WordPress does not allow you to enable or upload the SVG image into your WordPress media without the plugin, mainly due to security concerns. By default, WordPress allows you to upload only images (jpg, jpeg, gif, png, etc.), audio and video file formats, but SVG image format is not allowed to use.
 

To Check Enable or Upload SVG Image in WordPress Media Without Plugin

To check if your SVG support is enabled or not for your WordPress setup simply go to Wp-admin > Media and try to upload SVG type image (Image with extension .svg).
If SVG support is enabled then your image will be uploaded successfully to your WordPress Media
SVG files are still a bit unsafe. That’s why WordPress doesn’t support SVG file uploads by default. If you upload an SVG image in WordPress, then you will see the following error message: Sorry, this file type is not permitted for security reasons.

SVG Image Error

Write the following code in your functions.php file to Enable or Upload SVG Image in WordPress Media.

    • Login to your WordPress Admin Dashboard.
    • Now from the left sidebar go to Appearance -> Theme Editor.
    • Go to functions.php file and write below code.

//add SVG to allowed file uploads


function add_file_types_to_uploads($file_types){
     $new_filetypes = array();
     $new_filetypes['svg'] = 'image/svg';
     $file_types = array_merge($file_types, $new_filetypes );
     return $file_types; 
} 
add_action('upload_mimes', 'add_file_types_to_uploads');

If the above script does not work for your wordpress website try with the following script.


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 cc_mime_types( $mimes ){
$mimes['svg'] = 'image/svg+xml';
return $mimes;
}
add_filter( 'upload_mimes', 'cc_mime_types' );
function fix_svg_support() {
echo '';
}
add_action( 'admin_head', 'fix_svg_support' );

Successfully Enable or Upload SVG Image in WordPress Media Without Plugin

Once you add one of these scripts into your WordPress, you will successfully enable or upload the SVG image in WordPress Media Without plugin.
Now, try uploading an image SVG type and it will get uploaded successfully.

 
To Continue Learning,
you can refer our blogpost Remove Additional CSS from the WordPress Customizer