# How to draw a rectangle in HTML5 SVG?

SVG is a markup language based on XML that is used to describe two-dimensional vector graphics. SVG is essentially what HTML is to text when it comes to visuals.

A rectangle is drawn on the screen via the <rect> element. The placement and shape of the rectangles on the screen are determined by six fundamental properties.

## Syntax

<rect
x="x-axis co-ordinate"
y="y-axis co-ordinate"

width="length"
height="length"

rx="length"
ry="length"

style="style information"
class="style class" >
</rect>


## Attributes

• X − The top-left x-axis coordinate.

• Y − The top-left y-axis coordinate.

• width − The rectangle's width.

• height − The rectangle's height.

• rx − The x-axis' roundness.

• ry − The y-axis' roundness.

• style − Indicate an inline style.

• Describe the external style for the class.

## Example 1

Using the “svg <rect>”

In the following example we are using svg <rect> to draw a rectangle.

<!DOCTYPE html>
<html>
<body>
<svg width="400" height="100">
<rect width="400" height="100"
style="fill:rgb(0, 255, 255);
stroke-width:6;stroke:rgb(255, 0, 0)" />
</svg>
</body>
</html>


On executing the above script, it will generate an output consisting of a rectangle filled with hexa drawn on the webpage.

## Example 2

In the following example we are using svg <rect> element with the x and y attributes.

<!DOCTYPE html>
<html>
<body>
<svg width="400" height="800">
<rect x="50" y="20" width="150" height="150"
style="fill:blue;stroke:red;stroke-width:5;fill-opacity:0.4; stroke-opacity:0.9"/>
</svg>
</body>
</html>


When the script gets executed, it will generate the output consisting of a rectangle filled with blue drawn along with width and height.

## Example 3

In the following example we are using svg <rect> element with css opacity.

<!DOCTYPE html>
<html>
<body>
<svg width="450" height="250">
<rect x="55" y="25" width="155" height="160"
style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5" />
</svg>
</body>
</html>


On executing the above script, it will generate an output consisting of a rectangle drawn with opacity filled with blue on the webpage.

## Example 4

To draw a rectangle in HTML5 SVG.

<!DOCTYPE html>
<html>
<style>
#svgelem {
position: relative;
left: 10%;
-webkit-transform: translateX(-20%);
-ms-transform: translateX(-20%);
transform: translateX(-20%);
}
</style>
<title>SVG</title>
<body>
<h2>HTML5 SVG Rectangle</h2>
<svg id="svgelem" width="300" height="200" xmlns="http://www.w3.org/2000/svg">
<rect width="200" height="100" fill="green"/>
</svg>
</body>
</html>


When the script gets executed, the output window pops up, displaying the rectangle filled with green drawn on the webpage.