News

Create an animated infographic with SVG

Discover how to animate infographics using popular web technologies SVG, CSS and JavaScript.

step5

People like to interact with and investigate things and providing interactive content on your website is one of the best ways of holding the interest of visitors for longer. Thankfully, modern web browsers will happily display SVGs (Scalable Vector Graphics), which is great news for anyone wanting to create interactive content, because SVGs can easily be manipulated.

The graphics for your entire interactive stage comprise only one small file versus the plethora of larger GIFs, PNGs or JPEGs you might need for a complex animation developed using more traditional techniques. Additionally, since all of the elements within the SVG are scalable, you can use zoom effects without anticipating and dealing with potential image quality deterioration.

This tutorial will walk you through the steps of creating an engaging animated infographic, so you can really hold readers’ attention. We’ve based the information off a demo developed by the Canadian designer, Adam Coloumbe, whose original work can be found here: bitly.com/WOQ5fy.

DOWNLOAD TUTORIAL FILES

Choose your tools

This tutorial assumes that you will be using Adobe Illustrator to create your SVG file. You can of course use any application you like. as long as it supports the SVG file format. You could even create the file by hand if you are that way inclined.

001  <?xml version=”1.0” encoding=”utf-8”?>
 002 <!-- Generator: Adobe Illustrator 16.2.1,     SVG     Export Plug-In . SVG Version: 6.00 Build 0)      -->
 003 <!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//    EN”     “http://www.w3.org/Graphics/SVG/1.1/DTD/    svg11.    dtd”>
 004 <svg version=”1.1” id=”InteractiveSVG”     xmlns=”http://www.w3.org/2000/svg”         xmlns:xlink=”http://www.w3.org/1999/xlink”     x=”0px”
 005     y=”0px” width=”1024px” height=”800px”     viewBox=”0 0 1024 800” enable-background=”new 0     0 1024 800” xml:space=”preserve”>

Group into IDs

The infographic will be animated using CSS applied to the various IDs that comprise the graphic. An ID is assigned to an element of your graphic when that element is turned into a group. These groups are identified within the SVG with the <g> and </g> tags and you will see that these groups can be nested.

001     <g id=”stage-one”>
 002        <g id=”stage-one-badge”>
 003            <g id=”stage-one-title”></g>
 004            <g id=”stage-one-details”></g>
 005        </g>
 006 </g>

Have a look inside

You will need to do some editing of your SVG file, so it’s worth understanding the basic structure that needs to be in place. The SVG file format is an XML-based file, so when you open it in your preferred code editor (eg Sublime Text) what you see may not be as unfamiliar as you expect.

001 <svg>
 002 <g id=”background”></g>
 003 <g id=”logo”></g>
 004 <g id=”quote”>
 005    <g id=”quote-left-speech”></g>
 006    <g id=”quote-right-speech”></g>
 007    <g id=”quote-text”></g>
 008 </g>
 009 <g id=”timeline”>
 010    <g id=”stage-one”>
 011        <g id=”stage-one-badge”>
 012            <g id=”stage-one-title”></g>
 013            <g id=”stage-one-details”></g>
 014        </g>
 015    </g>
 016 //repeated for subsequent stages
 017 </g>
 018 </svg>

Safety first

For safety’s sake, keep a native version (in Adobe Illustrator this will be a ‘.ai’ file) of your infographic that you can go back to. If you make any changes to the SVG file that make it invalid, Illustrator may no longer be able to open the file and you might have a file you can’t fix.

Tweak away

Your Illustrator-generated file will only take you so far though. When you start making changes in your SVG file, for example to tweak the font names, remember you can’t go back to Illustrator and edit again. If you do, more likely than not, your manually applied changes will be overwritten.

Using fonts

The following code is an example of a single outlined letter in the SVG file (in this case, the ‘T’ of ‘STAGES’). As you can see, it’s not pretty and it’s certainly not going to be easy to edit. If you’re using text in your SVG, you’ll want to keep any text within your SVG as a font because this will make the text much more accessible and also help with keeping  the file size down.

001 <path fill=”#EFC94C” d=”M234.508,85.439l-    5.778,0.329l0.271-2.5l-0.823,0.046l-        1.304,11.747l1.687-0.104l-0.66,6.749     l-11.146,0.729l1.059-6.812l1.746-0.104l1.773-
 11.817l-0.842,0.047l-0.395,2.521l-
 5.704,0.329l1.788-9.413l19.039-0.994         L234.508,85.439z M232.604,83.433l0.44-        4.949l-15.384,0.822l-0.898,5.018l1.878-    0.104l0.436-2.601l4.591-0.253l-2.249,16.229     l-1.712,0.104l-0.34,2.364l6.484-0.414l0.258-    2.354l-1.708,0.107l1.988-16.188l4.624-0.255l-    0.254,2.569L232.604,83.433z”/> 

What’s my name again?

Depending on the font you use, Illustrator may not set the font family name correctly for you. The font name needs to appear exactly as it is specified in the CSS to work. If you’re using a web font as this tutorial does, you’ll simply need to reference the font in the CSS as you normally would and then update the SVG so that the name matches it everywhere it is referenced.

001    <g id=”quote-text”>
 002        <text transform=”matrix(1 0 0 
 1 573 74.9998)” fill=”#EFC94C” font-        family=”LeagueGothic” font-size=”27”>The nice     thing about not planning is that failure </    text>
 003        <text transform=”matrix(1 0 0 
 1 573 99.9998)” fill=”#EFC94C” font-        family=”LeagueGothic” font-size=”27”>comes as a     complete surprise rather than being </text>
 004        <text transform=”matrix(1 0 0         1 573 124.9998)” fill=”#EFC94C” font-family=”LeagueGothic” font-size=”27”>preceded     by a period of worry and depression.</text>
 005     </g>

Have we met before?

Those pesky vendor prefixes quadruple the number of lines of CSS required for this tutorial, so don’t be put off when you open the CSS file and just keep scrolling down. There’s also a large amount of repetition, so once you understand what is going on it’s all much more straightforward than it might initially appear.

Set up the animations

Here we’re moving onto the CSS. When called, this snippet will first fade in the left-hand speech mark from 0% to 100% during the first half of the animation, and then move it 220px to the left during the second half. Add the code for the right speech mark, repeat the code for every browser and you’ll find that you’ve already created 143 lines of code!

001     @keyframes left-speech-intro {
 002  0% {
 003        transform: translateX(220px);    
 004        opacity: 0; }
 005    
 006      50% {
 007        opacity: 1;
 008    transform: translateX(220px); }
 009    
 010      100% {
 011    transform: translateX(0px); } }

Fade and scale

Next up, we have just fading on its own and scaleY (which changes the vertical size of an element while keeping the horizontal size constant) and scaleX (which changes the horizontal size of an element whilst keeping the vertical size constant).

001 @keyframes fade-in {
 002  0% {
 003    opacity: 0; }
 004
 005  100% {
 006    opacity: 1; } }
 007 @keyframes grow-y {
 008  0% {
 009    transform: scaleY(0); }
 010
 011  100% {
 012    transform: scaleY(1); } }
 013 @keyframes grow-x {
 014  0% {
 015    transform: scaleX(0); }
 016
 017  100% {
 018    transform: scaleX(1); } }

Just grow up

Finally, the scale(x,y) operation is used where concurrent horizontal and vertical scaling is required. At this stage, we have all of the animation set up as well as nearly half of the CSS accounted for.

001 @keyframes grow {
 002  0% {
 003    transform: scale(0, 0); }
 004
 005  100% {
 006    transform: scale(1, 1); } }

Get your @font-face on

Your web font choice(s) are loaded in the CSS – remember, the font-family name needs to match the name that appears in your SVG file. The example code here is a more established method for using web fonts – but the cool kids are heading over to fontsquirrel.com and using their web font generator, which outputs CSS using Paul Irish’s ‘Bulletproof’ method.

001  @font-face {
 002   font-family: ‘LeagueGothic’;
 003   src: url(“../fonts/league-gothic/league-    gothic.eot”);
 004   src: url(“../fonts/league-gothic/league-    gothic.eot?#iefix”) format(“embedded-        opentype”), url(“../fonts/league-gothic/league-    gothic.woff”) format(“woff”), url(“../fonts/    league-gothic/league-gothic.ttf”) 
 005  format(“truetype”), url(“../fonts/league-    gothic/league-gothic.svg#League_Gothic-    webfont”) format(“svg”);
 006  font-weight: normal;
 007  font-style: normal; } 

Set the stage

This is where all of the action happens. You need to ensure the values entered here exactly match the width and height of your SVG. The tutorial uses a little drop shadow but you can leave that out or use another technique to delineate the stage if you have joined the drop-shadow-averse design trend.

001  #stage {
 002   background-color: #fff;
 003   width: 1024px;
 004   height: 800px;
 005   margin: auto;
 006   -webkit-box-shadow: rgba(0, 0, 0, 0.3)     0px     0px 10px;
 -moz-box-shadow: rgba(0, 0, 0, 0.3) 0px 0px     10px;
 007   box-shadow: rgba(0, 0, 0, 0.3) 0px 0px     10px;     }

Let’s back it up

Your finished artwork should show each of the stages in their hovered state so we need to make some transformations to each of these and put them in a pre-hover state. The advanced CSS selector (dollar symbol) enables us to select all IDs that end with content that follows the equals symbol rather than listing them all out.

001 [id$=badge] {
 002 transform: scale(0.6, 0.6); }
 003 [id$=title] {
 004 transform: scale(1.3) translate(0px, 48px); }
 005 [id$=details] {
 006 transform: scale(0, 0); } 

Set the hover transformations

In the following code, the hover states for each stage are set and a short transition period is used in order to achieve a slick-looking animation.

001 #timeline > g:hover [id$=badge], #timeline >     g:hover [id$=details] {
 002 transform: scale(1, 1); }
 003 #timeline > g:hover [id$=title] {
 004 transform: scale(1) translate(0px, 0px); }
 005 [id$=badge], [id$=title], [id$=details] {
 006 transition: transform 0.25s ease-in-out; }

Position project stages

By default, transformations to any SVG element use the top-left of the SVG graphic (0px, 0px) as their origin. This means that the positioning of each ‘project stage’ needs to be set before doing any transforming. You should be able to obtain these co-ordinates by referring to the centre point of each element in the application you used in the SVG.

001 #stage-one {
 002 transform-origin: 200px 200px; }
 003 #stage-one-badge {
 004 transform-origin: 130px 400px; }
 005 #stage-one-title {
 006 transform-origin: 110px 320px; }
 007 #stage-one-details {
 008 transform-origin: 110px 320px; }

Go Intro sequence

This is triggered by the JavaScript file by adding the ‘.svgLoaded’ class to each of the elements. This sequence runs pretty fast because you obviously don’t want to keep your visitors waiting too long while you show off your various animation techniques.

×