How to draw a rectangle in HTML5 SVG?

HTML5 Web Development Front End Technology

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

Adding x and y attributes

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

Adding CSS opacity Property

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>
<head>
   <style>
      #svgelem {
         position: relative;
         left: 10%;
         -webkit-transform: translateX(-20%);
         -ms-transform: translateX(-20%);
         transform: translateX(-20%);
      }
   </style>
   <title>SVG</title>
</head>
<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>