Using SVG Images for Best Scalability

Scalable Vector Graphics (SVG) allows vector graphics to be displayed in the browser. As usual with vector graphics, color values and forms are not defined by pixels, but are mathematically described. SVG files thus have a very small file size, can be scaled losslessly and without increasing the file size, and can be animated or altered with JavaScript.

SVG images can be compressed by Gzip.

Another advantage of SVG images is that they can be compressed by Gzip. The result is that less bytes need to be delivered from the CDN or origin server if Gzip compression is enabled.

Simply verify if the SVG graphics has been delivered Gzip compressed:

$ curl -I -H 'accept-encoding:gzip, deflate' https://cdn.keycdn.com/img/logo.svg
...
Content-Type: image/svg+xml
Content-Encoding: gzip
...

Embedding SVG images in your website

Depending on the type of SVG you have chosen (code or file), it will affect the browser compatibility and type of embedding. We describe the most common options below.

Embedding SVG graphics with HTML markup <svg>

If you want to use the SVG code, you have only one option at your disposal. You embed the <svg> tag into the HTML code of your page. Please make sure that the option "interactive" affects whether the graphic is flexible or not.

<svg width="120" height="120">
    <circle cx="60" cy="60" r="50" stroke="green" stroke-width="2" fill="blue" />
    <!-- fallback -->
    <image src="circle.jpg" width="120" height="120" />
</svg>

The <image> element is an option to have a fallback.

Embedding SVG as a graphic (<img> or CSS background property)

If you decided to export files in *.svg format, you can use the graphics in HTML code within an img tag. Please make sure that the SVG is now set in CSS code via img and possibly also receives its flexibility from there.

<img src="circle.svg">

Basically, you can assign the SVG (just like any other graphic) to an element via the background property. In order to make the graphic flexible, you additionally have to adjust the background-size property, provided that the SVG graphic was not exported as "interactive".

.circle {
    height:120px;
    width:120px;
    background:url(circle.svg) 50% 50% no-repeat;
}

Alternatively, external image files in SVG can be embedded via XLink and the <image> element. Curiously, all versions of Internet Explorer that do not recognize the SVG format interpret the <image> element as the similar-sounding <img> element. For example, if a JPEG file is embedded via the src attribute, the respective Internet Explorer will display this file. In turn, all browsers that support SVG and thus the <image> element will display the SVG file.

<svg width="120" height="120">
    <image xlink:href="circle.svg" src="circle.jpg" width="120" height="120" />
</svg>

Embedding SVG as an <object>

The <object> tag can also be used to embed SVG. An advantage of this solution is the easy loading of fallback graphics.

<object type="image/svg+xml" data="circle.svg">
    <!-- fallback -->
    <img src="circle.jpg">
</object>

It is important that the <object> element does not contain the correct MIME type image/svg-xml, but, for example, text/svg+xml. Only this way can older versions of Internet Explorer use the alternative <img> element. Current browsers will display the SVG file despite an incorrect MIME type.

Further fallback solutions for incompatible browsers (<= IE8)

Unfortunately, SVG is not supported by older browsers (<IE8). Until these browsers become obsolete, a temporary solution must be found. With the help of Modernizr, a very maintenance-friendly PNG/JPEG fallback can be created without difficulty.

The script Modernizr has long been a part of a web designer's standard repertoire. Modernizr is a JavaScript library that helps you find out which HTML and CSS features your browser supports. If the script is embedded in the website, it writes several CSS classes in the HTML tag of the page.

SVG as a CSS background

Let us begin with the simpler version: an SVG graphic that has been assigned via CSS as a background.

If Modernizr is active and the browser supports SVG, the CSS class .svg is on hand. We first write the fallback solution in CSS code with a JPEG graphic as the background.

div {
    height:120px;
    width:120px;
    background:url(circle.jpg) 0 0 no-repeat;
}

We then proceed according to the Progressive Enhancement principle and make the SVG graphic dependent on the corresponding CSS class.

.svg div {
    background:url(circle.svg) 0 0 no-repeat;
}

That is all. If the browser supports SVG, the SVG graphic will be loaded as a background, otherwise the class .svg will be missing and the browser will use the JPEG graphic as a fallback.

SVG as an <img> tag in the HTML markup

With SVG graphics in HTML markup it is slightly trickier, because the CSS class does not allow us to exchange graphics here. The initial situation looks like this:

<img src="circle.svg">

With a little JavaScript (jQuery), in the case of an active Modernizr we can check whether SVG is supported by the browser. In our case we check if the browser does not support SVG:

if(!Modernizr.svg) {
    // perform the fallback if the web browser does not support SVG
}

In order to keep the work to a minimum when loading fallback graphics, it makes sense to expand the snippet as follows:

if(!Modernizr.svg) {
    $('img[src$="svg"]').attr('src', function() {
        return $(this).attr('src').replace('.svg', '.jpg');
    });
}

The file extension of every image will automatically be rewritten from *.svg to *.jpg, provided that the browser does not support SVG.