Code Responsible

Skip navigation

The Power of SVG

SVGs have been around for a long time, but never made it into the web due to the lack of browser support. With old browsers dying off, scalable vector graphics are making a come back — but why? What is so amazing about SVG?

Before we go into that, I think it’s important to talk about the difference between bitmaps and vectors. Your typical JPG and PNG are bitmap (raster) images, which are essentially pixels on a grid. By taking a bunch of dots and squashing them together, we can create an image simply by altering the color of these dots.

Bitmap vs SVG

The difference between a bitmap image vs an scalable vector graphic.

Vector images, on the other hand, are simply mathematical equations that end up creating objects or shapes to create an image. Because these shapes and objects are scalable, they don’t lose their resolution at any size. Bitmap images, however, require more pixels in order to get a better resolution.

Furthermore, SVGs provide added control because they are loaded directly into the DOM and they can be separated into different DOM elements, we can actually target each of these elements with CSS and/or JavaScript to do some crazy things. With images, we do not have that flexibility and we take a performance hit because we have to request those images. With SVGs, you can inline them so that browsers will load your SVGs when they are reading the markup on your page (less HTTP requests, the better).

So… when should you use bitmap images over SVGs? Well, to be quite honest I would argue whenever you can use SVGs, you should, but you will find that you can’t create everything in SVG. Things like pictures of people that have lots of details cannot be created in SVGs (due to the complexity of the image).

What about CSS3? You can make shapes with that too!

There are a lot of different shapes you can create with CSS3 nowadays and I think some people get confused when to use one vs the other. I think Sara Soueidan illustrates this phenomenally in her presentation Building Better Interfaces with SVG by showing what exactly goes behind the scenes for CSS to render the equivalent of what SVG could be doing. The main point is that CSS is designed for styling markup on the webpage and shouldn’t be a replacement for creating shapes or animated objects.

I think another great example that illustrates how much you have to go through to make a CSS equivalent of something you could make with SVG is the Material Design spinner I found examples of. This first one I stripped out from the Chrome Extension Streamus originally made by Sean Anderson and I simply put into a jsFiddle.

It’s impressive to say the least, but let’s look at how you might do this with SVG. Here’s an example I found on Codepen made by the user jczimm:

See the Pen Modern Google Loader in Pure CSS by jczimm (@jczimm) on CodePen.

Yeah sure, the SVG example still uses CSS, but it does it in such a way that it is using some of the native attributes that simply come with SVGs (by utilizing the attributes stroke-dasharray and stroke-dashoffset, you can create a drawing effect with SVG paths). You also notice the DOM structure is way less hectic than the CSS version.

Helpful Resources

Styling and Animating SVGs with CSS
CSS-Tricks Using SVG

4 Responses to “The Power of SVG”

Leave a Reply

Comment Form