CODEWITHSUNDEEP
wordpresssvg
Richard Pearson
Richard Pearson

Reputation: 51

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

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.

Upvotes: 5

Views: 4862

Answers (6)

Maulik patel
Maulik patel

Reputation: 2432

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

add_filter('upload_mimes', 'cc_mime_types');

Upvotes: 0

artist learning to code
artist learning to code

Reputation: 310

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

Upvotes: 0

Alexandr_TT
Alexandr_TT

Reputation: 14545

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

Upvotes: 6

Maciej K
Maciej K

Reputation: 170

UPDATE (Wordpres 5+)

Make sure that each SVG file starts with:

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

Upvotes: 7

Deepak Kumar
Deepak Kumar

Reputation: 578

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

Upvotes: 0

Daemon
Daemon

Reputation: 29

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

Upvotes: 2

Related Questions