SVG Rectangle
Last Updated :
30 Nov, 2023
SVG Rectangle is used in HTML is used to make rectangles. There is an element <rect> which is wrapped inside the <SVG> element. Element <rect> has various attributes like rx and ry which are used to make the corners round of the rectangle. There is a width and height attribute that defines the size of the rectangle.
Syntax
<svg>
<rect width="150"
height="50"
style="fill:rgb(0,255,255);
stroke-width:2;
stroke:rgb(0,0,0.8)" />
</svg>
Attributes
- co-ordinates: It defines the x-coordinates of the rectangle, and y defines the y-coordinates of the rectangle. Attributes x and y both have default values of 0.
- width: It defines the width of the rectangle and height defines the height of the rectangle.
- stroke-width: It defines the thickness of the stroke and stroke defines the color of the stroke.
- fill: It defines the color filled inside the rectangle and rx and ry are used to round the corners.
Example 1: In this example, we will see the SVG Rectangle with rounded corners using rx and ry attributes.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title> SVG Rectangle </title>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<p>SVG Rectangle</p>
<svg width="200"
height="200">
<rect x="25"
y="25"
rx="15"
ry="15"
width="150"
height="150"
stroke="green"
stroke-width="3"
fill="rgb(205, 250, 137)">
</rect>
</svg>
</body>
</html>
|
Output:
SVG Rectangle
Example 2: In this example, we will see the SVG Rectangle with opacity.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title> SVG Rectangle </title>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<p>SVG Rectangle with opacity</p>
<svg width="250"
height="250">
<rect x="10%"
y="10%"
width="200"
height="200"
stroke="green"
stroke-width="5"
fill="yellow"
opacity="0.4">
</rect>
</svg>
</body>
</html>
|
Output:
Fill rectangle with opacity
Share your thoughts in the comments
Please Login to comment...