780-633-0415
INFO@PAPER-LEAF.COM

about a 1 minute read

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');

?>

See the Pen OPNGWg by Keyfer Mathewson (@keyfermath) on CodePen.

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!

one of us one of us

The Paper Leaf Design Weekly

If you love design, you’ll love the Paper Leaf Design Weekly. Join thousands of other designers getting wallpapers, in-depth design articles, free fonts & other design goodies delivered via our weekly design newsletter. Why wait? Join now and don’t miss a beat!