Previous Next

SVG Rectangle

SVG Rectangle is used to draw rectangles on webpage, it uses <rect> element to draw a rectangle. Rectangle has some attributes such as x, y, rx (round x), ry (round y), width, height, fill etc. These attributes help rectangle to draw a rectangle on a page.

Syntax

<rect x="value" y="value" rx="value" ry="value" width="width" height="height" > </rect>

You can define one or more than one SVG rectangles in a document.

rx and ry

rx and ry attributes plays vital role in making rectangle's different shapes.

Syntax

<rect x="value" y="value" rx="value" ry="value" width="width" height="height" />

You can define one or more than one attributes in SVG rectangle.

Shape 1

Shape 2

Shape 3

You can use SVG line any where within an HTML document.

Practice Task

Open notepad or any other text editor, follow the following points.

• Use <svg> element to draw svg rectangle on webpage
• Give width and height of 300 300 respectivelly to SVG element
• Give 10 10 200 100 290 200 values respectivelly to rectangle attributes x y rx ry width height
• Fill color should be aqua

save file with name task.html or task.htm and then open it using any browser and see results.

SVG Code Generators

Try our SVG generators to practice and generate SVG code in real time.

Previous Next