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:
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:
Recommended Articles