7

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. SVG upload error

3
  • 1
    Look at the file extension. You’re uploading an XML file, not an SVG. Sep 12, 2018 at 9:28
  • @JacobPeattie SVG is an XML based file format and this mime type is correct in many contexts. Maybe you are referring to Syed's solution and where WordPress is concerned image/svg without the +xml is indeed the answer.
    – JDandChips
    Sep 9, 2020 at 8:32
  • If you are coming here and you can upload a SVG to WordPress but it is not showing, check the width and height, mine defaults to 1x1
    – rob
    Dec 8, 2020 at 17:24

6 Answers 6

5

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.

2
  • I tried uploading the SVG file with the suggested plugin. It worked fine as expected. And the thumbnail to is visible. Thanks a lot for suggesting this. @Tedinoz
    – Sarath
    Sep 14, 2018 at 6:15
  • There's actually more to it than just this answer - the SVG has to be formatted correctly as well or else it just won't upload, regardless of what code or plugin you use: kinsta.com/blog/wordpress-svg/#attachment_10218 Just now seeing that Darrell Doyle wrote the sanitizer for SVGs, so I imagine that's integrated into his plugin. But for those wanting it done without a plugin, it's important to understand the sanitization process and what's required. May 6, 2020 at 23:45
10

@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');
2
  • 3
    removing the "+xml" made it work, thanks
    – Pons
    Sep 23, 2019 at 8:53
  • 2
    This is the best answer for those who are looking to do without the use of the plugin. Jun 4, 2021 at 6:00
4
//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');
4

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

define( 'ALLOW_UNFILTERED_UPLOADS', true );
1

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' );
1
  • Thanks man. This works.. just remove that ".attachment-266x266," its unrelated
    – Sagive
    Jan 28 at 7:10
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.