Skip to main content

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).

SVG 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

SVG Rectangle 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 Rounded Rectangle

  <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

SVG Rectangle Rotation
<?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.

SVG rect move

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 rotate rectangle
<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

rectangle animate
<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 rectangle
<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>




Comment

Please share your knowledge to improve code and content standard. Also submit your doubts, and test case. We improve by your feedback. We will try to resolve your query as soon as possible.

New Comment