Grow your CSS skills. Land your dream job.

Last updated on:

Allow SVG through WordPress Media Uploader

For your functions.php file or a functionality plugin:

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

Without this, SVG files will be rejected when attempting to upload them through the media uploader.

Comments

  1. JamesonLewis3rd
    Permalink to comment#

    Thank you!

  2. Permalink to comment#

    Thanks alot. I have a Plugin for WordPress with these lines:

    _enable_svg_mime_type();
    }

    private function _enable_svg_mime_type() {
    add_filter( ‘upload_mimes’, array( &$this, ‘allow_svg_uploads’ ) );
    }

    public function allow_svg_uploads( $existing_mime_types = array() ) {
    return $this->_add_mime_type( $existing_mime_types );
    }

    private function _add_mime_type( $mime_types ) {
    $mime_types[ 'svg' ] = ‘image/svg+xml’;

    return $mime_types;
    }

    }

    if ( class_exists( ‘scalable_vector_graphics’ ) and ! isset( $scalable_vector_graphics ) ) {
    $scalable_vector_graphics = new scalable_vector_graphics();
    $scalable_vector_graphics->execute();
    }

    ?>

    Is this the same or does it more than your function?

  3. Karl
    Permalink to comment#

    Worked like a charm! Just built my first SVG based site with absolutely no image files using WordPress. You’ve been a great help. Thanks so much :)

  4. Steve
    Permalink to comment#

    Works brilliantly for the upload part, however, the SVG displays huge wherever it gets displayed in WordPress admin, is there a way to prevent this?

    • Steve
      Permalink to comment#

      Using another snippet I found on here, a simple style injection seems to fix the display of SVGs within the admin area, this fixes the display in the media uploader and the featured image area:

       function fix_svg() {
          echo '<style type="text/css">
                .attachment-266x266, .thumbnail img { 
                     width: 100% !important; 
                     height: auto !important; 
                }
                </style>';
       }
       add_action('admin_head', 'fix_svg');
      
    • Permalink to comment#

      An update on @Steve’s snippet to display your SVG thumbnails in the Media Library grid. This is my preferred method because it does not rely on the thumbnail class. Instead I target images with a .svg file extension using the selector img[src$=".svg"]:

      function custom_admin_head() {
        $css = '';
      
        $css = 'td.media-icon img[src$=".svg"] { width: 100% !important; height: auto !important; }';
      
        echo '<style type="text/css">'.$css.'</style>';
      }
      add_action('admin_head', 'custom_admin_head');
      
  5. Z
    Permalink to comment#

    It doesn’t work :(

    Do I just put the code into functions.php file? I do it with a responsive theme, add the code at the end (but I also changed that and added to the end of the code) and it won’t work?

    What shall I do?

  6. John M
    Permalink to comment#

    Bump

    After the recent updates to WordPress add_filter() throws up an error message stating it is not defined (depreciated?). Is there an updated method to allow the uploading of SVG into the media gallery?
    Thanks!

    • John M
      Permalink to comment#

      Solved!
      I put the code in the wordpress’s core functions.php file, wrong.
      This code needs to be added to the theme’s functions.php, here: /wp-content/themes/[theme]/functions.php

      easy mix up.

  7. Chris
    Permalink to comment#

    Is there anyway to disable WordPress from compressing SVG files in the media uploader? I have SVGs down to less than 1KB and wordpress “compresses” them up to 150KB. Hmmm…

  8. ryan
    Permalink to comment#

    How does css-tricks always have an article on exactly what I am trying to do? the best.

  9. SalamMedia
    Permalink to comment#

    Thank you so much for this!

  10. Yes, it allows me to upload the svg images, but I can’t see them in my front, don’t know why :\

    • I see, it sets the width and height to 1px by default, I can change this manually but not sure how it should be automatically… any ideas?

  11. Catherine
    Permalink to comment#

    THANKYOU

  12. mommaroodles
    Permalink to comment#

    2014 and I find this snippet now only – I must be sleeping under a log!!! Thank you so much :)

  13. Dan
    Permalink to comment#

    How would I resize the svg images?

  14. Native Imaging
    Permalink to comment#

    Doesn’t work with WP 3.8.1

  15. Permalink to comment#

    Works in 3.8.1 for me too.
    I just found a trick to show the SVG and an alternative Bitmap for older Browsers in an image-Tag on http://lynn.ru/examples/svg/en.html.
    And making it responsive on http://www.mediaevent.de/tutorial/svg-responsive.html (german).

  16. Permalink to comment#

    I created a plugin using this function but cannot seem for the life of me to get the svg graphic to display.
    Its allowing me to upload an svg file but does not display in the front or backend.
    Anybody else having this problem?

  17. Jason Whittemore
    Permalink to comment#

    If you are using Adobe Illustrator CC you have to change the specs to match the article Chris mentions above, otherwise it won’t work. I figured this out through trial and error. Hope this helps and thank you to Chris for this awesome site! :D

  18. What about security? Why are SVG files blocked in the first place by WordPress? Could this mean danger to the sites?

  19. telemarker
    Permalink to comment#

    i read all of the comments and this snipped is working well for wordpress 3.8.2

    `##################################################################

    enable images in media uploader

    ##################################################################
    function cc_mime_types( $mimes ){
    $mimes['svg'] = ‘image/svg+xml’;
    return $mimes;
    }
    add_filter( ‘upload_mimes’, ‘cc_mime_types’ );

    ##################################################################

    display images on media uploader and feature images

    ##################################################################

    function fix_svg() {
    echo ‘
    td.media-icon img[src$=".svg"], img[src$=".svg"].attachment-post-thumbnail
    { width: 100% !important; height: auto !important; }
    ‘;
    }
    add_action(‘admin_head’, ‘fix_svg’);`

    for the use of the feature images on the front-end you have to style the post-image via css:
    /* svg on feature images */
    img.wp-post-image { width: 100% !important; height: auto !important; }

    best regards
    telemarker

  20. telemarker
    Permalink to comment#

    for fallbacks use svgmagic, cool jqueryplugin

  21. Thanks! Works fine for me.

  22. Ramses

    Also working like a boss.
    Mind you: once inserted the svg image wordpress gave it a 1px 1px dimension.. it appeared as a dot. So edit that in the text editor if it happens to you (:

  23. rachael knight

    Not working for me, WP 3.8.3.

  24. Thomas Federico
    Permalink to comment#

    In functions.php, it works like a charm :)

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".