HTML5 SVG Element

In this tutorial, we’ll teach you everything that you need to know about the HTML5 SVG element so you can draw graphics on your webpage.

The abbreviation of SVG is Scalable Vector Graphics, and it is a vector-based graphics in an XML format.

Embedding HTML5 SVG Element

Here is a code snippet for displaying the HTML5 SVG element on your webpage.

Example

<!DOCTYPE html>
<html>
<head>
    <title> HTML5 SVG Element </title>
</head>
<body>
    <svg width="150" height="150">
        <circle cx="80" cy="80" r="45" stroke="green" stroke-width="6" fill="blue">
    </svg>
</body>
</html>

The output of this code will be

HTML5 SVG Element

Explanation of the Code

SVG graphics starts with the <SVG> tag
To specify the width and height of SVG graphics, you have to define the width and height of the graphics in the SVG tag.
The <circle> element in the code listed above is used to draw a circle.
The cx and cy specify the x and y coordinates of the center of the circle. If we do not assign values to the circle’s center coordinates, the browser will automatically assign them the value (0.0).
Thee attribute assigns radius to the circle.
Stoke and stroke-width attributes define the outline of the circle. Using this attribute, we made the border of our circle 6px green.
The fill attribute specifies the color of the circle. We assign the value ‘blue’ to the inside of the circle.
SVG tag is followed by a closing </SVG> tag.

Prerequisite for HTML5 SVG Element

Before we start learning HTML SVG elements, you need to be familiar with:

Basic HTML
Basic XML

Overview of SVG

An SVG element is used to display vector-based graphics on the web
SVG defines graphics in XML format
You can animate almost every attribute and its element in SVG files
W3C highly recommends SVG
SVG is compatible with other W3C standards such as the DOM and XSL.

W3C Endorsed SVG

W3C recommended SVG 1.0 on 4th September 2011
W3C recommended SVG 1.1 on 14th January 2003.
W3C recommended the second edition of SVG 1.1 on 16th August 2011.

Advantages of HTML5 SVG Element

HTML5 SVG element has many peculiar attributes that set it apart from other image formats such as JPEG and GIF. The most prominent of them all is:

You can use any text editor to create and edit SVG graphics, so unlike other image formats, you don’t need to use any photo retouching software.
SVG images are highly flexible so that you can scale them as per your need
HTML5 allows you to search, index, script, and compress SVG graphics
SVG files come in pure XML format
The picture quality of SVG graphics remains intact if they are zoomed or resized.
SVG graphics can be printed at high resolution

SVG Rectangle

Example

<!DOCTYPE html>
<html>
<head>
    <title> HTML5 SVG Element </title>
</head>
<body>
    <svg width="800" height="500">
        <rectwidth="600"height="300" style="fill:rgb(99,99,95);stroke-width:10;stroke:rgb(0,0,240)" />
    </svg>
</body>
</html>

The output of this code will be

SVG Rounded Rectangle

Example

<!DOCTYPE html>
<html>
<head>
    <title> HTML5 SVG Element </title>
</head>
<body>
    <svg width="400" height="180">
        <rect x="60" y="25" rx="25" ry="25" width="150" height="150"      
            style="fill:greenyellow;stroke:grey;stroke-width:7;opacity:0.6" />
    </svg>
</body>
</html>

The output of this code will be

SVG Polygon

Example

<!DOCTYPE html>
<html>
<head>
    <title> HTML5 SVG Element </title>
</head>
<body>
    <svg width="300" height="200">
        <polygon points="110,20 50,200 190,80 15,80 150,200"
            style="fill:lightcoral;stroke:greenyellow;stroke-width:8;fill-rule:evenodd;" />
    </svg>
</body>
</html>

The output of this code will be

To widen your understanding of SVG graphics, read more.

Next Lesson » « Previous Lesson