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:

How do i load SVG images in HTML5

 

 

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:

Rectangular svg image in html

 

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:

SVG Html tutorial - Load Ellipse SVG

 

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:

SVG load images html tutorial

 

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 :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

29 Views

Subscribe For Daily Updates

Flutter Questions
Android Questions