Rectangle in HTML5

How to create a rectangles using SVG in HTML5?

Rectangles

The syntax of the rectangle is <rect>.

In order to create the SVG rectangle we need to declare

x - It defines the x coordinate value
y - It defines the y coordinate value
Width - It defines the width of the svg element
Height - It defines the height of the SVG element
rx - It rounds the corner of the rectangle
ry - It rounds the corner of the rectange

Simple rectangle

<h2 style="color:magenta"><i>SVG Rectangle</i></h2>
    <svg width="400" height="200" style="border:2px solid green">
    <rect x="100" y="50" width="200" height="100"
    style="fill:rgb(231,8,21);stroke-width:6;stroke:rgb(0,0,0)"></rect>
    </svg>

In the above code snippet we have defined the rctangle we have used the svg width value 400 and height value 200 with the border as 2px solid green

The rectangle values

x=100 - It defines the value from the x position
y - 50 - It defines the value from the y position from the top
width and height defines the value of the rectangle
fill:rgb() - It defines the color of the rectangle
Stroke width - It defines the border of the rectangle
Stroke:rgb() - It defines the color of the stroke width

output

Rectangle with Rounded corners

We can create the rectangle with rounded corners by using SVG

 <h2>Rectangle with rounded corners</h2>

    <svg width="300" height="200" style="border:5px solid blue">
        
           
            <rect x="50" y="50" rx="20" ry="20" width="200" height="100"
                  style="fill:rgb(182, 255, 0);stroke-width:4;stroke:rgb(255, 106, 0);"></rect>
       </svg>

Rectangle with rounded corners

In the above code snippet we have defined the rectangle with rounded corners we have used the svg width value 300 and height value 200 with the border value 5px solid blue

The rectangle values

x=100 - It defines the value from the x position
y - 50 - It defines the value from the y position from the top
rx - It is used round the corners of the rectangle
ry - It is used to round the corners of the rectangle
width and height defines the value of the rectangle
fill:rgb() - It defines the color of the rectangle
Stroke width - It defines the border of the rectangle
Stroke:rgb() - It defines the color of the stroke width

output

Rectangle with the opacity

Opacity in rectangle is used to create the images as transparent

<h2 style="color:magenta">Rectangle with opacity</h2>
    <svg width="250" height="180" style="border:2px solid green">
        <rect x="50" y="20" width="100" height="90"  
              style="fill:red;stroke:blue;stroke-width:1;opacity:1.0">
           </rect>
    </svg>

Rectangle opacity

In the above code snippet we have defined the rectangle with the opacity which create the images as transparent we have svg width value 250 and height value 180 with border value 2px solid green

rect X - It defines the x value from the left side to move right side of the svg
rect Y - It defines the y value from the top of the svg to move downwards
width and height defines the rectangle width and height of the svg
style=fill() - It defines the rectangle color
stroke-blue() - It defines the stroke color as blue
stroke-width() - It defines the stroke width as 1
opacity() - It defines the image transparency

output

Rectangle with the text

 <h2 style="color:magenta"><i>Rectangle with text</i></h2>
    <svg width="250" height="180" style="border:2px solid lime">
        <g>
            <rect x="10" y="20" width="100" height="100" fill="black"></rect>
            <text x="10" y="60" font-family="italic" font-size="20" fill="yellow"> TechFunda </text>
        </g>
    </svg>

Rectangle with text

In the above code snippet we have defined the rectangle with the text , we have given the input as text to create the text in the rectangle as TechFunda with the x, y, fontsize of the text value

output