Adding SVG Upload Support for WordPress

As the web & technology continually march forward, our jobs as web designers & developers become more challenging. We constantly need to re-evaluate our methods of implementation; one such method is handling resolution independence in content management systems.

With the proliferation of retina mobile devices and now retina displays, both designers and developers need to account for @2x and @3x+ resolutions. While core elements of web design like HTML, CSS, live text etc. are already resolution-independent, raster-based images prove to be a challenge. This is due to the pixelation of PNGs, JPGs, GIFs etc. on higher resolution devices. This is where SVGs come in.

A developer can easily add the SVG inside of an <img> element – or even input the SVG code directly – when using WordPress as a CMS. Both of these solutions are perfectly fine, and the latter solution even allows you to easily animate or change the stroke/fill of the image. The problem with these methods, though, is that that they don’t provide easy access for your basic content manager to change these images if required through WordPress admin. By default, in WordPress, SVG files will be rejected when attempting to upload them through the media uploader.

Here’s how we can solve that problem:

 <?php

/* -------------------------------------------------------------- 
   Allow Upload for SVGs
  -------------------------------------------------------------- */

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

?>

Throwing this in your functions.php file (or in your plugin file, if you’re a plugin author needing this functionality) will allow you to upload SVGs through the media uploader to custom image fields, featured images, and all other upload fields. Pretty handy stuff!