Skip to main content

SVG Transformation

Scalable Vector Graphics (SVG) is a format for describing vector graphics using XML. SVG allows for easy manipulation of graphical elements using transformations.

Transformations in SVG are used to manipulate the position, size, and orientation of graphical elements. There are several types of transformations available in SVG, including:

  1. Translation - moves an element horizontally and/or vertically.
  2. Rotation - rotates an element around a specific point.
  3. Scaling - changes the size of an element.
  4. Skewing - tilts an element along the horizontal or vertical axis.
  5. Matrix transformation - allows for a combination of translations, rotations, scalings, and skewings.

These transformations can be applied individually or combined together to create more complex effects. Transformations can be applied to a specific element or to a group of elements.

Transformations are specified using the transform attribute in the SVG element. The value of the transform attribute is a list of transformations to apply, separated by whitespace. Each transformation is specified using a keyword and a value, with multiple values separated by commas.

For example, the following code rotates a rectangle by 45 degrees:

<svg>
  <rect x="50" y="50" width="100" height="50" transform="rotate(45)"/>
</svg>

Transformations can also be animated using SVG animation techniques such as SMIL or JavaScript. This allows for dynamic and interactive SVG graphics.

Transformation of svg are used to modify the shape of svg elements.

rotate function

SVG transformation Example 0215210344255637689981010
<svg id="chartInfo" height="600" width="425">
    <defs>
      <linearGradient id="gradColor" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" style="stop-color:rgb(33, 150, 243);stop-opacity:1"></stop>
        <stop offset="100%" style="stop-color:rgba(0, 188, 212, 0.83);stop-opacity:1"></stop>
      </linearGradient>
    </defs>
  <g id="chart">
     <g id="chartInfoContainer"><rect x="30" y="150" width="20" height="20" fill="url(&quot;#gradColor&quot;)" stroke="none"></rect><rect x="60" y="120" width="20" height="50" fill="url(&quot;#gradColor&quot;)" stroke="none"></rect><rect x="90" y="70" width="20" height="100" fill="url(&quot;#gradColor&quot;)" stroke="none"></rect><rect x="120" y="130" width="20" height="40" fill="url(&quot;#gradColor&quot;)" stroke="none"></rect><rect x="150" y="150" width="20" height="20" fill="url(&quot;#gradColor&quot;)" stroke="none"></rect><rect x="180" y="120" width="20" height="50" fill="url(&quot;#gradColor&quot;)" stroke="none"></rect><rect x="210" y="140" width="20" height="30" fill="url(&quot;#gradColor&quot;)" stroke="none"></rect><rect x="240" y="110" width="20" height="60" fill="url(&quot;#gradColor&quot;)" stroke="none"></rect><rect x="270" y="80" width="20" height="90" fill="url(&quot;#gradColor&quot;)" stroke="none"></rect><rect x="300" y="90" width="20" height="80" fill="url(&quot;#gradColor&quot;)" stroke="none"></rect><rect x="330" y="70" width="20" height="100" fill="url(&quot;#gradColor&quot;)" stroke="none"></rect></g>
 <g id="showTextStatus"><text x="35" y="190" stroke="none" id="textT0">0</text><text x="30" y="140" fill="green" stroke="none" id="textH0">2</text><text x="65" y="190" stroke="none" id="textT1">1</text><text x="60" y="110" fill="green" stroke="none" id="textH1">5</text><text x="95" y="190" stroke="none" id="textT2">2</text><text x="90" y="60" fill="green" stroke="none" id="textH2">10</text><text x="125" y="190" stroke="none" id="textT3">3</text><text x="120" y="120" fill="green" stroke="none" id="textH3">4</text><text x="155" y="190" stroke="none" id="textT4">4</text><text x="150" y="140" fill="green" stroke="none" id="textH4">2</text><text x="185" y="190" stroke="none" id="textT5">5</text><text x="180" y="110" fill="green" stroke="none" id="textH5">5</text><text x="215" y="190" stroke="none" id="textT6">6</text><text x="210" y="130" fill="green" stroke="none" id="textH6">3</text><text x="245" y="190" stroke="none" id="textT7">7</text><text x="240" y="100" fill="green" stroke="none" id="textH7">6</text><text x="275" y="190" stroke="none" id="textT8">8</text><text x="270" y="70" fill="green" stroke="none" id="textH8">9</text><text x="305" y="190" stroke="none" id="textT9">9</text><text x="300" y="80" fill="green" stroke="none" id="textH9">8</text><text x="335" y="190" stroke="none" id="textT10">10</text><text x="330" y="60" fill="green" stroke="none" id="textH10">10</text>
  </g>
  </g>
 <use transform="rotate(90 50 250)" xlink:href="#chart"/>
</svg>

scale function

SVG scale functin Example Original scale(1,2.5) scale(3,1.5)
<svg height="260" width="220"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" >
  <defs>
  <ellipse id="ellipseShap"  cx="50" cy="70" rx="15" ry="20"></ellipse>
  </defs>
  <text x=23 y=30 fill=red font-size=17>Original</text>
  <use  xlink:href="#ellipseShap" fill="red" stroke="red"   ></use>

  <text x=113 y=60 fill="#544d9a"  font-size=17>scale(1,2.5)</text>  
  <!-- Increasing height 1.5 Time and  width are same-->
  <use transform="scale(1,2.5)" xlink:href="#ellipseShap" fill="#544d9a" stroke="red"></use>
  <text x=10 y=250 fill="#544d9a"  font-size=17>scale(3,1.5)</text>  
  <!-- Increasing height 1.5 Time and  width are triples -->
  <use transform="scale(3,1.5)" xlink:href="#ellipseShap" fill="#544d9a" stroke="red"></use>
</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