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.
<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” />
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