Using SVG and Animation for Interactive Graphics

Scalable Vector Graphics (SVG) is an XML-based format used to define scalable vector graphics. The biggest advantage of SVG is that it can be scaled without any loss of quality. It is widely used in web development for icons, graphics, maps, and animations. In this article, I’ll explain in detail how to create shapes with SVG and how to add animations using CSS and JavaScript.

1. Basic Usage of SVG

Let’s start with a simple example to understand how SVG is used in HTML:

<svg width='200' height='200'>
  <circle cx='100' cy='100' r='50' fill='blue' />
</svg>

This code draws a blue circle centered at (100,100) with a radius of 50 pixels.

Basic SVG Shapes

With SVG, you can create the following basic shapes:

<rect x='10' y='10' width='100' height='50' fill='red' />
<circle cx='50' cy='50' r='40' fill='blue' />
<ellipse cx='100' cy='50' rx='50' ry='25' fill='green' />
<line x1='10' y1='10' x2='100' y2='100' stroke='black' stroke-width='2' />

• <rect>: Draws a rectangle.
• <circle>: Draws a circle.
• <ellipse>: Draws an ellipse.
• <line>: Draws a line.

2. Styling SVG with CSS

SVG elements can be easily styled using CSS:

svg {
  width: 100px;
  height: 100px;
  fill: none;
  stroke: black;
  stroke-width: 2px;
}

Changing SVG Color on Hover:

circle {
  fill: blue;
  transition: fill 0.3s;
}

circle:hover {
  fill: orange;
}

This code changes the color of the circle when hovered.

3. Creating SVG Animations

To animate SVG elements, you can use properties like stroke-dasharray, stroke-dashoffset, and @keyframes.

Simple SVG Animation

<svg width='200' height='200' viewBox='0 0 200 200'>
  <circle cx='100' cy='100' r='50' stroke='black' stroke-width='4' fill='none' stroke-dasharray='314' stroke-dashoffset='314'>
    <animate attributeName='stroke-dashoffset' from='314' to='0' dur='2s' repeatCount='indefinite' />
  </circle>
</svg>

This animation makes the circle appear as if it’s being drawn.

4. Interactive SVG with JavaScript

In some cases, you might want to control SVG elements using JavaScript. For example, changing the color when clicking on a shape.

Click to Change SVG Color

<svg width='200' height='200'>
  <circle id='myCircle' cx='100' cy='100' r='50' fill='blue' />
</svg>

<script>
  document.getElementById('myCircle').addEventListener('click', function() {
    this.setAttribute('fill', this.getAttribute('fill') === 'blue' ? 'red' : 'blue');
  });
</script>

This script changes the color of the SVG circle when clicked.

5. Conclusion and Best Practices

SVG is a lightweight, scalable, and flexible graphics format. By combining it with CSS and JavaScript, you can create animated and interactive graphics.

Now that you’ve learned the basics, go ahead and create your own interactive SVG designs!