Replacing images in HTML with SVG

Article Primary image
Author Image - Phil Middlemass

By Phil Middlemass

Our Creative Director giving his opinion on 17 years in the digitial industry working with leading brands and companies

SVG (aka Scalable Vector Graphics) has been around as a format for sometime now, since 1999 in fact, with v1.1 of the specification released in 2001.

Browser support has always held it back as an everyday format until recent years, IE8 and below doesn't support it, but with modern web browsers maturing, SVG support is in now uniform across all current major desktop and mobile platforms begging the questions why aren't we all using SVG for images a lot more? and how best to implement it?

When to use SVG and why?

As designer this should be obvious to us all, SVG isn't going to replace your JPEG photos and highly detailed graphics, it’s a vector format after all. What it is perfect for is replacing simpler PNG or GIF images that are possibly vector at source, so things like icons, illustrations and infographics etc...

SVG file sizes are small, especially for simpler images, they also compress very well if you have gZip compression enabled on your server.

They look fantastic at any resolution, because they are scalable there is no loss of quality, making them perfect for use with retina/hdpi displays.

SVG output is XML based and can be used directly inline within your HTML code, this opens up another world of possibilities through object interaction and CSS styling, but we’ll cover that another time.

Flat Shadow Light Bulb - PNG
PNG image - 370x360 - 5.49kb
Flat Shadow Light Bulb - SVG
SVG image - 370x360 - 1.7kb

SVG browser support

As mentioned, SVG is now a mature format that has been around since 1999 (believe it or not), although browser take up of the format as an integrated standard was slow. The current situation though is actually rather good, all the current browser versions across all key OS platforms support SVG, even many of the older browser versions do as well, with a couple of exceptions:

  • IE8 and below
  • Android 2.3 and below

Neither of which support SVG. I'll look at ways of falling back to a suitable PNG for those browsers later in this article. For a full breakdown of SVG backwards compatibility - CanIUse has a good browser version support table.

Exporting to SVG

Adobe Illustrator Artboard - SVG
Illustrator artboard with the same pixel dimensions as it's PNG counterpart

There are 2 primary tools I use to export SVG artwork; Adobe Illustrator and Inkscape, which one used depends upon the task, both are good for the job, I won't go in to specific pro’s and con’s at this time, that not what you're here for.

Typically the best approach is to create an artboard or document size representative of the equivalent PNG image size you would output in pixels, this allows you to better visualise your artwork on a 1:1 scale when jumping between assets and visuals in Illustrator, Photoshop and your HTML output.

Saving out as SVG from Illustrator is simple. Go to File > Save As, choose 'SVG' from the 'Save as type' / 'Format' list and hit save.

You will be asked to configure a few options before saving. I generally tend to stick with the default settings (SVG 1.1 Profile, Adobe CEF Type) and save. I find that using some of the other profiles available introduces alerts stating certain elements of my artwork are to be rasterized, so I just avoid them and stick to 1.1.

I alluded to using SVG inline within the HTML code itself earlier. There is an option on the Illustrator SVG options window that allows you to view the SVG code generated without saving the file. This is handy to simply copy and paste the generated SVG code directly into your favourite IDE.

Replacing PNG’s with SVG’s in the <img> tag

Down to business, this is done by simply swapping out the PNG file for your SVG file in the src="" attribute.


<img src="clip-icon.svg" alt="Paper Clip Icon">

Great! but what if the client still wants to support IE8. Well, if you are using Modernizr you can add and use SVG feature detection to search for all images with a '.svg' suffix and replace it with '.png'. This obviously requires you output both SVG and PNG equivalents of the image with the same filename (sans suffix), and have them located in the same directory location. Drop this JavaScript code in the footer of your HTML after jQuery has been called:


$(document).ready(function () {
    if (!Modernizr.svg) {
        $('img[src$=".svg"]').each(function() {
            var $img = $(this);
            $img.attr('src', $img.attr('src').replace(/svg$/, 'png'));

Replacing CSS background-image with SVG

Again much like using the <img> tag this is extremely straightforward, and as simple as replacing your old PNG image reference with your new SVG one whenever you call background-image: or background:


.clip-icon {
    width: 340px;
    height: 340px;
    background: url(/img/clip-icon.svg);
    background-size: contain;
    display: block;

In the example above I have used the CSS3 background-size: property, as using SVG breaks in IE8 we might as well go the full mile and size it with CSS3 and be setup ready to make this element responsive in our design.

If however you still need to consider IE8 and Android 2.3< users you can use Modernizr again to fallback to a PNG using the feature detection CSS classes:


.clip-icon {
    width: 340px;
    height: 340px;
    background: url(/img/clip-icon.svg);
    display: block;
.no-svg .clip-icon {
    // fallback
    background-image: url(logo.png);

Don’t want to use Modernizr? - Here’s an alternative to detect SVG compatibility:

If you don’t like Modernizr for whatever reason but still want to support SVG and fallback to PNG you can use a little JavaScript in the header of your page to give the same abilities:


    var $features = new Object();
    var $html = document.documentElement;
    $features.svg = document.implementation.hasFeature("", "1.1");
    $html.className += ($features.svg) ? " svg" : " no-svg";

This script does 2 things, Firstly, it outputs a global boolean variable in a features object$features.svg defining whether or not the feature is available. This is the equivalent to Moderizr's Modernizr.svg variable.

Secondly, it sets a feature detection class on the <html> tag in the same way Modernizr does, svg if supported or no-svg if the feature is not supported. Again these are the same as those Modernizr outputs so you can use these in exactly the same way as described in the above replacement fallback examples.

Server support for SVG

Its strange to think that a standardised format like SVG isn't a universally enabled MIME type on the numerous server platforms available. Here’s what you need to do if you find your valid SVG urls are returned as 404’s:

Windows Server (IIS7+)

  • Start up IIS Manager
  • With the root server node selected double-click on the MIME types icon
  • If the .svg MIME type is not listed click ‘Add’ at the top of the right side Actions panel
  • Fill in the details for each MIME type you need to add and click ‘OK’:
    • Extension:  .svg    /    MIME Type:  image/svg+xml
    • Extension:  .svgz   /   MIME Type:  image/svg+xml

Unix based servers (.htaccess)

It’s a bit less involved for Unix based servers, the MIME types can be added to your .htaccess file by adding the following lines:

AddType image/svg+xml svg
AddType image/svg+xml svgz


There really is no excuse for not using suitable SVG graphics (except if you’re an IE8 fan) in place PNG's. Yes, it has it’s limits, it won’t work for every PNG (or GIF), but with current design trends moving towards a flat/clean approach SVG now more than ever will enhance your site’s rendering capabilities and reduce bandwidth overheads.

Thanks to Chris Coyier for the inspiration and the kick I needed to start using SVG a lot more.

Other interesting SVG articles:

SVG Stacking to replace CSS sprites:

Better SVG Sprites With Fragment Identifiers

Displaying and detecting support for SVG images (Voor Media)

Using SVG (CSS-Tricks)

SVG browser support - Can I Use