Rectangles in SVG: <rect>

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" />

</svg>

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.

✖ Clear

🕵 Search Results

🔎 Searching...