By
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.
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.
