SVG Rectangle

An SVG (Scalable Vector Graphics) rectangle is a basic shape element that can be used to draw a rectangle on an SVG canvas. It is defined by the <rect> element and can have attributes such as x (the x-coordinate of the top-left corner), y (the y-coordinate of the top-left corner), width (the width of the rectangle), height (the height of the rectangle), fill (the color to fill the rectangle), and stroke (the color to stroke the rectangle).

A <rect> element are used to draw a rectangle. we are draw a rectangle using 4 components like x-coordinate,y-coordinate,width and height.

   <rect  
    x="x-coordinate"
    y="y-coordinate"
    width="width-of-rectangle"
    height="height-of-rectangle">
  </rect>

Basic example

<?xml version="1.0"?>
<svg width="260" height="140" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
   <rect fill="none" stroke="blue" stroke-width="2px" x="10" y="10" width="100" height="100">
  </rect>
</svg> 

Rounded Rectangles

rx and ry attributes are used to set the rounded rectangle corners. for example.

  <svg width="190" height="250" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
  <rect fill="none" stroke="blue" stroke-width="4px" x="10" y="10" width="70" height="70" rx="20"  ry="20">
  </rect>
  <rect fill="none" stroke="gray" stroke-width="4px" x="90" y="10" width="70" height="70" rx="30" ry="20">
  </rect>
  <rect fill="none" stroke="#e0617e" stroke-width="4px" x="10" y="90" width="70" height="70" rx="50"  ry="10">
  </rect>
  <rect fill="none" stroke="mediumorchid" stroke-width="4px" x="90" y="90" width="70" height="70" rx="50" ry="50">
  </rect>
  <rect fill="none" stroke="#e0617e" stroke-width="4px" x="10" y="170" width="70" height="70" rx="25" ry="70">
  </rect>
  <rect fill="none" stroke="mediumorchid" stroke-width="4px" x="90" y="170" width="70" height="70" rx="10"  ry="50">
  </rect>
</svg> 

Rotated example

<?xml version="1.0" standalone="no"?>
<svg width="250" height="250" xmlns="http://www.w3.org/2000/svg" version="1.1">
   <rect transform="rotate(45 140 15)" x="140" y="3" width="100" height="100" fill="none" stroke="blue" stroke-width="2">
     </rect>
</svg>

SVG Rectangle Animation

We are possible to animate SVG rectangle in various way. here given of few examples.

Example 1Using Ajax.

Click to rectangle it will run

<p id="animateRect"><b>Click to rectangle it will run</b></p>
 <svg width="220" height="100">
   <g>
    <rect id="moveRect" fill="#00bcd4" x="10" y="10" width="50" height="50">
    </rect>
  </g>
  <script type="text/JavaScript">
    <![CDATA[

    function moveNode(counter){
      if(counter==150) return;
      else{
       setTimeout(function(){
              counter++;//increment counter value
               $("#moveRect").attr("x",counter);
               moveNode(counter);
           },10);//10 speed 
     }
   }
   $("#moveRect").click(function(){    
    moveNode(10);
  });
   ]]>
 </script>
</svg>

Example 2

<svg width="250" height="250" xmlns="http://www.w3.org/2000/svg" version="1.1">
   <rect transform="rotate(45 140 15)" x="140" y="17" width="50" height="50" fill="none" stroke="blue" stroke-width="2">
     
   <animateTransform
            attributeName="transform"
            type="rotate"
            from="0 140 80"
            to="360 140 80"
            dur="8s"
            repeatCount="indefinite"></animateTransform></rect>
</svg>

Example 3

<svg width="280" height="320" version="1.1" xmlns="http://www.w3.org/2000/svg">
   <rect fill="#00bcd4" x="10" y="10" width="50" height="50">
    <animate attributeType="XML" attributeName="x" from="10" to="200" dur="10s" repeatCount="indefinite"></animate>
  </rect>
  <rect fill="#9c27b0" x="200" y="10" width="50" height="50">
    <animate attributeType="XML" attributeName="x" from="200" to="10" dur="10s" repeatCount="indefinite"></animate>
  </rect>
  <rect fill="#e91e63" x="10" y="200" width="50" height="50">
    <animate attributeType="XML" attributeName="x" from="10" to="200" dur="10s" repeatCount="indefinite"></animate>
       <animate attributeType="XML" attributeName="y" from="200" to="10" dur="10s" repeatCount="indefinite"></animate>
  </rect>
  <rect fill="#3f51b5" x="200" y="200" width="50" height="50">
    <animate attributeType="XML" attributeName="x" from="200" to="10" dur="10s" repeatCount="indefinite"></animate>
     <animate attributeType="XML" attributeName="y" from="200" to="10" dur="10s" repeatCount="indefinite"></animate>
  </rect>
</svg>

4) rotate rectangle in one fixed point.

<svg width="250" height="250" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <g>
  <rect stroke-dasharray="2" x="140" y="80" width="50" height="50" fill="none" stroke="green" stroke-width="2"></rect>
      <animateTransform
            attributeName="transform"
            type="rotate"
            from="0 140 80"
            to="360 140 80"
            dur="8s"
            repeatCount="indefinite"></animateTransform>
  </g>
  <circle cx="140" cy="80" r="30" fill="none" stroke="green"></circle>
</svg>