Web Development Trends: SVG Images

Alexandra Barcelona

Mar 19, 2014

With the rise of mobile web and the decrease of attention spans, your site not only needs to scale for multiple devices, but it also needs to be quick to respond. This is why SVG (scalable vector graphics) have started to become more popular in web design. While .svg files have been around for some time, their popularity has increased lately due to their small file size that easily compresses and the ability to add and edit them directly in your site’s HTML/CSS.

How do you use SVG images?

You can implement them into your site like any other normal image file (think .jpg, .gif, .png) using <img>. You can also implement them into your code directly using code created from design programs, like Adobe Illustrator.

When adding .svg directly into your code, you’ll want to first optimize the code using something like Peter Collingridge’s SVG Optimizer to strip the code of all the “extras” that programs like Illustrator will include. Once you have your code optimized, you can edit it inline in your HTML or you can manipulate it in your CSS. For a great step-by-step guide on the different ways to implement SVG images in your site, see CSS-Tricks’ ‘Using SVG’ article.

Pros of SVG:

SVG images don’t take as long as other images to load because they can be directly integrated into your HTML, meaning your site loads quicker, improving user experience and bounce rate.
SVG images are easily scalable (they are vector images) without losing clarity - this is true to a point, but for general use, you won’t be able to notice any real loss of clarity.
Easy to manipulate it in your HTML/CSS with things like filters and interactivity.

Cons of SVG:

Not all browsers support SVG images - (like IE8).
Adding SVG code can bloat your document with extra lines in the <body>.

Every day there are more and more devices available for customers to consume your content, each with different resolutions and viewport sizes. SVG images are a great way to make sure your images are crisp at (almost) every resolution and that load quickly to make sure your users have the best experience with your site, no matter their device.

[Image courtesy of topgold via Flickr Creative Commons - cropped]