How to upload SVG in WordPress 4.9.8?

Question

I tried uploading after installing different plugins. Even added a filter to functions.php file.

    function add_svg_to_upload_mimes( $upload_mimes ) { 
    $upload_mimes['svg'] = 'image/svg+xml'; 
    $upload_mimes['svgz'] = 'image/svg+xml'; 
    return $upload_mimes; 
    } 
    add_filter( 'upload_mimes', 'add_svg_to_upload_mimes', 10, 1 );

But still uploading an SVG gives the following error.

Answer 1

This question had me scratching my head. Yeah, how come WordPress doesn't support this natively? And then I found out.

You asked how to upload SVG in WordPress 4.9.8 (the current version at the time of writing). You mention that you "tried uploading after installing different plugins". You don't say which plugins, nor whether they relate to SVG.

As I understand the situation, the safest, most appropriate, answer at this time is to use SVF Safe (a plugin written for this very purpose) by Darrell Doyle. If this plugin doesn't work for you, then I'd suggest that you have a conflict elsewhere, and you should follow the usual procedures for resolving that. Personally, if this plugin didn't work for me then I'd give up on the notion of uploading SVGs.

If you haven't already done so, may I suggest reading "SVG Uploads in WordPress - the inconvenient truth" by Bjorn Johansen and/or "How to Safely Enable WordPress SVG Support - 2 Simple Clicks" by Brian Jackson. At least you should know what you are letting yourself in for.

Answer 2

@rana-umer your code is correct just remove the "+xml" after 'image/svg'.

//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');

Answer 3

//add SVG to allowed file uploads
function add_file_types_to_uploads($file_types){

    $new_filetypes = array();
    $new_filetypes['svg'] = 'image/svg+xml';
    $file_types = array_merge($file_types, $new_filetypes );

    return $file_types;
}
add_action('upload_mimes', 'add_file_types_to_uploads');

Answer 4

After adding upload_mimes action still anyone facing issue then add this in your wp-config.php file

define( 'ALLOW_UNFILTERED_UPLOADS', true );

Answer 5

The first function is to check the WordPress and add support on WP version lower than 4.8. The second function is to register the mime file type(SVG) and the last one is to fix the thumbnails on media library.

 /**
 * Add svg support
 *
 */
add_filter( 'wp_check_filetype_and_ext', function( $data, $file, $filename, $mimes) {
      global $wp_version;
      if( $wp_version == '4.7' || ( (float) $wp_version < 4.7 ) ) {
      return $data;
    }
    $filetype = wp_check_filetype( $filename, $mimes );
      return [
      'ext'             => $filetype['ext'],
      'type'            => $filetype['type'],
      'proper_filename' => $data['proper_filename']
    ];
}, 10, 4 );

function ns_mime_types( $mimes ){
   $mimes['svg'] = 'image/svg+xml';
   return $mimes;
}
add_filter( 'upload_mimes', 'ns_mime_types' );

function ns_fix_svg() {
  echo '<style type="text/css">.attachment-266x266, .thumbnail img { width: 100% !important; height: auto !important;} </style>';
}
add_action( 'admin_head', 'ns_fix_svg' );

Answer 6

Add this hooks , i tested on wp 5.3 it works :

// Allow SVG
add_filter('wp_check_filetype_and_ext', function ($data, $file, $filename, $mimes) {

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


}, 10, 4);


add_filter('upload_mimes', function ($mimes) {
    $mimes['svg'] = 'image/svg+xml';
    return $mimes;
});


add_action('admin_head', function () {
    echo '<style type="text/css">
         .media-icon img[src$=".svg"], img[src$=".svg"].attachment-post-thumbnail {
      width: 100% !important;
      height: auto !important;
    }</style>';
});