How to make SVGs work with WordPress

SVG support is becoming greater and greater and will soon be standard. As web designers and developers we should be implementing this technology into our workflow. I've recently started using it and here is how I went about it. I want to thank my friend Austin Ginder for helping me understand this.

Chris Coyier has a great blog post on how to enable SVGs in WordPress on his site CSS Tricks.

For your functions.php file or a functionality

/*add SVG functionality*/
function cc_mime_types($
           $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.

Ok now that we've covered Chris' info lets get into how to actually make SVGs work with a fallback. We'll need to create some files. I'm doing this in a child theme so it may be a little different if you are writing your own custom theme.

You will need to create a JS folder with some files in it named functions.js and jquery.svgmagic.js (this file can be named however you like). In the functions.js file we will be using the enqueue scripts from the Underscores theme put out by Automattic. These scripts are located on line 105 of the functions.php file.

In the functions.js file we will insert the snippet found on SVG Magic and save the file.

jQuery(document).ready(function(){
            jQuery('img').svgmagic();
});

Onto our jquery.svgmagic.js file. We will need the Direct download from SVG magic. I'm not going to include it here as it's just to long. Take the code from the Direct download and put it into the jquery.svgmagic.js file and save it out.

Here is a look at the enqueue scripts I edited slightly. We are pulling in WordPress' version of jQuery on the first enqueue. Then we are pulling in the direct download file from SVG Magic we made named jquery.svgmagic.js and finally we enqueue the functions.js file.

/**
* Enqueue scripts and styles.
*/
function unity_scripts() {
            wp_enqueue_script( 'jquery' );
            wp_enqueue_script( 'svg_magic', get_stylesheet_directory_uri() . '/js/jquery.svgmagic.js', array(), '20120206', true );
            wp_enqueue_script( 'functions', get_stylesheet_directory_uri() . '/js/functions.js', array(), '20130115', true );
}
add_action( 'wp_enqueue_scripts', 'unity_scripts' );

Now go forth and use SVGs my friends.

Warning:
Full disclouser, WordPress does not natively support SVGs at this time due to security risks. Implementing SVGs can open up your website to security threats. Understanding that uploading any file to the system is a potential security risk, it is strongly recommended to only let trusted users to have upload privileges.

Here is a link from WPcontent explaining the security risks in greater detail.

MDN resource about SVGs

A presentation about SVGs

A short Twitter discussion about SVGs and vulnerabilities with Chris Coyier and my friend and Jetpack Team Lead George Stephanis.