SVG is a thing now; you should use it.
With all this talk about resolution independence and responsive design, how many times have you built something for the internet and thought, hey, it sure would be nice if I could have a vector graphic here instead of a series of pre-saved bulky images switching in and out some way or another?
For example: every single logo ever, social media buttons, line art of any type. If your concern is responsiveness and you’re using images, then you’re in for trouble. As we’ve seen in a previous post, just detecting a high-resolution display can be tricky, let alone all of the work up to that point getting images sized and saved for every case.
Well it turns out for many applications, there is a much better way; and support for it has been around for longer than you think. The answer to your woes is called SVG, and it stands for Scalable Vector Graphics.
It also stands for justice.
So what exactly is SVG and how does it work?
SVG is simply a format for vector image data (like an Adobe Illustrator file) and browsers can use it to display the image on screen. Basically, it is a way to save a vector file as XML, which can be read back by the browser. There are a few ways a browser can take an SVG file, one being loading them in just like images, except using
<object>. This method is pretty gross though, and I won’t get into that business at all.
A really effective way is through CSS. You can set up background images on elements and reference SVG files the same way you would reference images.
Finally, and the most interesting way in my opinion, you can drop the XML directly in the the page and it will be read along with the HTML.
SVG in CSS
So to reference an SVG file in CSS, all you have to do is create the desired image in a program like Adobe Illustrator at the appropriate original pixel size and save it as an SVG. Then use the “background-size” property to set the desired pixel size of the element at every breakpoint, then simply reference the SVG file using the “background-image” property. Easy!
SVG in HTML
This method is my absolute preference when using SVG, and is especially convenient if you’re building a site that uses PHP or any other language that lets you include files on a page before the page is actually rendered. Using SVG in HTML is just like writing any other element to a page. There are aspects to this that can seem to be a pain at first, but you can alleviate this by saving your SVG files into template files, which you can
include() on your page much like you would
include() a header or a footer. If you use this method, referencing SVG on your page is really no different than referencing images, except that you are using
include() instead of
What else is cool about SVG?
Since SVG is read back as elements on screen, you can use SVG to hook into classes, IDs, or base level element selectors to change colors within shapes. This allows for truly dynamic images and when coupled with CSS animations, can allow for some really unique transitions on hover or other actions that images simply cannot do.
Also, if you are using the HTML method, you’re not wasting precious loading time on countless HTTP requests that would normally be happening with images. That, coupled with the fact that vector data is so much smaller and more efficient that image data, means that your pages will be loading in a snap, and everybody loves that!
So, if you’re so smart, where have you used SVG?
We’ve managed to get a couple sites out into the public that use this fantastic feature. Most recently, Contemporary Analysis which would have been an image-heavy beast, and probably would have been pretty slow for it. Most notably from a responsive standpoint, the Johnson Deconstruction site is a great example of the power of SVG.
Of course there is one minor detail…
Support for SVG has been around for a while now, and is available across the board for browsers — enough so that I have deemed it not a major concern. But you should make sure for yourself if it is appropriate for your project. The only major drawback is lack of support in IE8, but depending on your usage, including a fallback for images can be very simple, especially if your implementation is through CSS only.
I have found that in many cases SVG is very appropriate in countless applications in even the most simple sites. Not only due to the need for responsiveness, but for the simple advantage of faster load times for what would be image heavy sites.