Allow SVG Uploads Through WordPress Media Uploader

September 24, 2015
Posted in: Code Snippets, How To, Web Development, WordPress

Out of the box, WordPress allows quite a few file types to be uploaded to the media library, but SVGs (Scalable Vector Graphics) aren’t one of them.

To allow SVG upload, simply add this code to your theme’s functions.php file:


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

Now you can use SVGs everywhere!

They work like any other image type, except that WordPress won’t give you proper dimensions when using an image object. You can get around this by omitting the width and height attributes on the image, and using this CSS to force the image to fill its container, to a maximum of its original size:


.svg-image {
  max-width:100%;
  height:auto;
  width:auto;
}

Enjoy!

Scott Buckingham

President / Owner
613-801-1350 x101
[email protected]
Scott is a WordPress expert who has worked on hundreds of web design and development projects. He excels at finding creative ways to solve technical problems. View full profile