Table of Contents

URL: https://www.progressiverobot.com/svg-svg-rectangles/

Defining rectangles in svg:

				
					
<svg xmlns="http://www.w3.org/2000/svg"

    viewBox="0 0 1000 200">



  <rect x="349" y="67"

      width="302" height="66"

      rx="5" ry="5"

      stroke="#E4AF4C"

      fill="#F4D37D"

      stroke-width="2" />

Breaking it down

rect illustration for: Breaking it down

Here are the properties used to define rectangles. If you omit rx and ry the corner radius will default to 0:

  • x & y: The x and y position of the top left corner of the rectangle.
  • width & height: The width and height of the rectangle.
  • rx & ry: Corner radius.