Skip to main content

HTML SVG (Live Playground)

In this tutorial, we will learn how to use Scalable Vector Graphics (SVG) in HTML to create high-quality, scalable graphics and animations for your web pages.

What is SVG?​

Scalable Vector Graphics (SVG) is a vector graphics format that allows you to create and manipulate high-quality, scalable graphics directly in your web browser. SVG is based on XML, which means it can be easily edited with text editors and integrated into web pages using the HTML markup language.

Creating SVG Elements​

To create an SVG element, add the <svg> tag to your HTML document and set the width and height attributes:

HTML
<!DOCTYPE html>
<html>
  <head>
    <title>HTML SVG Example</title>
  </head>
  <body>
    <svg id="mySvg" width="300" height="200"></svg>
  </body>
</html>

In this example, we created an SVG element with a width of 300 pixels and a height of 200 pixels. We also assigned an ID of mySvg to the element so that we can reference it in our JavaScript code.

Drawing SVG Shapes​

SVG provides various basic shapes that can be drawn within the <svg> element, such as rectangles, circles, and lines.

Drawing a Rectangle​

To draw a rectangle, use the <rect> element:

HTML
<svg width="300" height="200">
  <rect x="50" y="50" width="100" height="75" fill="blue" />
</svg>

This example draws a blue rectangle with a width of 100 pixels and a height of 75 pixels at the position (50, 50) within the SVG element.

Live Playground, Try it Yourself

Drawing a Circle​

To draw a circle, use the <circle> element:

HTML
<svg width="300" height="200">
  <circle cx="150" cy="100" r="50" fill="green" />
</svg>

This example draws a green circle with a radius of 50 pixels at the position (150, 100) within the SVG element.

Live Playground, Try it Yourself

Drawing a Line​

To draw a line, use the <line> element:

HTML
<svg width="300" height="200">
  <line x1="50" y1="150" x2="250" y2="150" stroke="red" stroke-width="5" />
</svg>

This example draws a red line with a width of 5 pixels from the position (50, 150) to the position (250, 150) within the SVG element.

Live Playground, Try it Yourself

Creating SVG Animations​

SVG provides built-in animation support using the <animate> element. This element can be used to animate attributes of SVG elements over time.

For example, to animate the radius of a circle:

HTML
<svg width="300" height="200">
  <circle cx="150" cy="100" r="50" fill="purple">
    <animate attributeName="r" from="50" to="75" dur="2s" repeatCount="indefinite" />
  </circle>
</svg>

This example animates the radius of a purple circle from 50 pixels to 75 pixels over a duration of 2 seconds. The animation will repeat indefinitely.

Live Playground, Try it Yourself

Conclusion​

SVG is a powerful tool for creating high-quality, scalable graphics and animations for your web pages. By using SVG elements and attributes, you can create dynamic and responsive graphics that enhance your web pages' visual appeal and interactivity.

Now that you have a basic understanding of HTML SVG, you can start experimenting with different shapes, styles, and animations to create more complex graphics for your web projects.

Remember to keep in mind the importance of optimizing your SVG code for better performance and accessibility by using concise and semantic markup, as well as providing alternative text for screen readers when necessary.