Animation in SVG

SVG (Scalable Vector graphics) is a versatile tool that allows us to create graphics with scalable vector shapes, such as lines and circles. The best part? These graphics can be scaled down to infinitesimal sizes without any loss of resolution! But wait, there’s more — we can even add animation to our SVG without needing to use CSS. This means that our graphics will come to life and capture the viewer’s attention in a whole new way. Whether creating a simple logo or a complex info-graphic, SVG is a potent tool that can help you bring your visual ideas to life.

A button drawn with 3 circles in SVG

    <svg class="h-fit w-fit" width="102.635mm" height="102.635mm" viewBox="0 0 103 103" version="1.1" id="svg1"
       xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
       <circle style="fill:#4d4d4d;stroke:#000000;stroke-width:3.01567" cx="51.50901" cy="51.479477" r="49.80949"
           id="Casing" />
       <circle style="fill:#9b0101;fill-opacity:1;stroke:#6d0101;stroke-width:2.63;stroke-opacity:1" cx="51.50901"
           cy="51.479477" r="35.757164" id="back-button" />
       <circle style="fill:#ff0000;stroke:#6d0101;stroke-width:2.63;stroke-opacity:1" cx="61.425705" cy="50.430336"
           r="35.757164" id="front-button">
       </circle>
    </svg>

The SVG code for the button

Animation

Did you know that SVG has an animation element? With this, we can make things move or change over time on our websites or applications. Take a look at the example below, where I’m changing the center x position (cx) of a light red circle from 61 to 50 and back to 61. The animation will keep repeating forever!

    <svg class="h-fit w-fit" width="102.635mm" height="102.635mm" viewBox="0 0 103 103" version="1.1" id="svg1"
       xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">


       <circle style="fill:#4d4d4d;stroke:#000000;stroke-width:3.01567" cx="51.50901" cy="51.479477" r="49.80949"
           id="Casing" />
       <circle style="fill:#9b0101;fill-opacity:1;stroke:#6d0101;stroke-width:2.63;stroke-opacity:1" cx="51.50901"
           cy="51.479477" r="35.757164" id="back-button" />
       <circle style="fill:#ff0000;stroke:#6d0101;stroke-width:2.63;stroke-opacity:1" cx="61.425705" cy="50.430336"
           r="35.757164" id="front-button">
           <animate ref="animateRef" attributeName="cx" values="61.425705;50.430336;61.425705"
               dur="1s" />
       </circle>
    </svg>

Trigger on click

To finish off let’s only trigger the animation if we click. The example below is done with VUE, to see a vanilla JavaScript example see this stackoverflow example.

When we change an animation element’s repeatCount to 1 and begin to indefinite, it stops completely. Then, we add a function that starts the animation again by using a click event. Inside this function, we get the animation element either by reference (VUE.js) or by ID (vanilla JS), and call the beginElement method to start the animation once.

Example: https://escapethisgamevue.github.io/

    <script setup lang="ts">
      import { ref } from "vue"


      const animateRef = ref<any>()
      function clickButton() {
         animateRef.value?.beginElement();
      }
    </script>

    <template>
       <div class="h-fit w-fit" @click="clickButton()">
           <svg class="h-fit w-fit" width="102.635mm" height="102.635mm" viewBox="0 0 103 103" version="1.1" id="svg1"
               xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
               <circle style="fill:#4d4d4d;stroke:#000000;stroke-width:3.01567" cx="51.50901" cy="51.479477" r="49.80949"
                   id="Casing" />
               <circle style="fill:#9b0101;fill-opacity:1;stroke:#6d0101;stroke-width:2.63;stroke-opacity:1" cx="51.50901"
                   cy="51.479477" r="35.757164" id="back-button" />
               <circle style="fill:#ff0000;stroke:#6d0101;stroke-width:2.63;stroke-opacity:1" cx="61.425705" cy="50.430336"
                   r="35.757164" id="front-button">
                   <animate ref="animateRef" attributeName="cx" begin="indefinite" values="61.425705;50.430336;61.425705"
                       dur="1s" repeatCount="1" />
               </circle>
           </svg>
       </div>
    </template>

Conclusion

Animations in SVG format can be quite impressive and easy to use without requiring additional coding like CSS or JavaScript. This means that creating scalable vector animations is often possible without needing to rely on these tools.