How to draw a rectangle in HTML5 SVG?



SVG is a markup language based on XML that is used to describe two-dimensional vector graphics. SVG is essentially what HTML is to text when it comes to visuals.

A rectangle is drawn on the screen via the <rect> element. The placement and shape of the rectangles on the screen are determined by six fundamental properties.

Syntax

<rect
   x="x-axis co-ordinate"
   y="y-axis co-ordinate"
   
   width="length"
   height="length"
   
   rx="length"
   ry="length"
   
   style="style information"
   class="style class" >
</rect>

Attributes

  • X − The top-left x-axis coordinate.

  • Y − The top-left y-axis coordinate.

  • width − The rectangle's width.

  • height − The rectangle's height.

  • rx − The x-axis' roundness.

  • ry − The y-axis' roundness.

  • style − Indicate an inline style.

  • Describe the external style for the class.

Example 1

Using the “svg <rect>”

In the following example we are using svg <rect> to draw a rectangle.

<!DOCTYPE html> <html> <body> <svg width="400" height="100"> <rect width="400" height="100" style="fill:rgb(0, 255, 255); stroke-width:6;stroke:rgb(255, 0, 0)" /> </svg> </body> </html>

On executing the above script, it will generate an output consisting of a rectangle filled with hexa drawn on the webpage.

Example 2 

Adding x and y attributes

In the following example we are using svg <rect> element with the x and y attributes.

<!DOCTYPE html> <html> <body> <svg width="400" height="800"> <rect x="50" y="20" width="150" height="150" style="fill:blue;stroke:red;stroke-width:5;fill-opacity:0.4; stroke-opacity:0.9"/> </svg> </body> </html>

When the script gets executed, it will generate the output consisting of a rectangle filled with blue drawn along with width and height.

Example 3 

Adding CSS opacity Property

In the following example we are using svg <rect> element with css opacity.

<!DOCTYPE html> <html> <body> <svg width="450" height="250"> <rect x="55" y="25" width="155" height="160" style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5" /> </svg> </body> </html>

On executing the above script, it will generate an output consisting of a rectangle drawn with opacity filled with blue on the webpage.

Example 4

To draw a rectangle in HTML5 SVG.

<!DOCTYPE html> <html> <head> <style> #svgelem { position: relative; left: 10%; -webkit-transform: translateX(-20%); -ms-transform: translateX(-20%); transform: translateX(-20%); } </style> <title>SVG</title> </head> <body> <h2>HTML5 SVG Rectangle</h2> <svg id="svgelem" width="300" height="200" xmlns="http://www.w3.org/2000/svg"> <rect width="200" height="100" fill="green"/> </svg> </body> </html>

When the script gets executed, the output window pops up, displaying the rectangle filled with green drawn on the webpage.


Advertisements