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:

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:

Just a .png replacement with no interactivity

No interaction, but can be affected by CSS

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: