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.

<?php
/**
 * @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="https://www.meteor.com" target="_blank">
    <?php $meteor_logo = drupal_get_path('theme',$GLOBALS['theme']) . '/images/meteor-logo.svg'; ?>
    <?php print file_get_contents($meteor_logo); ?>
  </a>

</section>

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
c1.1,1.2,6.4,7,10.2,3.2C474,119.5,472.4,115.9,468.9,112.7z"/>
<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
c3.9,3.9,6.5,6.6,8.4,4.7S450,117.9,447.5,115.7z"/>
<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
c0.4,0.5,0.7,1,1.1,1.4c31,33,62.1,65.9,93.1,98.8c3.5,3.8,6.8,7.9,10.8,11.1c1.7,1.3,5.2,2.8,7.3,0.7s2.2-5.2-0.3-7.7
C487.9,104.2,487.2,103.7,486.6,103.1z"/>
<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
c3.3,3.5,6.3,7.4,10,10.4c1.4,1.2,4.6,2.2,6.4,0.4c1.8-1.8,2.9-3.9,0.6-7C497.9,87.8,497.1,86.9,496.4,86.2z"/>
<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
c0.9,0.9,3.1,2.2,4.7,0.7C502.6,74.2,502.2,71.9,500.1,70.1z"/>
<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
C421.3,108.9,414.3,102.5,407.4,96z"/>
<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
c6.4,6.9,12.8,13.8,19.2,20.7C495.4,52.9,496,54.1,497,53.1z"/>
</g>

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;
      }
    }
  }