HTML SVG |Scalable Vector graphics example

Techno HTML5

SVG stands for the Scalable Vector Graphics. It used to draw the SVG graphics. With the help of SVG, we can draw the different types of graphics on the page.

We can draw boxes, circles, rectangle, text, and graphic images.

SVG Rectangle-

HTML SVG


<!DOCTYPE>
<html>
<head>
<title>HTML SVG </title>
</head>
<body>

  

</body>
</head>
</html>
Run

In above example we have used tag .

1. Specified the height 200 and width 500 of SVG tag .

2. used to draw rectangle on svg graphic .

3. Specified the height 200 and width 500 of the rectangle .

4. Fill the color and given stroke (border) color and value .



SVG Circle-

We can draw the circle using SVG.

The following example of the circle using SVG.

HTML SVG


<!DOCTYPE>
<html>
<head>
<title>HTML SVG </title>
</head>
<body>

  


</body>
</head>
</html>
Run

SVG STAR ( Polygon)

Draw the star on the web page. We can create the star using polygon coordinates x and y. The following example of the star will show you how to exactly draw the star.


HTML SVG


<!DOCTYPE>
<html>
<head>
<title>HTML SVG </title>
</head>
<body>


  


</body>
</head>
</html>
Run