Mastering SVG Animations: From Code to Interactive H5 Effects

What Is SVG?

SVG stands for Scalable Vector Graphics. Compared with JPEG, PNG and GIF, it offers vector scalability, editability, animation support, searchable content, filter effects, and dynamic generation.

SVG SMIL Animation Basics

SMIL (Synchronized Multimedia Integration Language) drives animations by changing SVG element attributes over time. Common animation methods also include CSS and JavaScript, but this guide focuses on SMIL.

Simple SVG Example

<svg width="1000" height="1000" viewBox="0 0 1000 1000" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <circle cx="500" cy="350" r="300" fill="red"></circle>
  <text x="280" y="750" fill="blue" font-size="80">This is a circle</text>
</svg>

Save the file with a .svg extension and open it in a browser to see the result.

Modifying Attributes

Attributes such as cx, cy, r, and fill control a circle’s position, size and color. Changing these values and refreshing the browser updates the graphic instantly.

<circle cx="400" cy="550" r="100" fill="#00BFFF"></circle>

Animating Opacity

Insert an <animate> element inside the target shape:

<animate attributeName="opacity" from="1" to="0" begin="0s" dur="1s" repeatCount="indefinite"/>

This fades the element from fully opaque to transparent in a loop.

Controlling Playback

Use repeatCount="1" for a single run and add fill="freeze" to keep the final state.

Animating Paths (Line Growth)

Animate the d attribute of a <path> to draw a line:

<animate attributeName="d" values="M100,550 L100,550;M100,550 L500,350" begin="0s" dur="1s" repeatCount="1" fill="freeze"/>

Combining Animations

A typical sequence is point flash → line growth → next point flash. The following SVG demonstrates this flow:

<svg width="1000" height="1000" viewBox="0 0 1000 1000" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="550" r="50" fill="#00BFFF" opacity="0">
    <animate attributeName="opacity" values="0;1;0;1" begin="0s" dur="0.5s" repeatCount="1" fill="freeze"/>
  </circle>
  <path stroke="#00BFFF" stroke-width="5" d="M100,550 L100,550">
    <animate attributeName="d" values="M100,550 L100,550;M100,550 L500,350" begin="0.5s" dur="0.5s" repeatCount="1" fill="freeze"/>
  </path>
  <circle cx="500" cy="350" r="50" fill="#00BFFF" opacity="0">
    <animate attributeName="opacity" values="0;1;0;1" begin="1s" dur="0.5s" repeatCount="1" fill="freeze"/>
  </circle>
</svg>

Using <defs> and <use> for Reuse

Define reusable graphics inside <defs> and reference them with <use xlink:href="#id"/>. This reduces duplication and keeps the SVG tidy.

Masking

Define a mask with <mask> (white reveals, black hides) and apply it via mask="url(#mask-id)". Masks are useful for creating complex clipping effects such as marquee text.

Animating Transforms

Use <animateTransform> to animate translation, rotation, scaling or skewing. Example of horizontal scrolling text:

<animateTransform attributeName="transform" type="translate" from="0 0" to="-132.96 0" begin="0s" dur="1s" repeatCount="indefinite"/>

Referencing Animations

Animations themselves can be referenced with xlink:href="#element-id", allowing a single animation definition to be applied to multiple targets.

Practical Project: "Face‑Generated 12‑Digit Chart"

The author applied the above techniques to an H5 project that detects facial feature points via deep‑learning APIs, then visualizes them with SVG animations. The workflow includes uploading a photo, obtaining coordinates, generating SVG code on the fly, and embedding it in the page.

Resources

W3C SVG Specification

Zhang Xinxu SVG Articles

SMIL Animation Tutorial