WordPress & SVG

Does anyone know how to get wordpress to allow the use of SVG files being uploaded via the theme customiser panel?

Added the following to the theme functions.php file which allows SVG’s to be uploaded (no preview or featured image working though).

Read More
function custom_mtypes( $m ){
    $m['svg'] = 'image/svg+xml';
    $m['svgz'] = 'image/svg+xml';
    return $m;
}
add_filter( 'upload_mimes', 'custom_mtypes' );

However this still doesn’t let me upload or choose an SVG from the file system or drag and drop one.

Related posts

Leave a Reply

5 comments

  1. If you’ve tried simply uploading an SVG to WordPress through the Media Uploader, you may have had a few issues.

    Either it gave you an error and wouldn’t let you upload the file or it allowed you to upload the .svg file but just wouldn’t display it. Either way, here’s two simple steps for enabling SVG images in WordPress easily.

    Note: You’ll need to be able to edit your theme’s (or child theme’s) functions.php file and the root .htaccess file for this to work.

    Add SVG MIME Types to functions.php

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

    You should replace wpcontent_ with your own namespace. This function simply adds the SVG and SVGZ (compressed SVG) to the allowed upload file types in WordPress and hooks into the upload_mimes() WordPress function.

    Add SVG Mime Types to .htaccess

    So, open your root .htaccess file and add the following after the line, #End WordPress.

    # Add SVG Mime Types
    AddType image/svg+xml svg
    AddType image/svg+xml svgz       
    

    Save the file and you’re done! You can now save SVGs from Illustrator or Inkscape and use them on your WordPress site.

    Source here

  2. You can overcome the security warning by adding this to your current themes functions.php file.

    add_filter('upload_mimes', 'custom_upload_mimes');
    
    function custom_upload_mimes ( $existing_mimes=array() ) {
        // add the file extension to the array
        $existing_mimes['svg'] = 'mime/type';
            // call the modified list of extensions
        return $existing_mimes;
    }
    

    Then you should be able to upload files with an .svg extension

  3. Use the following code to svg support in WordPress. It will import and export of .svg media files.

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