Mastering SVG: From Basics to Advanced Animations in Web Development

Why Vector Graphics Matter

As computer technology advances, graphic design and multimedia production demand higher image quality, editability, and cross‑platform compatibility. Vector graphics meet these needs with infinite scalability, small file size, easy editing, and resolution‑independent clarity.

SVG and Vector Formats

SVG (Scalable Vector Graphics) is an XML‑based, W3C‑standard format designed for the web. Other common vector formats include EPS, AI, PDF, and CDR, each with specific use cases.

Basic SVG Elements

<rect>

– rectangle <circle> – circle <ellipse> – ellipse <line> – straight line <polyline> – open polyline <polygon> – closed polygon <path> – complex shape

Each element supports common attributes such as fill, stroke, and stroke-width. For example, a simple rectangle can be defined as:

<svg width="1200" height="400" viewBox="0 0 1200 400" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect x="1" y="1" width="1198" height="398" fill="none" stroke="blue" stroke-width="2"/>
</svg>

Path Commands

The <path> element uses a compact command syntax. Key commands include:

M – moveto

L – lineto

H – horizontal lineto

V – vertical lineto

C – cubic Bézier curve

S – smooth cubic Bézier

Q – quadratic Bézier curve

T – smooth quadratic Bézier

A – elliptical arc

Z – closepath

Uppercase commands use absolute coordinates; lowercase commands use relative coordinates.

Example Path

<path d="M 10 20 A 40 20 0 1 1 30 40"/>

Text and Fonts

Text can be placed with <text> and aligned to paths using <textPath>. Styling works via fill, stroke, or gradient references.

<svg width="250" height="150" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <rect width="150" height="50" style="fill:rgb(0,255,255);stroke-width:1;stroke:rgb(0,0,0)"/>
  <text x="20" y="20">Hello World!</text>
</svg>

Gradients

Linear and radial gradients are defined inside <defs> and referenced via fill="url(#id)".

<defs>
  <linearGradient id="testLinear" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" style="stop-color:rgb(100,100,100);stop-opacity:1"/>
    <stop offset="100%" style="stop-color:rgb(0,255,255);stop-opacity:1"/>
  </linearGradient>
</defs>
<text x="20" y="40" style="fill:url(#testLinear)">Hello World!</text>

Embedding Images

Raster images can be embedded with <image> using the xlink:href attribute.

<svg width="250" height="150" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <image xlink:href="https://developer.android.google.cn/static/images/guide/topics/graphics/ic_battery_charging_80_black_24dp.png" x="10" y="10" height="50"/>
</svg>

Animation Elements

SVG 1.1 defines four animation elements: <animate> – attribute animation <set> – set attribute at a specific time <animateMotion> – move along a path <animateTransform> – animate transforms (rotate, scale, translate)

Simple Attribute Animation

<svg width="250" height="150" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="40" stroke="black" stroke-width="3" fill="red">
    <animate attributeName="cx" from="50" to="150" dur="2s" repeatCount="indefinite"/>
  </circle>
</svg>

Set Animation

<svg width="250" height="150" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="40" stroke="black" stroke-width="3" fill="red">
    <set attributeName="fill" to="blue" begin="1s" dur="1s"/>
  </circle>
</svg>

Motion Animation

<svg width="250" height="150" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path id="motionPath" d="M 10,80 Q 95,10 180,80"/>
  <circle cx="0" cy="0" r="10" fill="red">
    <animateMotion dur="5s" repeatCount="indefinite">
      <mpath href="#motionPath"/>
    </animateMotion>
  </circle>
</svg>

Transform Animation

<svg width="250" height="150" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <rect x="50" y="50" width="50" height="50" fill="blue">
    <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 75 75" to="360 75 75" dur="10s" repeatCount="indefinite"/>
  </rect>
</svg>

JavaScript Interaction

SVG elements can be manipulated with standard DOM APIs. Example: clicking a circle changes its fill color.

<html>
  <body>
    <svg id="circleSvg" width="200" height="200">
      <circle cx="100" cy="100" r="50" fill="#ff9933"/>
    </svg>
    <script>
      var circle = document.querySelector("#circleSvg circle");
      circle.addEventListener("click", function(){
        circle.setAttribute("fill", "#3366cc");
      });
    </script>
  </body>
</html>

CSS Control

CSS can animate SVG properties via transitions and pseudo‑classes.

<html>
  <body>
    <svg id="rectSvg" width="200" height="200">
      <rect x="50" y="50" width="50" height="50" fill="#ff9933"/>
    </svg>
    <style>
      #rectSvg rect {transform: rotate(0deg); transition: all 1s;}
      #rectSvg:hover rect {transform-origin: 50px 30px; transform: rotate(45deg);}
    </style>
  </body>
</html>

Event Listeners and Inline Scripts

SVG elements support native event attributes ( onclick, onmouseover, etc.) and can contain <script> blocks for self‑contained interactivity.

<svg width="250" height="150" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <rect id="myRect" x="10" y="10" width="80" height="80" fill="red"
        onclick="changeColor()" onmouseover="grow()" onmouseout="shrink()"/>
  <script>
    function changeColor(){
      var r=document.getElementById('myRect');
      var c=r.getAttribute('fill')==='red'?'green':'red';
      r.setAttribute('fill',c);
    }
    function grow(){
      var r=document.getElementById('myRect');
      r.setAttribute('width','100'); r.setAttribute('height','100');
    }
    function shrink(){
      var r=document.getElementById('myRect');
      r.setAttribute('width','80'); r.setAttribute('height','80');
    }
  </script>
</svg>

Embedding SVG Files

SVG files can be embedded using <object>, <iframe>, <embed>, or <img>. The <object> and <iframe> tags preserve interactivity, while <img> displays a static image.

<ul>
  <li>object<br>
    <object type="image/svg+xml" data="test14.svg"></object>
  </li>
  <li>iframe<br>
    <iframe src="test14.svg">iframe svg</iframe>
  </li>
  <li>embed<br>
    <embed type="image/svg+xml" src="test14.svg">
  </li>
  <li>img<br>
    <img src="test14.svg" alt="SVG image">
  </li>
</ul>

Conclusion

Using SVG in web development offers high‑quality, scalable graphics, small file sizes, and rich interactivity through CSS, JavaScript, and SVG‑native animation. While modern browsers provide full SVG support, developers must consider cross‑platform compatibility and choose appropriate features to ensure consistent behavior across devices.