loading

SVG is a thing now; you should use it.

[Fun with code is a multi-part series. Read the rest.]

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 <embed> or <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 <img> tags.

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.

3 Comments

14 Aug 2013

Reply

Really solid article, Drew. You make a very compelling case for (at least) occasional usage. I’ve been interested in the SVG format for some time now, and managed to get an implementation working, but this goes into nice depth about the "why." Thanks for sharing.

15 Aug 2013

Reply

Great article! I’ve been looking for excuses to try out some SVG myself, now I have some great points to argue for :)

6 Sep 2013

Reply

I’ve written up a little SVG to PNG batch converter to speed up the process of generating these fallback images. It is currently in beta, so if anyone would like to download it and send over some feedback, it would be great: http://svgtoimage.com/

17 Jul 2019

‘Enter’ to submit

The multiply effect is a lie

This year’s fabulous Big Omaha website is showcasing a little visual trick. Early on, when Nathan and I were discussing the intended visuals on the site, I failed to notice he was using the multiply effect in Photoshop to achieve the appearance of the red overlays – and he went forward working that into the design. To my dismay, when I went to add the red layers by simply overlaying a slightly transparent layer of red over the top of…

Fun with code at Meet The Pros

Last week I spoke at Meet The Pros and, not surprisingly, my presentation was titled Fun with code. When I had volunteered to speak way back when, I envisioned myself talking about a bunch of code stuff and making it really interesting and fun. If you’re a regular reader of the Fun with code series here, you probably don’t remember any of it being terribly interesting or fun. It may be really helpful and useful, but it’s certainly too specialized…

Detecting a retina display

A few weeks ago, we announced that oxidedesign.com was fully retina optimized. For those of you who do not know, a retina display is a monitor or device that has more pixels per inch of space than a normal display. This basically means it is harder to tell where the edges of pixels are, allowing for an extremely crisp and clean appearance. This works great on the web for things like text, but a problem arises when displaying images. Since…

Access Restriction for Live Staging Sites

We have a lot of active, ongoing projects here at Oxide, especially when it comes to the web. In order to build and make changes to sites which can still be viewable for internal or client review, we run live staging versions of them on subdomains of oxidedesign.com. Don’t bother digging around looking for a secret gem though, because you can’t get in. At least, not anymore.

Extend post types with custom taxonomies

For part two of this series, I want to show how I extended the default functionality of WordPress custom post types and taxonomies in order to build a user-friendly way to associate posts from one type to another. To recap, in part one, we set up a couple of custom post types. To start this tutorial we’ll be using a very similar function to set up the taxonomy which we will leverage for post-to-post association.

Using custom post types for WordPress

Over the past few years, I’ve written quite a bit of code and I’ve had a lot of fun doing it. I’ve got tons of useful snippets in my back pocket and I’m just itching to share them with the world. I’m going to take this opportunity to start a new series here on the Oxide blog, Fun with code. To get things started, let’s outline a problem and uncover a situation which creative code can solve.