Wordpress & SVG

Question

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).

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.

Estus

Answer 1

UPDATE (Wordpres 5+)

Make sure that each SVG file starts with:

<?xml version="1.0" encoding="utf-8"?>

Chant

Answer 2

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

Octamerous

How does this impact performance? It seems based on a similar answer wordpress.stackexchange.com/a/72426, the approach may be slower. – Blight

@Blight I did not notice speed limits on my site – Octamerous

@Blight Didn't do any special tests. . Nothing clearly slows down when loading large SVG files – Octamerous

@Blight Load some large SVG files using the object tag and see if you are happy with the rendering performance – Octamerous

Still "Sorry, you are not allowed to upload this file type." – Tonsillitis

Answer 3

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

Gethsemane

Maybe this worked in an older version of WordPress, but setting the 'svg' array key to 'mime/type' does not work. @Alexandr_TT's answer below does work. – Practically

Answer 4

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

Pori

Answer 5

Noticed that if you use "save for screens" the file won't upload but "save as..." works (illustrator)

Credential

Answer 6

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

add_filter('upload_mimes', 'cc_mime_types');

Bushwhacker