SVG Images in Web Design

With the increase of different devices used to browse websites, good practices of web design – in this case, incorporating responsive design into a website – is becoming increasingly more important to allow the maximum number of users possible to view a website and to provide a good level of user experience.
So where does SVG[1] fit into this? SVG (Scalable Vector Graphics), as the name suggests is an XML-based image file format for vector graphics, typically created and edited with software such as Adobe Illustrator or CorelDRAW, although as it an XML-based format, it can also be edited with a simple text editor.
In websites that incorporate the use of icons or logos, SVG brings a huge benefit over using other image file formats like jpeg, png or bmp, and is largely more appropriate and tailored for these purposes. This is because jpeg, png and bmp formats are raster graphics formats. In short, these image file formats aren’t suited for logos or icons and aren’t tailored to work responsively (see image comparison below).
Switching your logos and icons from raster graphics to vector graphics makes sense in more ways than one. Considering that these types of images (icons and logos) are generally created using vector graphics software like Adobe Illustrator and CorelDRAW, it makes no sense having to convert these to raster graphics to implement into a website. It just creates more work, adds more unnecessary steps and wastes time to reach the same goal, with less of the benefits.

Implementing SVGs

There are multiple ways you can easily implement SVGs into your website. Deciding on which is the best way is entirely up to how you work. Here are some of the easiest and quickest ways:
In an image tag
[code language=”html”]
<img src="filename.svg" alt="text">
[/code]
As a background-image:
[code language=”css”]
.element {
background-image: url(filename.svg);
}
[/code]
Inline in the DOM
[code language=”html”]
<html>
<body>
<svg>…</svg>
</body>
</html>
[/code]

The benefits

Saving your logos and icons in SVG means you can jump right back into your vector graphics editing software, make changes to them, save them and have them ready for use immediately – no more having to convert them to a raster graphics file format and optimizing them for the web, which leads us to the next point. Even after optimizing your raster graphics for the web, SVG manages to compress the file size better than raster graphics and it scales to any size without losing clarity.

The drawbacks

Despite all the positives, SVG is unfortunately not a perfect solution. One of the biggest problems is that you can’t manipulate your SVG with CSS unless the XML code is placed directly into the HTML DOM, which is far from ideal and is just a bad way to work. Even if this wasn’t necessary, styling SVG can prove to be slightly tricky, especially depending on the complexity of the SVG illustration. The other problem is that you will need to include a fallback should you choose to cater for the few that are still running versions of Internet Explorer 8 and below.

Conclusion

So not only does SVG look better when scaling and zooming, but it also keeps the file size lower than raster graphics file formats, which promotes faster loading times, both of which are great examples of practicing good standards of web development. SVG is the future, and with such a wide spectrum of browsers supporting SVG, there is little reason to not start using SVG today.
Resources and further reading:
[1] Scalable Vector Graphics – Wikipedia
Feature image – Simon Cook
Making SVGs responsive with CSS – Sara Soueidan
Using SVG – Chris Coyier