HTML5 SVG - How do i work with HTML SVG images

Last updated Oct 25, 2021

We know that SVG stands for Scalable Vector Graphics which can be used to represents the 2D graphical images. In this svg html tutorial we will learn how to render SVG images in web browser by using HTML5.

To render SVG images we have to use html svg tag tag inside our html page.

Let's write simple example to add svg in html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html5 Tutorial - How do i work with HTML SVG images</title>
</head>
<body style="text-align:center;">
 <h2> HTML5 Tutorial - Load Circl SVG Image</h2>
 <svg id="svgimg" height="400" xmlns="http://www.w3.org/2000/svg">
 <circle id="svh-cirlce" cx="100" cy="100" r="100" fill="green" />
 </svg>
 </body>

</html>

In the above example we are creating a circle svg image with green color.

Output:

Create Rectangular SVG image in HTML5

Below code will load rectangular svg image in html5

<svg id="svgimg" height="200" xmlns="http://www.w3.org/2000/svg">
<rect id="svg-rectangle" width="300" height="100" fill="yellow" />
</svg>

Output:

Create an Ellipse SVG inisde HTML

<h2>HTML5 Create Ellipse SVG Image</h2>
 <svg id="svgimg" height="200" xmlns="http://www.w3.org/2000/svg">
 <ellipse cx="100" cy="50" rx="100" ry="50" fill="blue" />
 </svg>

Output:

Load SVG star image

<h2>HTML5 Create Star SVG Image</h2>
<svg id="svgimg" height="200" xmlns="http://www.w3.org/2000/svg">
 <polygon points="100,10 40,180 190,60 10,60 160,180" fill="black"/>
 </svg>

Output:

All SVG example code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html5 Tutorial - How do i work with HTML SVG images</title>
</head>
<body style="text-align:center;">
 <h2> HTML5 Tutorial - Load Circl SVG Image</h2>
 <svg id="svgimg" height="400" xmlns="http://www.w3.org/2000/svg">
 <circle id="svg-cirlce" cx="100" cy="100" r="100" fill="green" />
 </svg>

<h2>HTML5 Create Rectangle SVG Image</h2>
 <svg id="svgimg" height="200" xmlns="http://www.w3.org/2000/svg">
 <rect id="svg-rectangle" width="300" height="100" fill="yellow" />
 </svg>

<h2>HTML5 Create Ellipse SVG Image</h2>
 <svg id="svgimg" height="200" xmlns="http://www.w3.org/2000/svg">
 <ellipse cx="100" cy="50" rx="100" ry="50" fill="blue" />
 </svg>
<h2>HTML5 Create Star SVG Image</h2>
<svg id="svgimg" height="200" xmlns="http://www.w3.org/2000/svg">
 <polygon points="100,10 40,180 190,60 10,60 160,180" fill="black"/>
 </svg>

 </body>

</html>

Conclusion: In this HTML SVG tutorial we created different svg images and load svg images with html svg tag.

Article Contributed By :

847 Views

Projects By category