SVG Animation & Interactivity

Animation and interactivity

Congrats, we made it to the finish line! Static vector graphics are great, but SVG truly shines when it moves and reacts to users.

Unlike raster images (JPEG/PNG), SVG is part of the HTML document (the DOM). That means we can control every piece of the illustration independently.

1. Three ways to animate SVG

A. CSS animations (recommended to start)

Because SVG tags (<rect>, <path>, <circle>) are valid DOM elements, regular CSS classes, pseudo-classes (:hover), and @keyframes work on them.

Pros: Simple, familiar to web devs, hardware-accelerated.
Best for: Hover color changes, simple spins, fade/scale entrances.

B. SMIL (native SVG animation)

Animation written right inside the SVG code using <animate> tags.

Pros: Works even when the image is inserted via <img> (CSS animations often fail there due to isolation). The image becomes a self-contained “mini program.”
Cons: Syntax is different from the rest of the web stack.

C. JavaScript (GSAP, Anime.js)

Best for: Complex scripted animations (shape morphing, physics, sequences). GSAP is the production gold standard for SVG animation.

2. CSS animation example

Let’s make a heart beat.

<svg width="100" height="100" viewBox="0 0 100 100">
  <style>
    .heart {
      fill: crimson;
      transform-origin: center; /* Important to rotate/scale from the center */
      animation: beat 1s infinite alternate;
    }
    
    @keyframes beat {
      to { transform: scale(1.2); }
    }
  </style>
  
  <path class="heart" d="M50 30 L60 10 ... (heart code)" />
</svg>

3. SVG magic: drawing the stroke

You have likely seen the effect where a line draws itself, “like with a pen.” This is a unique SVG trick based on stroke properties from the styling step.

How it works

1. stroke-dasharray: Make the line dashed. Set the dash length equal to the entire line length, producing one long dash.
2. stroke-dashoffset: Shift that dash so it moves out of view (hiding the line).
3. Animation: Animate stroke-dashoffset back to 0.

<svg width="200" height="100">
  <style>
    .draw-me {
      fill: none;
      stroke: black;
      stroke-width: 2;
      /* Suppose the line length is 300px (use JS: path.getTotalLength()) */
      stroke-dasharray: 300;
      stroke-dashoffset: 300; /* Line fully hidden */
      animation: draw infinite 2s forwards ease-in-out;
    }

    @keyframes draw {
      to { stroke-dashoffset: 0; }
    }
  </style>
  
  <path class="draw-me" d="M10 50 C 50 10, 150 90, 190 50" />
</svg>

4. SMIL: animation without CSS

If you want an icon to keep spinning even when saved as icon.svg and opened in an image viewer, use SMIL.

Place <animate> inside the shape you want to bring to life.

<svg width="100" height="100">
  <circle cx="50" cy="50" r="20" fill="blue">
    <!-- Change the radius (r) from 20 to 40 and back -->
    <animate attributeName="r" 
             values="20; 40; 20" 
             dur="2s" 
             repeatCount="indefinite" />
  </circle>
</svg>

5. Interactivity: links and JS

SVG supports links just like HTML. This is perfect for interactive maps or irregularly shaped menus.

Links with <a>

Wrap any shape or group in an <a> tag.

<svg viewBox="0 0 200 100">
  <a href="https://google.com" target="_blank">
    <rect x="10" y="10" width="80" height="80" fill="blue"/>
    <text x="50" y="50" fill="white" text-anchor="middle">Click Me</text>
  </a>
</svg>

JavaScript events

SVG elements have IDs and classes, so you can attach event listeners to them.

<svg width="100" height="100">
  <circle id="myBtn" cx="50" cy="50" r="30" fill="green" />
</svg>

<script>
  const btn = document.getElementById('myBtn');
  
  btn.addEventListener('click', () => {
    alert('You clicked the circle!');
    btn.setAttribute('fill', 'red'); // Change an attribute via JS
  });
</script>

Course wrap-up

We went from drawing simple squares to manipulating Bézier curves, grouping icon systems, and animating them. In most real projects you will not handcraft complex illustrations or animations, but knowing how they work is invaluable. You will be able to follow video tutorials on creating SVG graphics on YouTube when they become available.

Key takeaways

• SVG is code. You can read, write, and change it in real time.
• viewBox is your window into the coordinate world.
• Optimization (via <defs>, <use>, and SVGO) keeps load times fast.
• Vector graphics are more than pictures—they are a powerful interface tool.