What is a Scalable Vector Graphics (SVG) Image?

Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics. It is with support for interactivity and animation. The SVG specification is an open standard developed by the W3c since 1999.

“SVG  enables resizing images or zoom in or zoom out the image without any distortion or blurriness in quality. Image Quality and clarity remain the same if you increase the width or size of an image, while in the case of JGP/JPEG and PNG images, get blurred or pixelated if the size is changed, also almost all modern browsers 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 be 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.

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 the functions.php file and write the below code.

//add SVG to allow 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 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' );

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 to our blog post Remove Additional CSS from the WordPress Customizer

Looking for a leading IT consulting and services? Erudite Works Private Limited is a leading IT consulting firm specializing in Salesforce consulting, mobile app development, and web application development. Our advanced solutions cater to complex challenges and drive innovation, trusted by clients worldwide. Collaboratively, we deliver industry-leading technology, engineering, and industry-specific solutions used by millions. Contact Us.