Use SVG in Websites Now – a How-to Guide

Summary: SVG graphics is now supported on the majority of web browsers (including mobile devices). Below is a record of the experience of using SVG graphics in my website and why I suggest you to use SVG in your next web project.

In the revamp of my website www.edward-designer.com, it was decided that SVG should be used whenever possible as the technology is maturing. Or is it? I did encounter some problems en route but the result is quite satisfactory.

For the SVG files, I either created them in A.I. and exported as SVG or download free from iconmonstr which offers a searchable set of SVG icons (all in black color). When you try to create text graphics in A.I., remember to outline the texts on exporting, otherwise something weird will show up in Android browsers. Remember to optimize the SVG with an online optimizer if you export it from A.I.

Change SVG color

Assuming you know little about SVG, you can either open the SVG downloaded from iconmonstr in A.I. and change there or open the SVG file in a text editor and add fill=white or any other SVG named color.

Change the color of SVG icons

Actually you can control the appearance of the SVG graphics using javascript. As seen from the above code, the path has an id of image-file-2-icon. Suppose you want to change its fill color to black, you may simply need to include the following javascript code (with jQuery):

$('#image-file-2-icon').attr('fill','black');

Use of SVG in HTML

You can use svg as normal image in the img tag or object tag and control its width and height using css:

<img src="image.svg">

Alternatively, you can add SVG inline by pasting the svg code directly in the html. This has the added benefit of being able to control the style of the SVG via CSS.

SVG can also be used as background images:

<div style='background-image: url(background.svg);'>

Fallback for Old Browser (i.e. IE8)

You may refer to the current state of svg support here. If you use svg in img tag, use the inline method:

<img src="image.svg" onerror="this.src=image.png">

Or, the non-intrusive method:

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

Other Issues to Watch Out For

1. svg is quite slow in iOS, use simple svg or limit the use to 1 or 2 svgs on each page
2. types used in svg may not render correctly, outline the text before exporting to svg