HomeTutorsContact

How to create rectangle in SVG?

By Gulshan Saini
Published in HTML
June 02, 2020
2 min read

It’s easy to draw SVG shapes using fancy tools like Adobe Illustrator but you have to pay a good price for that.

What if, our requirement is simple and we want to create a rectangle in SVG without using any tools?

Well, in that case, it’s very easy to hand-code the simple shapes without using any tools - let’s see how.

Creating rectangle shape

To create a rectangle in SVG first we create a blank SVG document

Next, we provide width and height to the SVG document. Since it is going to be a rectangle, I am setting the width to 300 and height to 150.

Output

// content goes here

Our, SVG element is ready however we do not see anything in the output above. Let’s give SVG element a background color just to make it visible on the screen.

Output

// content goes here

Awesome, our SVG element is displayed on the screen but hold on we still need to create a rectangle inside it. So, let’s do it now.

SVG comes with basic shape elements and rect is one of them. rect accepts following geometry properties:

  • x - coordinate position of rectangle on x-axis (relative to canvas/SVG element)
  • y - coordinate position of rectangle on y-axis (relative to canvas/SVG element)
  • width - width of rectangle
  • height - height of rectangle
  • rx - x-axis radii (used to round off the corners)
  • ry - y-axis radii (used to round off the corners)

Let’s use the rect shape element along with width and height properties to create a rectangle shape

Output

Wow, we can see the rectangle element in the output above with the default fill color of black. If we want the rectangle to have the same size as of SVG element, we can adjust the width and height properties accordingly.

I don’t like the black background color so let’s change that.

Change background color

To change the background color of the rectangle shape we need to use fill property.

How about giving it a slight green color #376d7b

Output

Our, rectangle looks great - should we move the rectangle to the middle of the SVG element and give it nice round corners?

Let’s do it - I am excited as you!

Since SVG is having a width of 300 and the rectangle is having a width of 250, we need to move rectangle element 25px from left on x-axis (300-250 / 2 = 25).

Similarily, we need to move it 25px from top on y-axis (150 - 100 / 2 = 25)

Output

To give round corners let’s give rx and ry value of 10

Output

That looks great!!

Summary

  • SVG rect shape can be used to create rectangle
  • rect width and height can be set using width and height properties
  • rect element background color can be changed by setting fill color
  • We can give rect element round corner by setting rx and ry properties

Tags

#svg
Previous Article
How to check if a key exists in a JavaScript object?

Gulshan Saini

Fullstack Developer

Subscribe to our newsletter!

We'll send you the best of our blog just once a month. We promise.

Related Posts

How to create circle in SVG?

June 03, 2020
1 min
© 2020, All Rights Reserved.

Quick Links

Advertise with usContact Us

Social Media