HTML SVG

The SVG stands for Scalable Vector Graphics. HTML SVG is used to describe graphics. It is much easier to use than canvas. It is a W3C recommendation. SVG is mostly used for vector type diagrams like pie charts, 2-Dimensional graphs in an X,Y coordinate system etc. SVG has several methods for drawing paths, boxes, circles, text, and graphic images.


<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> HTML SVG Circle Method </title> </head> <body> <svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="1" fill="green" /> </svg> </body> </html>

Output

HTML SVG Circle Method

HTML SVG Rectangle


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML SVG Rectangle Method </title>
</head>
<body>
<svg width="400" height="100">
<rect width="400" height="100" stroke="black" stroke-width="1" fill="lightgray" />
</svg>
</body>
</html>

Output

HTML SVG Rectangle Method Examples

HTML SVG Star


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML SVG Star Method </title>
</head>
<body>
<svg height="200" width="300">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:red;stroke:green;stroke-width:1;fill-rule:evenodd;" />
</svg>
</body>
</html>

Output

HTML SVG Star Method Examples

Difference between SVG and Canvas

SVG refers as shape based but Canvas refers as pixel based. Due to its capabilities to render large applications it is suited for the applications with large rendering areas like google maps whereas Canvas is not so good in rendering capabilities.

SVGs are more flexible to expand the size beyond its natural size whereas Canvas images are not so flexible.

Also, SVG supports working with event handlers but Canvas does not provide support for them. In terms of gaming also, SVG is not suited for gaming applications but on the other hand Canvas are well suited for those applications.

In SVG, images cannot be saved in other formats but Canvas allows us to save the resulting images in .png and .jpg format.

Browser Support

Element
Microsoft Edge browser.png Edge
Chrome browser.png Chrome
Firefox browser.png Firefox
Opera browser.png Opera
safari browser.png Safari
<svg>
Yes
Yes
Yes
Yes
Yes




Color Picker

List of color names supported by all browser »



Character Code

List of character codes to display special character »



Language Code

List of all language supported by all browser »



Country Code

List of Country code supported by all browser »

Latest Updates

PHP Introduction

How to Run a PHP program in Xampp?

How can I create a phpinfo.php page?

How to Define a Variable in PHP

PHP Echo and Print Statements

Working with PHP Operators

Understanding the PHP Data Types

How to Write Comments in PHP

How to Define a Constant in PHP

PHP if...else...elseif Statements