2019-05-01+Web+Designer+UK

Tutorials

whichwillholdtheSVGthatwe’llbeanimating.To

liventhepageup,usea second,static,SVGasa

backgroundonthebodytag.

5 .PlacetheSVG

We’reusingouranimationtomaketheintroductionat

thetopofthepagemoreinteresting.Pastethe

optimisedSVGcodeintothesecondcolumnonthe

page.If usingbootstrap,givetheSVGtheclass

‘img-fluid’tomakesureit scalesonmobiles.

6 .AddclassestotheSVG

AddingclassestotheSVGallowsCSStoselectthe

individualshapeswithintheimage.Thismeansyou

cananimatedifferentshapesoftheimageatdifferent

times,creatinga morecomplexeffect.

<svg>

<g>

<rectclass=”rectBackground” width=”147.4107”

height=”68.7917” x=”31.2946” y=”114.1042”

rx=”4.5882” ry=”3.9565” fill=”#2a7fff”/>

<pathclass=”rectText” d=”...”vector-

effect=”non-scaling-stroke” stroke-

width=”.470476156” font-size=”12”fill=”#fff”

2

Don’t overdo it

Whileanimation and movement can liven up a

page,givingit the wow factor, be careful not to

distractattention away from important parts of

theuserflow.Sublety is key

hen it comes to animating with
SVGs, one major turn-off can be
the idea of getting bogged
down in JavaScript libraries.
However, this doesn’t have to be the case. CSS can
handle selecting individual paths within an SVG to
create effects. Just knowing the basics can mean
that it’s possible to turn flat, cliched icons into
something a little more impressive. So perhaps it’s
time to run through the fundamental steps of SVG
optimisation and animation. When integrated into
different designs, it doesn’t take long to realise that
the possibilities are endless.

1. Create and save
   First, create an SVG to work with. For this tutorial,
   we will be using a simple graphic made in Illustrator.
   When using Illustrator to export an SVG reduce
   the size of the artboard to fit the graphic, then click
   ‘Save As’. Select SVG from the ‘save as type’
   dropdown menu, then ‘SVG code...’ on the SVG
   Options dialogue.

2. Optimise for the web

Cutting out unnecessary tags will make the image

easier to deal with. This can be done manually by

copying the code to your favourite editor and

removing empty tags and metadata. Alternatively, a

fantastic resource called SVGOMG at

jakearchibald.github.io/svgomg will do this

automatically. Paste the code into the ‘Paste markup’

area on the SVGOMG interface, then copy the image

again using the button on the bottom right.

3. Set up a HTML Document

Open your code editor of choice and set up a blank

HTML document. We will write the CSS animation in

a file called main.css, so create this too. To keep

things focused on the animation, we’ve pulled in the

CSS-only version of Bootstrap 4.1.3.

4. Build the layout

Let’s build the bones of our layout and make a space

for our SVG. We’ve added a header and two columns:

one on the left for some text, and one on the right,

W

4 5

tutorial ������������������������������������������������� 63