Post
Ask Question

Scalable Vector Graphics - Rectangle

Introduction

 
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 color or sharp & rounded corner rectangles, etc.
 
Parameters used
 
Let’s see an example to see all the parameters used in an 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 the first example of an 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 a rectangle that defines the fill color of rectangle, the CSS stroke-width property defines the border width of the rectangle and the stroke property defines the border color of the rectangle.
 
Example 2
 
 Rectangles with various rounded corners.
  1. <html>      
  2.     <body>      
  3.           
  4. <h1> Different Rounded Corners</h1>  
  5. <svg width="500" height="200">  
  6. <rect x="20" y="20" rx="10" ry="10" width="150" height="80" style="fill:blue;stroke:red;stroke-width:5"/>  
  7. <rect x="180" y="20" rx="20" ry="20" width="150" height="80" style="fill:grey;stroke:orange;stroke-width:5"/>  
  8. <rect x="340" y="20" rx="30" ry="30" width="150" height="80" style="fill:cyan;stroke:green;stroke-width:5">  
  9. </svg>  
  10.      
  11.         </body>      
  12.  </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 the 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 the 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.


Similar Articles