Table of Contents

About

To draw a rectangle, you can use:

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