Scalable Vector Graphics - Rectangle

Gopi Chand
9y
6.2k
0
1

Article

Before reading further, read the following article.

Overview of Scalable Vector Graphics (SVG)

SVG Rectangle

The tag <rect> represents a rectangle in SVG and by this you can draw various types of rectangles like various widths & heights or with various strokes or colour or sharp & rounded corner rectangles etc.

Parameters used

Let’s see an example to see all the parameters used in a SVG rectangle.

<rect x="50" y="20" rx="20" ry="20" width="150" height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5"
class="style class" >
</rect>

Where:

<rect> declares the rectangle.
x & y coordinates of the top-left corner of the rectangle and the default is (0,0).
Width & height of the rectangle.
rx & ry rounds the corners of the rectangle.
Style specifies the inline style.
Class specifies the external name to the tag.

Let’s see a first example of a SVG rectangle.

Example 1

<html>
<body>
<svg width="200" height="100">
<rect width="200" height="100" style="fill:#00c800;stroke-width:5;stroke:#c80000">
</svg>
</body>
</html>

Output

fill colour of rectangle

In the preceding code width and height defines the width and height of the rectangle as 100 * 200, the style attribute defines the CSS properties of rectangle that defines the fill colour of rectangle, the CSS stroke-width property defines the border width of the rectangle and the stroke property defines the border colour of the rectangle.

Example 2

Rectangles with various rounded corners.

<html>
<body>

<h1> Different Rounded Corners</h1>

</svg>

</body>
</html>

Output

Rectangles with different rounded corners

Example 3

Rectangle with various corner rounding coordinates.

<html>
<body>
<h1>Different corner rounding coordinates</h1>
<svg width="500" height="300">
<rect x="20" y="20" rx="5" ry="15" width="100" height="70" style="fill:grey;stroke:green;stroke-width:5"/>
<rect x="180" y="20" rx="10" ry="30" width="100" height="70" style="fill:pink;stroke:orange;stroke-width:5"/>
<rect x="340" y="20" rx="20" ry="50" width="100" height="70" style="fill:yellow;stroke:black;stroke-width:5">
</svg>
</body>
</html>

Output

Rectangle with different corner

Example 4

Overlapped rounded corners rectangle.

<html>
<body>
<h1>Overlapped Rounded Corners</h1>
<svg width="300" height="200">
<rect x="30" y="20" rx="10" ry="10" width="200" height="150" style="fill:blue;stroke:red;stroke-width:15"/>
<rect x="30" y="20" rx="20" ry="20" width="200" height="150" style="fill:grey;stroke:orange;stroke-width:10"/>
<rect x="30" y="20" rx="30" ry="30" width="200" height="150" style="fill:cyan;stroke:green;stroke-width:5">
</svg>
</body>
</html>

Output

In the preceding code, rx & ry are used to round the corners of rectangle.

Example 5

Rectangle with opacity.

<html>
<body>
<h1>Rectangle with opacity</h1>
<svg width="300" height="200">
<rect x="50" y="20" width="200" height="150" style="fill:green;stroke:blue;stroke-width:5;fill-opacity:0.4;stroke-opacity:0.7">
</svg>
</body>
</html>

Output

Example 6

Overlapped rectangles with complete element opacity.

<html>
<body>
<h1>Overlapped with opacity</h1>
<svg width="400" height="300">
<rect x="20" y="20" width="150" height="100" style="fill:orange;stroke:red;stroke-width:5;opacity:0.5"/>
<rect x="90" y="60" width="200" height="100" style="fill:blue;stroke:black;stroke-width:5;opacity:0.5"/>
<rect x="240" y="20" width="150" height="100" style="fill:green;stroke:cyan;stroke-width:5;opacity:0.5"/>
</svg>
</body>
</html>

Output

Overlapped rectangles

Example 7

Rectangle with dashed strokes.

<html>
<body>
<h1>Rectangle with dashed strokes</h1>
<svg width="400" height="300">
<rect x="20" y="20" width="150" height="80" style="fill:none;stroke:red;stroke-width:3;stroke-dasharray: 10 5"/>
<rect x="180" y="20" width="150" height="80" style="fill:orange;stroke:blue;fill-opacity:0.6;stroke-width:3;stroke-dasharray: 10 5"/>
</svg>
</body>
</html>

Output

Output

Example 8

Rectangles with transformation (rotation).

<html>
<body>
<svg viewBox = "0 0 200 200" version = "1.1">
<rect x = "20" y = "40" width = "30" height = "20" fill = "lightgreen" stroke = "tomato" stroke-width = "1" transform = "rotate(-45 100 100)"/>
</svg>
</body>
</html>

Output:

design

<html>
<body>
<svg viewBox = "0 0 200 200" version = "1.1">
<rect x = "25" y = "25" width = "30" height = "20" fill = "#0f0fff" stroke = "#0f0f00" stroke-width = "1" transform = "rotate(-150 30 30)"/>
</svg>
</body>
</html>

Output:

see output

Want to read more...

Thank you, keep learning and sharing.

Up Next

Ebook Download

View all

New Layout Design using HTML and CSS

Read by 1 people

Download Now!

Learn

View all