From the course: Learning SVG

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Draw a rectangle

Draw a rectangle - SVG Tutorial

From the course: Learning SVG

Start my 1-month free trial

Draw a rectangle

“

- [Narrator] To create rectangles, we use the rect element. The rect element first defines the coordinates of the top left corner using the x and y attributes and then defines the width and height of the rectangle. These values are related to the current displayed SVGs. So in our example, we are working with a view box of 100 by 100, that means we need to make sure the combination of both the x value and the width, or the y value, and the height don't exceed 100 if we want the entire rectangle to display inside the view box. In exercise files for this movie, I've added in this example and here I've also added two classes this time, stroke and fill. So we get both the stroke around the rectangle and a fill inside it. Run this code in the browser and what you get is a rectangle that takes up some of the space. So here we start out at x line 20 and set a width of 40, so x 20 is here and I have a width of 40 units. Then for the height, we start at y 30, that's here, and then we set the…

Contents