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 plugin:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| /*add SVG functionality*/ | |
| function cc_mime_types($mimes) { | |
| $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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| /** | |
| * Enqueue scripts and styles. | |
| */ | |
| function custom_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', 'custom_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.
A short Twitter discussion about SVGs and vulnerabilities with Chris Coyier and my friend and Jetpack Team Lead George Stephanis.
SVG had been around for years! I remember seeing it for the first time when I was reading a tutorial on someone’s website where they were using JavaScript to do animations with it on IE4, and my only thought was; why don’t they use this instead of binary raster graphics? I mean it would cut the page load time way down, since like the web page it’s just text. And it can scale as large or small as you want. But it’s only now working it’s way into the mainstream. I’d be interested to know what the security risks are of using this graphics format.
Hey Andy check out the links to the other articles about SVG. They give an overview of some of the security risks with SVG.