SVGs (Scalable Vector Graphics) are the future graphics format of the web, they offer resolution-independent, fully scalable and crystal clear graphics. SVGs use XML to define paths and shapes, to create our graphic. Moving past JPG and PNG, SVG is the answer to Retina (HiDPI) displays, they even look better on standard display.
Table of contents
Hint: SVG detection and workflow has been revised (30.05.2013) recently to an even better solution, which takes performance and consistency into account, please read about it here.
This Script has been updated, jQuery and Modernizr independent: 27.12.2012 – updated script
Consider your options for SVG use, and then realise the full power of them; logos, icons, navigations, patterns, repeating backgrounds, all fully scalable to any size. This saves a bunch of time not having to create doubled-up graphics (@x2) for Retina. We will have to create a PNG version of our SVGs for fallbacks, but they’ll be the exact same size, not @x2 which saves resizing issues.
HTML5 and SVG
There are a few ways to use SVG, as an <object>, <embed>, <iframe>, <svg> and last but not least, the <img> tag – my favourite.
HTML5 spec allows for the use of an SVG inside the <img> tag, which makes it super easy and fast to get started using SVG, and this is where we’ll go in this tutorial. Here’s what our source code could look like using SVG inside an <img> tag:
Pretty simple. And that’s it.
To create an SVG, you’ll need a vector graphics program like Adobe Illustrator. I recommend creating your SVG ‘to size’ – by this I mean that if your graphic needs to be 100×60 pixels, then use a canvas inside Illustrator at these dimensions, making sure your graphic fills the full width/height.
Usual story – IE9 does support SVG, but IE6/7/8 do not, and all modern browsers do. So what do we do for these browsers…
First we need to know whether the browser can support SVG, and for this we’ll be using feature detection with Modernizr. We could test the features of a browser by doing the following:
We declare SVG in our markup (logo.svg), so we don’t want to execute any functions if the browser does support SVG – it’s native. The only time we want to execute something is if it doesn’t support SVG.
Modernizr SVG Setup
There’s no point including an if or else function to provide a fallback for SVG, as we only want to execute a function if the browser doesn’t support, which is really the else part. Instead of declaring else, we can simply add an ‘!’ to invert the expression, and end up with:
This now essentially means, if the browser doesn’t support SVG, execute this.
Now we’ve setup our Modernizr to provide a fallback method, we need to replace the ‘.svg’ with ‘.png’ to provide an actual fallback solution.
I’ve put together a neat little jQuery script to do exactly that, and will swap all ‘.svg’ on the page with ‘.png’:
First targeting an <img> element, and using a special CSS selector (that searches for any images that contain a source that includes ‘svg’). If so, we then run another function on the source attribute. We use jQuery’s .replace(); function to replace the ‘.svg’ in the filename with ‘.png’. And that’s the job done. All it means is that for any SVG you use, you’ll need to add a PNG fallback. It takes an extra minute at most per image.
CSS: SVG as Background
As far as I know, it’s impossible to detect and swap out an SVG as a background image, thankfully Modernizr has an alternative to running a script. When Modernizr loads, it adds all the browser supporting classes to the <html> tag. You’ll end up with something like this:
You’ll notice in there is ‘svg’. I’m using Chrome. If the browser didn’t support SVG, it would add the class ‘no-svg’ This allows us to create a CSS declaration for each, to provide a background fallback like so:
Displaying broken images?
Some server setups support SVGs by default, if yours doesn’t, add this to your .htaccess file:
UPDATE: Custom SVG Feature Detection, Without Modernizr and jQuery
If you’re not fussed about the additional classnames, use this script, which inverts the expression (!) to run if the browser doesn’t support SVG.
Outputting from Illustrator
Once you’ve created your SVG from Illustrator, right-click it and open it inside a text-editor (Coda 2/Sublime Text 2/whatever) and remove the height and width that’s generated. This will give you much more flexibility when working with your SVGs, all you’ll need to do it add some styling to it instead with CSS.
The pieces you need to remove are the ‘width’ and ‘height’ attributes, and can be found on the opening <svg> tag (I’ve removed it from mine):