How to animate SVGs for total beginners!

The Meet-Cute

SVGs and I met on a lovely afternoon in Toronto, Ontario at the gorgeous new Learning Labs. That's where hackerYou, the school that is teaching me how to code and changing my life, headquarters is.

In exchange for everything my teachers at hackerYou are giving me, if you're reading this and happen to know nothing about SVGs, I'm going to give you the gift of blowing your mind!

I discovered what I'm about to share with you during the first week of my coding bootcamp. That's just how quickly you learn with @WesBos and @brnnbrn at hackerYou.

What are SVGs?

Scalable Vector Graphics, as SVGs are known to be called once in a while, are basically images that are scalable as large as you want without losing any resolution. You could have a screen as big as Canada and still have a perfect looking SVG image on it. This is despite the fact that they're quite small in file-size. Now keep in mind that when I say "image", I'm referring to simpler graphics like logos and cartoons, rather than photographs.

I'm not the greatest illustrator in the world so I like to support The Noun Project and get a lot of my cool-looking SVG files from them instead of subjecting the world to my drawing skills.

Pretty amazing, right? Well, it gets better!

How do you use your SVGs?

The Good Ol' Way

SVGs are sort of like any other image file that you work with in html. You can simply insert them into your code, like you would any other image.

<img src="images/superawesomelogo.svg" alt="make me accessible and describe me please">

The Ever Better Way

SVGs can also be used in code format. Yes, they have code in there somewhere. As in < svg >< /svg >.

Try it for yourself:

Take a moment right now, go to the The Noun Project, download any icon you like and go to the folder you downloaded. In there you'll most likely see three documents:

  1. Your attributions txt. file.
  2. Your .png icon file.
  3. Your .svg file

I'm using this one:
book icon

You can use the png and svg files in the way I showed above. But what happens if you open your svg file in your text editor of choice? I use Sublime Text so I dropped it in there and this is what I got from my cute little svg phone.

<svg class="telephone" viewBox="-100 -97.711 300 297.711">
<path fill="none" d="M133.51,181.456l8.038-6.023c2.611-1.946,4.074-4.58,4.15-7.396c0.07-2.809-1.257-5.574-3.756-7.779
l-5.051-4.447c-6.022-5.329-8.684-11.832-7.297-17.866c1.387-6.031,6.622-10.725,14.366-12.883l6.487-1.801
c2.839-0.789,4.314-1.997,4.509-2.843c0.193-0.84-0.612-2.564-2.841-4.515l-5.411-4.729c-6.082-5.303-8.755-11.793-7.373-17.804
c1.382-6.011,6.619-10.679,14.407-12.793l6.933-1.891c2.855-0.775,4.333-1.978,4.527-2.821c0.195-0.85-0.606-2.574-2.815-4.527
l-5.049-4.454c-6.025-5.316-8.684-11.832-7.299-17.859c1.386-6.028,6.622-10.725,14.365-12.879l6.487-1.801
c2.84-0.792,4.314-1.997,4.509-2.843c0.194-0.843-0.611-2.567-2.841-4.515l-5.411-4.729c-6.069-5.293-8.756-11.79-7.394-17.813
c0.003-0.014,0.005-0.024,0.009-0.038c1.38-6.004,6.605-10.682,14.341-12.841l6.476-1.804c2.971-0.824,4.247-2.023,4.388-2.635
l0.004-0.017c0.129-0.612-0.548-2.238-2.933-4.213l9.523-10.287c6.24,5.173,9.079,11.593,7.818,17.584
c-1.375,5.694-6.472,10.691-14.275,12.856l-6.48,1.803c-2.841,0.796-4.315,1.997-4.509,2.843c-0.188,0.852,0.611,2.571,2.841,4.515
l5.41,4.732c6.077,5.295,8.763,11.791,7.402,17.814c-0.002,0.01-0.006,0.024-0.009,0.038c-1.382,6.011-6.61,10.688-14.345,12.841
l-6.483,1.802c-2.853,0.797-4.345,2.026-4.542,2.886c-0.198,0.86,0.604,2.616,2.827,4.577l5.045,4.453
c6.019,5.31,8.679,11.805,7.298,17.812c-0.002,0.01-0.006,0.024-0.01,0.041c-1.406,6.012-6.659,10.684-14.438,12.794l-6.933,1.891
c-5.692,1.553-6.106,3.353-1.663,7.236l5.41,4.732c6.076,5.298,8.761,11.798,7.402,17.814c-0.003,0.014-0.006,0.024-0.009,0.038
c-1.383,6.014-6.611,10.692-14.345,12.844l-6.483,1.802c-2.853,0.797-4.345,2.026-4.542,2.886c-0.198,0.86,0.605,2.613,2.826,4.58
l5.047,4.446c5.692,5.036,8.735,11.593,8.555,18.496c-0.036,1.466-0.215,2.903-0.539,4.31c-1.188,5.168-4.272,9.795-8.957,13.3
l-9.09,6.805C138.646,189.909,136.679,185.225,133.51,181.456z"/>
<g id="Your_Icon">
<circle fill="#FF3D7F" cx="45.699" cy="90.648" r="43.877"/>
<circle fill="#FF3D7F" cx="-14.674" cy="92.587" r="12.399"/>
<circle fill="#FF3D7F" cx="-7.877" cy="64.789" r="12.399"/>
<circle fill="#FF3D7F" cx="11.434" cy="42.016" r="12.399"/>
<circle fill="#FF3D7F" cx="39.602" cy="31.225" r="12.399"/>
<circle fill="#FF3D7F" cx="68.308" cy="34.314" r="12.399"/>
<circle fill="#FF3D7F" cx="91.532" cy="51.776" r="12.399"/>
<circle fill="#FF3D7F" cx="-6.191" cy="122.154" r="12.402"/>
<circle fill="#FF3D7F" cx="16.128" cy="143.32" r="12.402"/>
<circle fill="#FF3D7F" cx="45.781" cy="150.571" r="12.402"/>
<path fill="#FF3D7F" d="M87.395,145.027c-1.628,6.653-8.333,10.73-14.993,9.105c-6.65-1.632-10.726-8.336-9.098-14.99
    c1.628-6.664,8.336-10.73,14.99-9.108C84.947,131.665,89.02,138.373,87.395,145.027z"/>
<g>
    <path fill="#FF3D7F" d="M104.535,1.289c0,5.633-4.609,10.241-10.241,10.241H84.053c-5.633,0-10.241-4.609-10.241-10.241v-30.724
        c0-5.633,4.609-10.241,10.241-10.241h10.241c5.633,0,10.241,4.609,10.241,10.241V1.289z"/>
</g>
<g>
    <path fill="#FF3D7F" d="M19.191,1.289c0,5.633-4.609,10.241-10.241,10.241H-1.292c-5.633,0-10.241-4.609-10.241-10.241v-30.724
        c0-5.633,4.609-10.241,10.241-10.241H8.949c5.633,0,10.241,4.609,10.241,10.241V1.289z"/>
</g>
<path fill="#FF3D7F" d="M183.053-73.814C172.811-90.883,63.57-97.711,46.501-97.711s-126.31,6.828-136.552,23.897
    s-10.241,37.552-10.241,44.379c0,2.287,0,17.069,10.241,17.069c13.655,0,43.253,0,47.793,0c6.828,0,13.655-6.828,13.655-13.655
    s0-20.483,10.241-23.897c10.241-3.414,64.862-6.828,64.862-6.828s54.621,3.414,64.862,6.828
    c10.241,3.414,10.241,17.069,10.241,23.897s6.828,13.655,13.655,13.655c4.54,0,34.138,0,47.793,0
    c10.241,0,10.241-14.782,10.241-17.069C193.294-36.263,193.294-56.745,183.053-73.814z"/>
<g>
    <path fill="#FF3D7F" d="M-14.947,194.168c0,2.816-3.072,5.121-6.828,5.121h-27.31c-3.755,0-6.828-2.304-6.828-5.121
        c0-2.816,3.072-5.121,6.828-5.121h27.31C-18.02,189.048-14.947,191.352-14.947,194.168z"/>
</g>
<g>
    <path fill="#FF3D7F" d="M148.915,194.168c0,2.816-3.072,5.121-6.828,5.121h-27.31c-3.755,0-6.828-2.304-6.828-5.121
        c0-2.816,3.072-5.121,6.828-5.121h27.31C145.842,189.048,148.915,191.352,148.915,194.168z"/>
</g>
<path fill="#FF3D7F" d="M143.094,11.493c-3.718-6.524-7.227-12.556-14.662-13.618c-23.897-3.414-46.086-5.121-81.931-5.121
    S-11.534-5.539-35.43-2.125c-7.435,1.062-10.945,7.094-14.662,13.618c-19.476,34.175-26.303,85.382-25.296,160.523
    c0.099,7.51,8.606,19.517,16.062,20.445c27.31,3.414,66.569,5.121,105.828,5.121s78.517-1.707,105.828-5.121
    c7.456-0.929,15.963-12.935,16.062-20.445C169.397,96.875,162.57,45.668,143.094,11.493z M112.472,130.344l-18.178-12.986
    l-3.414,3.414l12.413,21.719c-9.821,10.627-22.76,18.592-37.869,22.285c-6.339,1.55-12.682,2.222-18.923,2.161
    c-6.24,0.065-12.583-0.611-18.923-2.161c-40.942-10.009-66.013-51.309-56.007-92.248c8.589-35.142,40.242-58.57,74.929-58.178
    c34.684-0.393,66.34,23.036,74.929,58.178C126.445,93.035,122.652,113.634,112.472,130.344z"/>


Oh, hello there! You're still here. After all that? I'd say you and SVGs have a long and healthy relationship ahead of you.

But seriously, thanks for scrolling down to the end of that overwhelming, seemingly nonsensical ream of code. That, my friend, is just one little phone. And why would I replace my clean one line img tag with that?

Let me explain what it all means

In the above example we can easily make sense of everything you see:

  • The < svg > tag simply demarks the start and end of your svg.
  • The Viewbox attribute simply demarks the dimensions of the area in which your icon exists. Sort of like your "artboard" in illustrator.
  • The < path > tag My favourite! This little tag hugs a giant ball of numbers that seems incomprehensible but actually, they're just computer lingo for four simple things that come after the attribute "d=":
    • Moveto Denoted by "m" and some coordinates, this tells the computer where to start your drawing.
    • Arcto Denoted by "a", this tells the computer to draw an arc.
    • Curveto Denoted by "c", this tells the computer to draw a curve determined by something called the Bezier Curve. Don't ask me more about that.
    • Lineto Denoted by "l" is the easiest one - just a straight line on a path. That wasn't so bad, eh? Paths are fun!
  • The < circle > tag This is no more than a circle. A perfect circle.
  • The < g > tag Enables you to group different elements in your svg. So for instance, in the example above where I have all those little circles on the dialing wheel of the phone - I could use a group tag to group them together.

This is just a very short list of all the elements of an svg you can use. There are a lot more! See here. (I know, amazing.)

Styling your SVG

What the heck do you do with these elements?

The short answer is: EVERYTHING!. You can apply styles to each of the components of an SVG file in your CSS. Simple as that! In fact, you've probably already noticed that the svg code I pasted above had some inline styling. You can get rid of it or simply override it in your CSS. But how do you even know which path is what? I had no idea when I first saw svg code. I don't read path!

Follow these two simple steps and you'll be laughing:

  1. Inspect your SVG in Chrome or your broswer of choice Open your SVG file in the browser and use your developer tools to inspect the svg and its various components. Then, carefully apply classes to these parts, back in the text editor. For example, I have decided that I want to make the receiver of my phone blue instead of red. I look in my inspector to see what the code is for the receiver, and voila! I got it:

    <path class="receiver" fill="#FF3D7F" d="M183.053-73.814C172.811-90.883,63.57-97.711,46.501-97.711s-126.31,6.828-136.552,23.897
    s-10.241,37.552-10.241,44.379c0,2.287,0,17.069,10.241,17.069c13.655,0,43.253,0,47.793,0c6.828,0,13.655-6.828,13.655-13.655
    s0-20.483,10.241-23.897c10.241-3.414,64.862-6.828,64.862-6.828s54.621,3.414,64.862,6.828
    c10.241,3.414,10.241,17.069,10.241,23.897s6.828,13.655,13.655,13.655c4.54,0,34.138,0,47.793,0
    c10.241,0,10.241-14.782,10.241-17.069C193.294-36.263,193.294-56.745,183.053-73.814z"/>
    
  2. Select your class and style your heart away! I added the class of "receiver" to my receiver path above in my svg element. Now I can go into my CSS file, select the receiver and add styles to it. You should also delete that ugly inline style that gives it a fill of #FF3D7F.

    .receiver { fill: darkorchid }

Tada! That's that. Now you have a "darkorchid" coloured phone receiver.

If you want to group a bunch of elements and colour them at the same time, follow the same procedure. Just 2 steps!

And let me blow your mind even more: here's a handy list of ALL the attributes you can apply to your SVGs!

Extra Tip: Change the width of your whole svg element to a percentage so that you make your icon responsive! (meaning it can adjust itself to any browser size)

How to animate your svg?

Just as easily as you styled it. Apply a class to any element you want to animate, and go wild!

I wanted to animate the receiver to look like it was ringing. So that was easy. I defined my animation keyframes and then applied the class of my animation name to my receiver element.

See it all in action!!!

Take a look at my Code Pen! You'll be able to see it all in action and you can even play around with the code yourself to practice all the steps and tips I shared.

Additional Resources

There is so much wonderful information out there on SVGs. I relied mainly on two articles that I found the most useful.
My thanks to them:

Chris Coyier in Using SVG

AND

Noah Blon in How To Animate My SVGs

Once you've become the SVG animation whiz I know you'll be, please share your Code Pens with me!

Stay tuned for my next post about animating with HSL!

Have fun with SVGs!