Animating a SVG image with CSS and Javascript

Posted in Blog on Nov 18, 2016

First off, what is an SVG?

Scalable vector graphics (SVG) is an XML-based vector image format for two-dimensional graphics, with support for interactivity and animation. In other words, SVGs are XML tags that render shapes and graphics, and these shapes and graphics can be interacted with and animated much like HTML elements can be.

Animations and interactivity can be added via CSS or JavaScript. In this article, we’ll focus on CSS.

There are many reasons why SVGs are great and why you should be using them today:

  • SVG graphics are scalable and resolution-independent. They look great everywhere, from high-resolution “Retina” screens to printed media.
  • SVGs have very good browser support. Fallbacks for non-supporting browsers are easy to implement, too.
  • Because SVGs are basically text, they can be gzipped, making the files smaller that their bitmap counterparts (JPEG and PNG).
  • SVGs are interactive and styleable with CSS and JavaScript.
  • SVG comes with built-in graphics effects such as clipping and masking operations, background blend modes, and filters. This is basically the equivalent of having Photoshop photo-editing capabilities right in the browser.
  • SVGs are accessible. In one sense, they have a very accessible DOM API, which makes them a perfect tool for infographics and data visualizations and which gives them an advantage over HTML5 Canvas because the content of the latter is not accessible. In another sense, you can inspect each and every element in an SVG using your favorite browser’s developer tools, just like you can inspect HTML elements.

Styling And Animating SVGs With CSS By Sara Soueidan

2 Member

Ryan Wiggill

So lets take a look at what a SVG can look like.

Here is our logo in an SVG Format, as you can see it is made up entirely of text, it can be scaled to any size and as for file size it is very small.

The Magic Part

The magic part is that because the SVG is made up entirely of text in and HTML format we can ad ID's and Classes to the different elements, take a look in the code above, we were able to assign the ID "word" and "flame" to their respective groups.

This is great because we can now add our own CSS and Javascript animatons to each of the seperate elements.

So lets add a bit of CSS animation to the SVG.

Pretty cool right, we have also now tried to add an animated SVG to our email signature, and it works however there is limited support on many email clients so if you are trying to do this make sure you have a fallback to a normal PNG or JPG image, for those still living in the past :)

Take a look at our email signature: