SVG Rectangle

January 19, 2021 1:50 pm IST

You are Here:

How to Draw a Rectangle?

The <rect> SVG element that draws rectangles, defined by their position, width, and height.

In this example, we will draw a basic rectangle, defined by the width and the height by using <rect> SVG element.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <body> <svg> <rect width="200" height="100" /> Sorry, your browser does not support inline SVG. </svg> </body> </html>

Run

How to Custom a Rectangle

In this example, we will customize a rectangle using fill, stroke-width, and stroke SVG attributes.

Note: These SVG attributes can also be used as CSS properties.

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> svg rect{ fill:green; stroke-width:3; stroke:red; } </style> </head> <body> <svg> <rect width="200" height="100" /> Sorry, your browser does not support inline SVG. </svg> </body> </html>

Run

Rectangle with Position and Radius

SVG allows us to control the position of the element with x and y attributes and it allows us the control the radius of the element by rx and ry attributes.

In this example, we will control the position and radius of the rectangle by x, y, rx, and ry SVG attributes

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> svg rect{ fill:green; stroke:red; stroke-width:3; } </style> </head> <body> <svg width="400" height="180"> <rect x="50" y="10" rx="25" ry="25" width="200" height="100" /> Sorry, your browser does not support inline SVG. </svg> </body> </html>

Run

Rectangle with Specific Opacity

SVG allows us to control the opacity of fill and stroke attributes separately.

fill-opacity - Controls the opacity of fill attribute.

stroke-opacity - Controls the opacity of stroke attribute.

In this example, we will control the opacity of fill and stroke SVG attributes separately using fill-opacity and stroke-opacity SVG attributes

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> svg rect{ fill:green; stroke-width:3; stroke:red; fill-opacity:0.2; stroke-opacity:0.5; } </style> </head> <body> <svg width="400" height="180"> <rect x="50" y="20" width="200" height="100" /> Sorry, your browser does not support inline SVG. </svg> </body> </html>

Run

Rectangle with Common Opacity

Use SVG opacity attribute to control the opacity of an object or of a group of objects.

In this example, we will control the opacity of rect SVG element using opacity SVG attribute.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> svg rect{ fill:green; stroke-width:3; stroke:red; opacity:0.4; } </style> </head> <body> <svg width="400" height="180"> <rect x="50" y="20" width="200" height="100" /> Sorry, your browser does not support inline SVG. </svg> </body> </html>

Run

Attributes Value

Attribute	Explanation
x	x-axis co-ordinate of top left of the rectangle. Default is 0.
y	y-axis co-ordinate of top left of the rectangle. Default is 0.
rx	Specifies the horizontal corner radius of the rectangle.
ry	Specifies the vertical corner radius of the rectangle.