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.
To create a rectangle in SVG first we create a blank SVG document
Next, we provide
height to the SVG document. Since it is going to be a rectangle, I am setting the
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.
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:
Let’s use the
rect shape element along with
height properties to create a rectangle shape
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
height properties accordingly.
I don’t like the black background color so let’s change that.
To change the background color of the rectangle shape we need to use
How about giving it a slight green color
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)
To give round corners let’s give
ry value of 10
That looks great!!
rectshape can be used to create rectangle
rectwidth and height can be set using
rectelement background color can be changed by setting
rectelement round corner by setting