Animating svg elements

SVG images can be a lot of fun to play with on your web site. Here are the steps I used to get my SVG meteor logo in a block on my Drupal site, and how I animated it with CSS.

I wanted to create a simple little "developing with meteor" logo in my sidebar. I chose to do this with a block, but also needed to include an svg for the logo. There is an SVG Embed module that will allow you to include an uploaded svg file in a block with a simple [svg:4711] snippet. Very "Wordpressy". The problem with this for me, is there isn't an easy way to upload an SVG file. Yeah there are ways, but I didn't want to fool with it too much. I tried adding the svg file extension to my allowed file types in my article content type, but that didn't work. Enough fooling around.

Creating my block template

I decided to simply create a block and a custom tpl file block--block--1.tpl.php. Once I had the custom template, all I had to do was strip out all the crap I didn't need and add my code.

 * @file
 * Custom block to embed the meteor_logo svg.

<section id="<?php print $block_html_id; ?>" class="<?php print $classes; ?> clearfix"<?php print $attributes; ?>>

  <small>Proudly developing with</small>
  <a href="" target="_blank">
    <?php $meteor_logo = drupal_get_path('theme',$GLOBALS['theme']) . '/images/meteor-logo.svg'; ?>
    <?php print file_get_contents($meteor_logo); ?>


Then I just needed to assign the block to my sidebar via Context (which I prefer over the default blocks system).

Animating my meteor svg

This is the super easy part, because I already had the animate.css library added in my less files. All I really needed to do was add the classes to my svg code. You can edit a svg file (saved from Illustrator in my case) in any text editor. Normally I use phpStorm, Sublime Text, or lately Atom for it's simplicity for things like this.

<g id="O" class="animated zoomInDown">
<path class="st0" d="M468.9,112.7c-17.1-15.6-34.1-31.4-51.1-47c-12.1-11.2-24.3-22.4-36.4-33.5c26.3,29.2,53,58.1,79.6,87
<path class="st0" d="M447.5,115.7c-13.2-12-26.2-24.1-39.3-36.2c-4.4-4.1-8.8-8.1-13.2-12.2c15.1,17.3,30.7,34.2,46.2,51
<path class="st0" d="M486.6,103.1c-28.1-26.5-56.2-52.9-84.3-79.4C393.9,15.8,385.5,7.9,377,0c-0.2,0.2-0.3,0.3-0.5,0.5
<path class="st0" d="M496.4,86.2c-29.5-27.2-59-54.5-88.5-81.7c-0.1,0.1-0.1,0.3-0.2,0.4c24.5,26.5,49.1,53.1,73.6,79.6
<path class="st0" d="M500.1,70.1c-17.2-16.2-34.6-32.2-51.9-48.3c-0.2,0.2-0.5,0.4-0.7,0.7c16.3,17.6,32.5,35.2,48.9,52.7
<path class="st0" d="M407.4,96c6.1,7.4,12.1,14.8,19.1,21.2c0.4,0.2,1,1,1.7,0c0.7-1,0.3-1.3,0-1.7
<path class="st0" d="M497,53.1c0.9-0.9-0.3-1.5,0-1.9c-6.8-6.4-13.7-12.9-20.5-19.3c-0.2,0.1-0.4,0.3-0.6,0.4

When you are saving your svg from Illustrator, it's helpful to name your layers before you do. This will create id's for your svg elements on export. In this case, I named my layers M, E1, T, E2, O (the animated part), and R, respectively. That gave me an easy id set for identifying my svg elements when editing.

Finally, I added a little styling in my less file for the width and hover colors.

  // Meteor svg logo block
  #block-block-1 {
    padding: 5%;
    #meteor {
      display: block;
      clear: both;
      width: 150px;

      &:hover {
        #M, #E1, #T, #E2, #R {
          fill: @gray-light;

      #M, #E1, #T, #E2, #R {
        fill: @gray;