Styling & animation

So you want to animate your SVG? There are a few ways to do it: target elements inside your SVG with CSS or JS, or embed the animation in the file itself. Whichever you choose, a little preparation before uploading goes a long way. (The spinning logo on our homepage is exactly this technique.)

Method 1 — CSS or JS targeting

Prepare your SVG

Before uploading, you need classes (or ids) to target inside your SVG. Open the SVG file in a code editor — you'll see each part of your graphic as its own XML element. Add a class to each element you want to animate:

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle class="pulse-dot" cx="50" cy="50" r="20" fill="#ff9900" />
  <path class="draw-line" d="M10 80 L90 80" stroke="#24211c" />
</svg>

Upload and render inline

Upload the SVG to your media library and embed it with the style-svg class so it's rendered inline. Your classes only become targetable once the img tag has been swapped for the real SVG code.

Animate with CSS

Now target those inner elements from your theme's stylesheet (or the Customizer's Additional CSS):

.pulse-dot {
  animation: pulse 2s ease-in-out infinite;
  transform-origin: center;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.2); }
}

Anything CSS can do — transitions on hover, keyframes, stroke animations — now works on your SVG's internals. JavaScript works the same way: document.querySelector('.pulse-dot') finds the element once it's inline.

Method 2 — Animation embedded in the file

You can also animate the SVG file itself, using online tools or software of your choice, before uploading. Once your animated SVG is ready, upload it like any other image — and remember to add the style-svg class when embedding so it renders inline and the animation actually plays.

Handy open-source tools

• Vivus Instant — upload your SVG and generate stroke (line-drawing) animations in the browser.
• SVGOMG — optimize and minify your SVG files before uploading.