The Future is Now

SVG isn’t a new blog topic, but it’s a topic that’s definitely heating up – just like our love affair.

If you’re still on the fence about bringing it into your projects, then take a gander at support across browsers from CanIUse.com.

Need proof of it’s awesomeness? Peep any graphic on my site. I dare you.

Prepping Your Design

If you know what a vector is and are interested in SVGs, you probably already have one created and/or a program to edit them, like Illustrator. I personally use Illustrator, and exporting an SVG is a simple “Save As” – but first, do the following:

  • Simplify your shape as much as possible
  • Reduce colors (you can change those with CSS later!)
  • Resize art boards to fit snug to your artwork’s boundaries

Post export, I suggest running it through this optimizer. After choosing your file and selecting upload, you’ll likely want to check off “Convert styles to CSS” and “Remove unnecessary whitespace” and then download the result. You can optimize a bit more by opening the resulting file in a code or text editor and simplifying through the following:

  • Reduce the opening tag to just the xmlns and viewbox attributes
  • Remove empty layers (if you forgot to delete unused ones from your vector file)
  • Possibly¬†move css styles outside (see use cases below to determine if this step is beneficial)

A Brief Intro to Using SVG

I spent a Saturday combing through SVG-related links and experimenting with my own site. I found you first need to figure out how you’re going to use an SVG:

  1. Just a .png replacement with no interactivity
  2. No interaction, but can be affected by CSS
  3. A fully interactive graphic enabled by jQuery or other SVG specific libraries like SnapSVG

A Simple, Scalable .png Replacement

So your reason for using SVG is to simply leverage the scalable, resolution-independent nature of a vector vs. raster graphic. Easy peasy! You can include an SVG in your project by simply using an HTML tag you know well already:

<img src="awesome.svg" />

Change The Design With CSS

There are a couple ways to access and change parts of your design with CSS. You can either update the styles directly in the SVG file and include it like an¬†<img>, or you can pull out your CSS into your normal file. In the second case, you’ll want to add meaningful classes and/or IDs within your SVG. Then, you may want to paste the entire SVG file contents directly inline with the rest of your HTML.

Note that when placing an SVG inline, it will take on the dimensions of its containing element, unless you’ve kept height and width attributes on the tag.

Two simple ways to use CSS with your SVG are to change the fill color, either of certain elements all the time, or perhaps all elements in the SVG on hover. “Fill” is the SVG-specific CSS attribute to change it’s color whole filled-in color.

SVG Sprites!

This little note is dedicated to the beauty that is creating sprites with SVGs. So compact, much space saved, fast loading, wow. Peep the source SVG and article linked to from the this link (and also check out his full archive of SVG goodness linked in the Resources section of this article).

Making SVGs Fully Interactive

To affect your SVG with jQuery, you’ll need to also load it up that way so it is recognized as part of the DOM (TBH, I don’t totally understand why, but I tested and found it seemed to be true). View this Codrops article for more info, which includes the following load example:


$(function(){
    $("#stage").load('interactive.svg',function(response){
        $(this).addClass("svgLoaded");
        if(!response){
            // Error loading SVG!
            // Make absolutely sure you are running this on a web server or localhost!
        }
    });
});

You can also use a library such as SnapSVG for more crazy, mind-bending interactions, if you really need such a thing.

Resources

I started my research with Chris Coyier’s excellent list, from which I found myself getting the most benefit from the following link trails.

But first, watch his fantastic presentation to get a quick, energetic, visual intro into all I’ve talked about and more:

Additional Links

Related Topics

CSS | SVG