What is SVG?

Scalable Vector Graphics are basically images or icons that are scalable, up or down, and will not lose quality in doing so. SVG’s are just now really gaining traction because the browser support if finally to a point where it makes since to use them.

Checking Can I Use – caniuse.com – shows every major browser fully supporting SVG’s at least 2 version back. It shows that IE8 doesn’t support them but in my testing they seem to work for the situations we’re using them for, and we are using them on production websites.

How to use?

Using an SVG could be as simple as throwing it in an image tag. 

  <img src=”icon.svg” >

This isn’t the preferred way to use SVG’s though and can be a little wonky in some cases. There are many ways to use SVG’s on a page and the most simple is declaring the SVG inline. 

  <svg xmlns="http://www.w3.org/2000/svg">
    <circle id="greencircle" cx="80" cy="80" r="80" fill="green" />
</svg>

The above code generates a circle that can be infinitely scaled without losing quality. You can also declare the color and shape of your circle right in line, or you can modify those values using CSS. 

  svg circle { fill: red;}

By giving your circle an #ID you could have multiple circles and target them individually with CSS as well.

Wow, but trying to draw shapes with code is hard. What if I wanted something more complex?

You don’t have to rely on defining shapes in code to build the SVG you want. Tools like Illustrator or Sketch. Here you can make any vector shape you want, including using gradients, and save them out as SVG.

SVG is a built in format inside of Illustrator
SVG is a built in format inside of Illustrator so do a normal Save As.

Use the Format dropdown in Illustrator to select SVG
Use the Format dropdown in Illustrator to select SVG

Make sure you select the correct SVG Profile in Illustrator
This dialog box can be a little confusing at first but just make sure to set your profile to SVG 1.1 - also when saving the file make sure that you don’t check the option to “Preserve Illustrator Editing Capabilities.” Illustrator will already allow you to reopen an SVG and edit it but checking this will make the file size much larger.

If you open up that file in a text editor you’ll see a large mess of code. There are SVG optimizers that can easily optimize these for better performance on the web.

Now you can drop that SVG code right on your page and use CSS to scale, color, or animate it.

The Sprite

But what if you only want to define your SVG once and use it all over your site like an icon font? We can do those too using SVG Spriting methods. This can be manual labor or there’s a nifty grunt task that can do this for you as well. I’ll show you the manual way here so you have an idea of how it works.

Take a look at the code inside that SVG you created. Inside of the SVG-tag itself you’ll notice things like <path> <polygon> <circle> and so on. These are the shapes that make up your SVG image. If you surround those within a <symbol> tag, it will group those into one defined symbol. This is basically how you do spriting. Add many SVG symbols to one SVG definition and give those symbols #ID’s so you can target them with CSS.

This is really cool because to use an image or icon from this set you simply have a "use" statement.

  <svg class="icon"><use xlink:href="#twitter" /></svg>

No need to have quadrants baked into CSS trying to find the exact location of an image. Just call the #ID assigned to that icon and boom!

More SVG Pens

More Resources

CSS-Tricks Swapping SVG Icons
CSS-Tricks Mega List SVG Information