Scalable Vector Graphics - Rectangle

This article is about a detailed explanation of SVG rectangles of various types.

Before reading further, read the following article.

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.

  1. <rect x="50" y="20" rx="20" ry="20" width="150" height="150"    
  2.    style="fill:red;stroke:black;stroke-width:5;opacity:0.5"    
  3. class="style class" >    
  4. </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

  1. <html>  
  2.     <body>  
  3.         <svg width="200" height="100">  
  4.             <rect width="200" height="100" style="fill:#00c800;stroke-width:5;stroke:#c80000">  
  5.             </svg>  
  6.         </body>  
  7.     </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.
  1. <html>    
  2.     <body>    
  3.         
  4. <h1> Different Rounded Corners</h1>

    <svg width="500" height="200">

    <rect x="20" y="20" rx="10" ry="10" width="150" height="80" style="fill:blue;stroke:red;stroke-width:5"/>

    <rect x="180" y="20" rx="20" ry="20" width="150" height="80" style="fill:grey;stroke:orange;stroke-width:5"/>

    <rect x="340" y="20" rx="30" ry="30" width="150" height="80" style="fill:cyan;stroke:green;stroke-width:5">

    </svg>

  5.    
  6.         </body>    
  7.  </html>   
Output

Rectangles with different rounded corners

Example 3

Rectangle with various corner rounding coordinates.
  1. <html>    
  2.     <body>    
  3.         <h1>Different corner rounding coordinates</h1>    
  4.         <svg width="500" height="300">    
  5.             <rect x="20" y="20" rx="5" ry="15" width="100" height="70" style="fill:grey;stroke:green;stroke-width:5"/>    
  6.             <rect x="180" y="20" rx="10" ry="30" width="100" height="70" style="fill:pink;stroke:orange;stroke-width:5"/>    
  7.             <rect x="340" y="20" rx="20" ry="50" width="100" height="70" style="fill:yellow;stroke:black;stroke-width:5">    
  8.             </svg>    
  9.         </body>    
  10.  </html>   
Output

Rectangle with different corner

Example 4

Overlapped rounded corners rectangle.
  1. <html>    
  2.     <body>    
  3.         <h1>Overlapped Rounded Corners</h1>    
  4.         <svg width="300" height="200">    
  5.             <rect x="30" y="20" rx="10" ry="10" width="200" height="150" style="fill:blue;stroke:red;stroke-width:15"/>    
  6.             <rect x="30" y="20" rx="20" ry="20" width="200" height="150" style="fill:grey;stroke:orange;stroke-width:10"/>    
  7.             <rect x="30" y="20" rx="30" ry="30" width="200" height="150" style="fill:cyan;stroke:green;stroke-width:5">    
  8.             </svg>    
  9.         </body>    
  10.  </html>   
Output

corners of rectangle

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

Example 5
 
Rectangle with opacity. 
  1. <html>    
  2.     <body>    
  3.         <h1>Rectangle with opacity</h1>    
  4.         <svg width="300" height="200">    
  5.             <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">    
  6.             </svg>    
  7.         </body>    
  8. </html>    
Output

round the corners of rectangle

Example 6

Overlapped rectangles with complete element opacity.
  1. <html>    
  2.     <body>    
  3.         <h1>Overlapped with opacity</h1>    
  4.         <svg width="400" height="300">    
  5.             <rect x="20" y="20" width="150" height="100" style="fill:orange;stroke:red;stroke-width:5;opacity:0.5"/>    
  6.             <rect x="90" y="60" width="200" height="100" style="fill:blue;stroke:black;stroke-width:5;opacity:0.5"/>    
  7.             <rect x="240" y="20" width="150" height="100" style="fill:green;stroke:cyan;stroke-width:5;opacity:0.5"/>    
  8.         </svg>    
  9.     </body>    
  10. </html>   
Output

Overlapped rectangles

Example 7

Rectangle with dashed strokes.
  1. <html>    
  2.     <body>    
  3.         <h1>Rectangle with dashed strokes</h1>    
  4.         <svg width="400" height="300">    
  5.             <rect x="20" y="20" width="150" height="80" style="fill:none;stroke:red;stroke-width:3;stroke-dasharray: 10 5"/>    
  6.             <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"/>    
  7.         </svg>    
  8.     </body>    
  9. </html>    
Output

Output

 
Example 8

Rectangles with transformation (rotation).
  1. <html>  
  2.     <body>  
  3.         <svg viewBox = "0 0 200 200" version = "1.1">  
  4.             <rect x = "20" y = "40" width = "30" height = "20" fill = "lightgreen" stroke = "tomato" stroke-width = "1" transform = "rotate(-45 100 100)"/>  
  5.         </svg>  
  6.     </body>  
  7. </html>  
Output:

design
  1. <html>  
  2.     <body>  
  3.         <svg viewBox = "0 0 200 200" version = "1.1">  
  4.             <rect x = "25" y = "25" width = "30" height = "20" fill = "#0f0fff" stroke = "#0f0f00" stroke-width = "1" transform = "rotate(-150 30 30)"/>  
  5.         </svg>  
  6.     </body>  
  7. </html>  
Output:

see output

 
 
 
Want to read more... 
 
Thank you, keep learning and sharing.