HTML5 > SVG

Rectangle in HTML5

How to create a rectangles using SVG in HTML5?


Rectangles

The syntax of the rectangle is <rect>.

In order to create the SVG rectangle we need to declare

  • x - It defines the x coordinate value
  • y - It defines the y coordinate value
  • Width - It defines the width of the svg element
  • Height - It defines the height of the SVG element
  • rx - It rounds the  corner of the rectangle
  • ry - It rounds the corner of the rectange

Simple rectangle

<h2 style="color:magenta"><i>SVG Rectangle</i></h2>
    <svg width="400" height="200" style="border:2px solid green">
    <rect x="100" y="50" width="200" height="100"
    style="fill:rgb(231,8,21);stroke-width:6;stroke:rgb(0,0,0)"></rect>
    </svg>

In the above code snippet we have defined the rctangle we have used the svg width value 400 and height value 200 with the border as 2px solid green

The rectangle values

  • x=100 - It defines the value from the x position
  • y - 50  - It defines the value from the y position from the top 
  • width and height defines the value of the rectangle 
  • fill:rgb() - It defines the color of the rectangle 
  • Stroke width  - It defines the border of the rectangle 
  • Stroke:rgb() - It defines the color of the stroke width 

output

Rectangle with Rounded corners

We can create the rectangle with rounded corners by using SVG 

 <h2>Rectangle with rounded corners</h2>

    <svg width="300" height="200" style="border:5px solid blue">
        
           
            <rect x="50" y="50" rx="20" ry="20" width="200" height="100"
                  style="fill:rgb(182, 255, 0);stroke-width:4;stroke:rgb(255, 106, 0);"></rect>
       </svg>

Rectangle with rounded corners

In the above code snippet we have defined the rectangle with rounded corners we have used the svg width value 300 and height value 200 with the border value 5px solid blue

The rectangle values

  • x=100 - It defines the value from the x position
  • y - 50  - It defines the value from the y position from the top 
  • rx - It is used round the corners of the rectangle
  • ry - It is used to round the corners of the rectangle
  • width and height defines the value of the rectangle 
  • fill:rgb() - It defines the color of the rectangle 
  • Stroke width  - It defines the border of the rectangle 
  • Stroke:rgb() - It defines the color of the stroke width 

output

Rectangle with the opacity

Opacity in rectangle is used to create the images as transparent

<h2 style="color:magenta">Rectangle with opacity</h2>
    <svg width="250" height="180" style="border:2px solid green">
        <rect x="50" y="20" width="100" height="90"  
              style="fill:red;stroke:blue;stroke-width:1;opacity:1.0">
           </rect>
    </svg>

Rectangle opacity

In the above code snippet we have defined the rectangle with the opacity which create the images as transparent we have svg width value 250 and height value 180 with border value 2px solid green

  • rect X - It defines the x value from the left side to move right side of the svg
  • rect Y - It defines the y value from the top of the svg to move downwards
  • width and height defines the rectangle width and height of the svg
  • style=fill() - It defines the rectangle color
  • stroke-blue() - It defines the stroke color as blue
  • stroke-width() - It defines the stroke width as 1
  • opacity() - It defines the image transparency

output

Rectangle with the text

 <h2 style="color:magenta"><i>Rectangle with text</i></h2>
    <svg width="250" height="180" style="border:2px solid lime">
        <g>
            <rect x="10" y="20" width="100" height="100" fill="black"></rect>
            <text x="10" y="60" font-family="italic" font-size="20" fill="yellow"> TechFunda </text>
        </g>
    </svg>

Rectangle with text

In the above code snippet we have defined the rectangle with the text , we have given the input as text to create the text in the rectangle as TechFunda with the x, y, fontsize of the text value

output

 Views: 696 | Post Order: 119



Write for us