Tom Germeau

Using SVG in your web app

SVG has been around for a long time. The dawn of screens with different pixel densities just made it almost a necessity for your web app. Luckily newer technologies like HTML5's inline SVG now make it a cakewalk to deploy. The technologies are in place, but there are some things to keep in mind when you want to keep your assets pixel perfect.

This is not a vector artwork guide, this just describes the Illustrator work flow I use specifically for user interfaces.

Exporting

While you're drawing make sure you turn on pixel preview (Alt+Cmd+Y) and turn on "Align to Pixel Grid" in the "Transform" panel for straight lined shapes. Make sure when you create an artboard the x, y, width and height are all even integers.

When you're ready to export go to "File > Save a copy" and select SVG from the format dropdown. You can edit the exported SVG file directly with Illustrator afterwards if that's desirable.

When you click "Save" Illustrator will present you an SVG options dialog. There's a really complete guide for these settings on Creative Droplets but here's the gist:

  • Leave the default "SVG 1.1" profile. It is the most widely supported version out there.
  • Lowering the "Decimals Places" to 1 will probably not mess with your path's precision but will improve readability and reduce file size.
  • To avoid adding a bunch of fonts cruft select "Convert to outline".

The options dialog allows you to peek at the code with "SVG Codeā€¦". You can use this as a shortcut to grab the needed code if you're going to embed the SVG directly in your HTML. Note: For some reason the button is disabled when you select a specific artboard.

Embedding

There are three ways to embed your SVG in your HTML: using the plain old HTML IMG tag, in CSS backgrounds, or inline in your HTML. The latter is interesting because it allows you to apply CSS styles to your paths and manipulate them with JS. For example, you can apply a single color to all paths in an SVG element:

path, rect { fill: #00b2a6 }

One thing to consider with this technique is strokes; the fill will not be applied if your artwork uses them. An easy solution for this is to make sure to let Illustrator expand your stroked shapes before exporting to SVG. Also be sure to check out how technologies like CSS filters make common tasks like dropshadow easier.

Attributes that matter

By default Illustrator adds a lot of unnecessary data to the SVG file. On the SVG element itself, you only need to keep the viewBox and xmlns attributes. Even the xmlns can be removed if you're embedding in an HTML5 page.

The viewBox attribute enables your browser to scale your vectors. By default it will contain the dimensions of your artboard. This is not crucial to support different pixel densities, but it allows you to reuse your UI elements at different sizes by just changing the dimensions of the container.

Make sure when you're using a viewBox that the dimensions of the container are the same or an even multiple of the viewBox's dimensions. Doing so will avoid blurry borders.

This is pretty much all you need to know to get going. Check out this example of inline and external SVG on your retina phone and desktop to see the technology in action. When it's time to deploy, there are tools like Grunticon that automatically create fallbacks for hostile environments.

SVG is here to stay. I have successfully used it in multiple projects, including the newest Chartbeat products. Hopefully this article will make it easier for you to use them too.

TweetFollow @tomg