SVG - Rectangle (rect)

About

To draw a rectangle, you can use:

the special shortcut element rect. See with_rect
the path element. See with_path

Example

With rect without fill

The rect element without the fill attribute is black.

<svg >
<rect 
    x="0" 
    y="0" 
    width="300" 
    height="100" 
    rx="10"
    ry="10"/>
</svg>

Rendered by WebCode

With rect and fill

The rect element

<svg >
<rect 
    x="0" 
    y="0" 
    width="300" 
    height="100" 
    fill="#ECDCC6" 
    rx="10"
    ry="10"/>
</svg>

Rendered by WebCode

With Path

with the path element

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  
  <path d="M10 10 H 90 V 90 H 10 L 10 10" fill="#ECDCC6" />

  <!-- Points -->
  <circle cx="10" cy="10" r="2" fill="red"/>
  <circle cx="90" cy="90" r="2" fill="red"/>
  <circle cx="90" cy="10" r="2" fill="red"/>
  <circle cx="10" cy="90" r="2" fill="red"/>

</svg>

Rendered by WebCode

Documentation / Reference

TR/SVG/shapes.html