SVG is a powerful and flexible graphic format, which fits perfectly into the web medium. Unlike raster image formats, such as JPG, PNG, or GIF, SVG is vector-based and consists of "real" objects, which you can select and manipulate in whatever manner you want. So even with some basic scripting, a static image can be animated and made interactive. And that will be the subject of this tutorial.
To demonstrate how SVG can be scripted, I selected Vue.js. The reason behind my choice is that, in my opinion, SVG and Vue make the perfect match. First, Vue supports SVG out of the box. And second, SVG, like HTML, is XML-based, so we can apply Vue's reactivity system to SVG and make it interactive in the same easy and convenient way as we do with HTML templates.
[…]
