How to upload SVG in WordPress 4.9.8?

admin管理员组

文章数量:1122832

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.

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.

• uploads
• svg

Share Improve this question asked Sep 12, 2018 at 9:05 SarathSarath 18311 gold badge11 silver badge88 bronze badges 3

• 1 Look at the file extension. You’re uploading an XML file, not an SVG. – Jacob Peattie Commented 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 Commented 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 Commented Dec 8, 2020 at 17:24

Add a comment  | 

6 Answers 6

Sorted by: Reset to default 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.

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

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

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

define( 'ALLOW_UNFILTERED_UPLOADS', true );

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">.thumbnail img { width: 100% !important; height: auto !important;} </style>';
}
add_action( 'admin_head', 'ns_fix_svg' );

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

本文标签： How to upload SVG in WordPress 498