The SVG Workflow

From Illustrator to <code> to animations

Trying to break the Pixel-Perfect Myth

In Aerolab we are always very curious and since we love illustrating this was a good moment to mess with the PP Myth (PP is short for Pixel Perfect). We wanted to find the best workflow from Illustrator to svg, to code. So we ended up doing all of these tests to find the best workflow. This was going to save us a lot of time so we wanted to get it right.

We started working with SVG a while back. Of course there are some browsers that don’t support it yet, but we don’t like IE anyways :P Check out caniuse to find out more about this.

Enjoy! Any feedback is more than welcome :)

SVG file from illustrator - Pixel Perfect
SVG file from illustrator - Not Pixel Perfect
SVG file from illustrator - Pixel Perfected

Best of all, SVGs are infinitely scalable & retina ready!

Performance is also very important, check out the differences

Animating & coloring an inline SVG is as easy as pie

Check out the flow

First, create your illustration in Illustrator. There's no need to be pixel perfect, but borders must touch. Stay away from blending modes or masks; SVG has poor support for them… Also try to expand all shapes.

Once you have you're done, try to be organized and name all the sub-layers so that when you export the SVG and place the code inline the ids are nice & tidy. Mind the next person that may have to deal with this code.

Go to the File > Save as and make sure to check the SVG preferences in the option. Name the file whatever you want and wait till the SVG options come. Then go to the bottom and select SVG code and you’re done :)

This infographic was animated in minutes thanks to this flow

Best of all you, with SVGs you can easily reveal an illustration

I bet all of you have seen that little trick where an SVG path is animated to look like it's drawing itself. It's super cool. Jake Archibald pioneered the technique and has a super good interactive blog post on how it works. Brian Suda wrote about it on 24 Ways. Polygon used it to great effect on a custom designed article and wrote about it. Codrops has some neat examples.

1. Shape must have a stroke
2. Strokes can be dashed
3. We can also "offset" the stroke, which moves the position of those dashes
4. You can also mess with the fill