Producing Animation-Ready SVGs

This is a guest article from @leer0y

As we increasingly employ animations, transitions and time-based ‘direction’ in our site designs, with technologies such as Greensock’s GSAP, it’s imperative that we work closely with all teams involved to realise our creative visions in this area and work efficiently whilst preserving our sanity.

This document forms the basis of our working practices to do so, including some ‘rules of the road’, methods and simple courtesies to help us all - as such it isn’t exhaustive and will be subject to updates.

Most important amongst these points are the following:

  • Please allow time and capacity to produce asset files and storyboards or written direction for animation.

  • Our developers are not mind-readers - Communicate your intention for visual and animation style clearly, label your layers and files appropriately.

  • A Photoshop file or Jpeg is not an acceptable asset file for an SVG-based animation.

  • Ask questions if you need to - Lee, Ralph or Matt will be able to help.

Animated SVG Preparation - some quick rules of the road

  • Any infographics, icons, or other graphic elements that are to be animated SHOULD ALWAYS be prepared ENTIRELY in Adobe Illustrator (or similar vector graphic authoring package capable of outputting acceptable SVG files). This means the final state should exist as a separate file in it’s own right, containing all colours, gradients, text and transparency (not imported in to Photoshop and recoloured or the opacity altered, for example).

  • Please set up Illustrator files as per the image below, with individual elements grouped together indicated by the layers in <> parenthesis/Tags.

SVG Prep In this simple example, the green blob background, the running foot and the text are all individual groups - separate elements for the purposes of animation.

  • As a courtesy, labelling your groups and layers is always a good thing to do.

  • Try to visualise how the animation might work (in a meaningful way) and provide written or storyboarded notes to aid the Dev team or other team members/clients to understand your intention.

  • Please adjust the artboard of your Illustrator file to fit the finished size of the animation.

  • ALWAYS provide Source Illustrator files in addition to SVGs as (depending on the complexity of animation) Developers may need to make adjustments to the source file.

When exporting SVGs, please use the following method:

(In Illustrator)

File > Export > Export As…

In the dialogue box: - Choose your location to save - Select ‘SVG’ from the picklist - Check ‘Use Artboards’ - Click ‘Export’

In the ‘SVG Options’ Dialogue: - Please use the settings below SVG Export Options

Be part of the Crowd

We're always on the lookout for talent, and currently have offices in the USA, Canada, UK, Dubai, and China.

If you fancy being a part of a global multicultural development team that strives to do the best work possible, email us at results@thisiscrowd.com