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.

Before WordPress 4.0, you also make them display properly in the Media grid. But that's broken now. If anyone knows how to fix, let me know!

function fix_svg_thumb_display() {
  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_thumb_display');

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?

    • The issue below has the code you may paste into wp-includes/media.php:
      https://core.trac.wordpress.org/ticket/26256

      although I have just changed the image_downsize() function in the same file, replace:

          // we have the actual image size, but might need to further constrain it if content_width is narrower
          list( $width, $height ) = image_constrain_size_for_editor( $width, $height, $size );
      

      with:

          $img_ext = pathinfo($img_url, PATHINFO_EXTENSION);
          if ($img_ext != 'svg') 
          {
              // we have the actual image size, but might need to further constrain it if content_width is narrower
              list( $width, $height ) = image_constrain_size_for_editor( $width, $height, $size );
          }
      

      you still can not see the thumbnail for svg files, but I have not time to fix that.

  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?

    • Permalink to comment#

      Too much paranoia here. They blocked irregulars. Most wordpress users are non-technical. They are some social media and blog managers so they don’t need things like SVG. Doing these things do not bring any security risks at all. It only makes you more badass than a regular wordpress user.

  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; }</code>
    
  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 :)

  25. Still working via WordPress 3.9.2 – and thank you! I wound up using this code:

    /*-----------------------------------------------------------------------------------*/
    /*  enable svg images in media uploader
    /*-----------------------------------------------------------------------------------*/
    function cc_mime_types( $mimes ){
    $mimes['svg'] = 'image/svg+xml';
    return $mimes;
    }
    add_filter( 'upload_mimes', 'cc_mime_types' );
    
    /*-----------------------------------------------------------------------------------*/
    /*  display svg images on media uploader and feature images
    /*-----------------------------------------------------------------------------------*/
    function custom_admin_head() {
      $css = '';
    
      $css = 'td.media-icon img[src$=".svg"] { width: 100% !important; height: auto !important; }';
    
      echo ''.$css.'';
    }
    add_action('admin_head', 'custom_admin_head');
    
  26. That third to last line (echo) should be the one at http://pastie.org/9470273. It’s not letting me paste it in this comment box.

  27. Nimmi Thomas
    Permalink to comment#

    Work very well. Thanks saved my time.

  28. Has anyone had any luck getting svg to work with the theme customizer? Use case – allowing end user to upload an SVG logo via the theme customizer.

    The stuff above works great for the media uploader, but it’s a no-go via the customizer. SVG files are greyed out and not selectable when trying to upload.

    TIA for any insight.

  29. Hero
    Permalink to comment#

    Thanks a LOT …….keep up the good codes come up :) God Bless You :)

  30. Permalink to comment#

    Hey!

    Thanks for this. Well, everything really. You offer great stuff. I was using this script today and noticed it wasn’t printing the css properly. Anywho… I added to it slightly and seemed to solve the problem for me. The SVGs were not showing correctly in the list view. But with the addition of they do. Maybe this will help others.

    function fix_svg_thumb_display() {
      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_thumb_display');
    
    
    • Permalink to comment#

      Hmmm. that’s odd. I added a before the td and after the closing CSS bracket. Seems like the comment thing filtered that out.

  31. The “Featured Image” display did not work for me until I added another ID.

    #postimagediv img[src$=".svg"]

    function fix_svg_thumb_display() {
      echo '
    
        td.media-icon img[src$=".svg"],
        img[src$=".svg"].attachment-post-thumbnail,
        #postimagediv img[src$=".svg"]{ 
          width: 100% !important; 
          height: auto !important; 
        }
    
      ';
    }
    add_action('admin_head', 'fix_svg_thumb_display');
    
    • telemarker
      Permalink to comment#

      you are right, i found out you can use

      .postbox img[src$=”.svg”]
      too

  32. Ilia
    Permalink to comment#

    Does not work…

    Why WP save svg as ‘.png’ file?

  33. Permalink to comment#

    If the thumbnails in 4.X still aren’t working, you may need to make sure that the code gets inserted as actual inpage stylesheets. I think the code display isn’t allowing for the proper display of the <style> element which is supposed to follow the opening of the echo.

    so it should actually look like this:

    function fix_svg_thumb_display() {
      echo '<style> td.media-icon img[src$=".svg"], img[src$=".svg"].attachment-post-thumbnail { width: 100% !important; height: auto !important; } </style>';
    }
    add_action('admin_head', 'fix_svg_thumb_display');
    

    NOTE: this only displays in the list view.

  34. telemarker
    Permalink to comment#

    you got it gray!

    so far this is working well with wordpress 4.0

    ######################################################
    # display images on media uploader (list view only) and feature images 
    ######################################################
    
    function display_svg() {
        echo '';
    }
    add_action('admin_head', 'display_svg');
    
    

    i added feature image support and removed the ugly border around the images in the media list view.

    any news or even solutions about the media grid view?

  35. Legend!

  36. Permalink to comment#

    This speaks majorly on uploading as a media. What if I wanted to write SVG directly, or write mathML directly, how can I make wordpress parse it correctly. It auto-changes it to something ugly and takes off all the tags

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like ```this```. You don't need to escape code in backticks, Markdown does that for you.

Sadly, it's kind of broken. WordPress only accepts a subset of HTML in comments, which makes sense, because certainly some HTML can't be allowed, like <script> tags. But this stripping happens before the comment is processed by Markdown (via Jetpack). It seems to me that would be reversed, because after Markdown processes code in backticks, it's escaped, thus safe. If you think you can fix this issue, get in touch!

If you need to make sure the code (typically HTML) you post absolutely posts correctly, escape it and put it within <pre><code> tags.

Current ye@r *

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