HTML5 SVG

By | February 2, 2020

Scalable vector graphics (SVG) are used to design graphics on a web page. This is an image format based on XML. XML describes SVG for using graphics. You can create an image with a text editor and edit it.SVG W3C is recommended.

SVG image can be scripted. These images can be searched.

SVG image can be created using JavaScript.

SVG images can be screened with any resolution. These types of images can be animated using animation.These images may contain hyperlinks to other documents.

Just as each element has a poison tag in HTML SVG also has a strutting and end tag.

SVG How does it work Let’s understand with this example.

<!DOCTYPE html>
<html lang="en">
<head>
	 <meta charset="utf-8">
     <title>SVG Example</title>
</head>
<body>

<svg width="340" height="210"> 
<circle	cx="60" cy="60" r="50" stroke="red" stroke-width="5" fill="green" />
Sorry, Your browser does not support SVG.
</svg>

</body>
</html>

Output:-

svgexample

The example above shows that the image that is enabled in browser SVG is created, but the content written in SVG tags will be displayed in those that do not support browser SVG.

HTML5 SVG Browser Support:-

All modern browsers enable HTML5 SVG.

HTML5 SVG Rectangle:-

In this we will understand that we can make a rectangle key from SVG.

<!DOCTYPE html>
<html lang="en">
<head>
	 <meta charset="utf-8">
     <title>SVG Example</title>
</head>
<body>

<svg width="340" height="210"> 
<rect width="300" height="60" style="rgb(0,0,255);stroke-width:15;stroke: rgb(0,0,0)" />
</svg>

</body>
</html>

Output:-

svgimage

HTML5 SVG Start:-

<!DOCTYPE html>
<html lang="en">
<head>
	 <meta charset="utf-8">
     <title>SVG Example</title>
</head>
<body>

<svg width="400" height="300"> 
<polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke: purple;stroke-width:6;fill-rule:evenodd;" />
</svg>

</body>
</html>

Output:-

start-design

HTML5 SVG Rounded Rectangle:-

<!DOCTYPE html>
<html lang="en">
<head>
	 <meta charset="utf-8">
     <title>SVG Example</title>
</head>
<body>

<svg width="400" height="300"> 
<rect x="60" y="30" ry="30" width="160" height="160" style="fill: green;stroke: black;stroke-width:6;opacity: .6;" />
</svg>

</body>
</html>

Output:-

svgexample

Differences between SVG and Canvas:-

In this we will see what is the difference between SVG and canvas. HTML5 gives two elements SVG and Canvas of graphics that are fundamentally different from each other.

SVG XML has 2D graphics to describe. While the canvas draws 2D graphics. Once a design is done in SVG, it can be changed later but to change to canvas, the entire design has to be changed.

Spread the love

Leave a Reply

Your email address will not be published. Required fields are marked *