SVG Rectangle

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>

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>

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>

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>

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>

Attributes Value

AttributeExplanation
x x-axis co-ordinate of top left of the rectangle. Default is 0.
yy-axis co-ordinate of top left of the rectangle. Default is 0.
rxSpecifies the horizontal corner radius of the rectangle.
rySpecifies the vertical corner radius of the rectangle.

Join Our Channel

Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.

This channel is primarily useful for Full Stack Web Developer.

Share this Page

Meet the Author