How to provide SVG support on wordpress media library…?

How to provide SVG support on wordpress media library…?

One of my clients wanted to use/upload SVG images (example.svg) on WordPress media library. But you might already have known that, if you upload any image in .SVG format on WP media library, then wordpress will directly reject that for security reasons and will show an error “Sorry, this file type is not permitted for security reasons.”

To solve this issue, you might be thinking of using a plugin that supports SVG images. However, instead of using a plugin, you can solve this issues just writing a little bit of code on your functions.php file

Just copy the below code and paste it in your functions.php file and you will get the required results!

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

Though the SVG images will now work fine, but if you want to show the thumbnail on dashboard media library (List view), put the below code on your functions.php

function fix_svg_thumb_display() {
  echo '<style type="text/css">
    table.media .column-title .media-icon img[src$=".svg"] {
      width: 100% !important; 
      height: auto !important; 
    }
    </style>
  ';
}
add_action('admin_head', 'fix_svg_thumb_display');

Notes: If you add an SVG image using WP post Editor, then the width and height of that image will be shown as “1”. So don’t forget to assign a width and height manually in order to properly show them on front end.

Let me know if you have any additional queries! Thanks.

Leave a Comment