Scalable Vector Graphics (SVG) is an XML-based format used to define scalable vector graphics. One of the greatest advantages of SVG is its ability to scale without losing quality. It is widely used in web development for icons, graphics, maps, and animations. In this article, we will explore how to create shapes with SVG and add animations using CSS and JavaScript.

1. Basic SVG Usage

To understand how SVG works in HTML, let’s start with a simple example:

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

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

Basic SVG Shapes

SVG allows the creation of 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 and Effects with CSS

SVG objects can be easily styled using CSS.

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

Changing SVG Colors:

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

circle:hover {
  fill: orange;
}

This code changes the circle’s color when hovered.

3. Animating SVG Elements

To create animations within SVG, techniques like stroke-dasharray, stroke-dashoffset, and @keyframes can be used.

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 code adds an animation that makes the circle appear as if it is being drawn.

4. Interactive SVG with JavaScript

In some cases, it is necessary to control SVG elements using JavaScript. For instance, changing the color of an SVG shape when clicked.

Click to Change Color in SVG:

<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 code allows the circle to change color upon clicking.

5. Conclusion and Best Practices

SVG is a lightweight, scalable, and flexible graphics format. By integrating it with CSS and JavaScript, it is possible to create animations and interactive graphics.

Now, using the techniques you’ve learned, you can create your own interactive SVG graphics!