Shapes

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100px"
     xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full">
  <g fill-opacity="0.7" stroke="black" stroke-width="0.1cm">
    <rect x="20" y="20" rx="0" ry="0" fill="red" width="20%" height="20%"/>
  </g>
</svg>

• Note that changing the width of the window changes the rectangle (object height is fixed 100px, width is 100%).

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="200px"
     xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full">
  <g fill-opacity="0.7" stroke="black" stroke-width="0.1cm">
     <circle cx="100" cy="100" r="90px" fill="blue" />
  </g>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="200px"
     xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full">
  <g fill-opacity="0.7" stroke="black" stroke-width="0.1cm">
<line x1="10" y1="10" x2="190" y2="190" stroke="blue" stroke-width="4" />
  </g>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="200px"
     xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full">
  <g fill-opacity="0.7" stroke="black" stroke-width="0.1cm">
<polyline points="10,190 20,190 20,150 50,150 50,190 80,190 
  80,110 110,110 110,190 140,190 140,70 
  170,70 170,190 190,190" stroke="blue" fill="darkblue" stroke-width="4" />
  </g>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="200px"
     xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full">
  <g fill-opacity="0.7" stroke="black" stroke-width="0.1cm">
<polygon points="100,10 40,180 190,60 10,60 160,180 100,10" stroke="blue" fill="darkblue" stroke-width="4" fill-rule="nonzero" />
  </g>
</svg>