Using SVG Animation in WordPress

Earlier this year, I wrote a post on how to add an SVG logo to WordPress.

SVGs (stands for (Scalable Vector Graphics) are awesome. They’re lightweight, crisp, and sharp at any size – something you just can’t get with a JPG or PNG file.

Browser support is very good with a few exceptions. Check here for the latest browser support issues regarding SVG.

SVG files can be added to a WordPress site as either embedded images, CSS backgrounds or inline graphics. The latter is what I’ll focus on in this post.

Inline Graphics

If we want to style our SVG with CSS, we’ll need to insert the SVG code directly into our HTML as an inline graphic.

When designing the logo for my upcoming podcast series Rethink.fm – I wanted to animate the logo by turning the cog wheels.

SVG file not found: /home/1104999.cloudwaysapps.com/dymtrapngx/public_html/wp-content/themes/astra-child/images/rethinkfm-logo.svg

Animating SVG in WordPress content

I’ll walk you through how I inserted the SVG I created below into this post. Then animate it with CSS to make the three cog wheels spin, with one going counter-clockwise for a realistic effect.

SVG file not found: /home/1104999.cloudwaysapps.com/dymtrapngx/public_html/wp-content/themes/astra-child/images/cog-wheels.svg

Step 1. Create the SVG file

I created this in Affinity Designer (my personal favorite – currently only available for Mac… Windows version is in beta). You can use any vector based design program (like Adobe Illustrator). Once I created it, I exported it as a SVG file.

Then I edited the SVG file and added some classes so I could target them with CSS.

Step 2. Embed the SVG file into your post.

Here are two approaches I found to add SVG files to your WordPress content and style them with CSS.

1. Upload the SVG files to a folder on your host server and then embed via a shortcode through a simple plugin.
2. Use one of several plugin in the WordPress repository to enable uploading SVG files into the WordPress media library. This comes with security concerns, if users will be uploading SVG files to the website. SVG files are code and given that, you need to take precautions to protect what is being uploaded to your database.

For this demo, I’ll go with option 1.

Remember, plugins are for features and themes are for styling and presentation. Since option 1 is a new feature, I’ll be using a plugin.

With my plugin installed and activated, all I need to do is upload my SVG to the images folder in my child theme and then insert the shortcode into the post.

[insert-svg-code file="cog-wheels" class="cog-wheels"]

Step 3. Add animation

I’m making use of the CSS3 @keyframes rule to specify the animation code. I created a spin and a spin-reverse rule using the transform rule set to rotate(360deg) and rotate(-360deg) for the reverse spin. I added both the transform-origin and the transform-box rules.

  transform-origin: 50% 50%;
  transform-box: fill-box;

You can see the code in action here on CodePen.

See the Pen SVG Cog Wheels Rotating – percentages by Jackie D’Elia (@jdelia) on CodePen.

The problem with this method is it won’t work in earlier versions of Firefox.

Firefox and transform-origin using percentages

(Sorry if this is making you dizzy!)

One issue I came across is in Firefox using transform-origin with percentages before the transform-box rule was supported. It worked as expected in Chrome and Safari. Firefox did not support percentages, so you ended up with an animation based on the center of the entire SVG and not each element. The current version of Firefox works fine, now that I added the transform-box: fill-box rule.

How to solve the rotation issue in earlier versions of Firefox

Use pixels to target the center of each element so they rotate around that center point. To get those coordinates, I added a circle around each cog wheel in my SVG source file before exporting to SVG.

The edited SVG file looks like this after I’ve added my classes and set the fill for the circles to transparent:

Notice in the SVG code, the cx and cy values for each cog circle. That’s the center point for each circle which happens to be the center point for each cog, since each cog fits perfectly in each circle. Now I can use those coordinates to specify the center in my transforms-origin rule for each cog.

Have a look at the CSS below.

Wrap it up

It was a challenge working on this solution and I’ve really enjoyed adding animation to SVG. In a future post, I’ll share with you how I add animation to other CSS elements.

Here is the final code with the Firefox fix on CodePen.

See the Pen SVG Cog Wheels Rotating – Firefox fix