HTML Tutorial Lesson 23: Introduction to SVG

[Lesson 22]<<[Contents]

If we wish to draw graphics on a webpage in HTML, we can use the SVG  element, SVG stands for Scalable Vector Graphics. It is used to define vector-based graphics for the Web, SVG defines the graphics in XML format

SVG has many advantages over other image formats, as follows:

  • images can be created and edited with any text editor
  • images can be searched, indexed, scripted, and compressed
  • images are scalable
  • images are zoomable

In the following example, we use the SVG element to draw a circle.

<html>
<body>

<h1>Draw Circle with SVG</h1>

<svg width=”200″ height=”200″>
<circle cx=”100″ cy=”100″ r=”80″ stroke=”blue” stroke-width=”4″ fill=”cyan” />
</svg>

</body>
</html>

First of all, we define the SVG size using the width and height attributes. To attributes cx and cy define the coordinate of the center of the circle. r defines its radius, stroke define the color of its outlines with a thickness of 4px and fill defines the color that fills the circle.

Click Here to view the output

[Lesson 22]<<[Contents]