Skip to main content

What is SVG?

SVG is called Scalable Vector Graphics. There are based on 2 dimensional in xml. SVG is popular to design high quality images, graph, and animation. SVG are created by using text of xml format. so there is a lightweight for as compared to another images (jpg, png, gif etc). The advantage of svg is that fast to load in a web page. and quality of this image are very good. There are Never affected the quality of those image when zoom and animated svg element.

Where are Use?

1) SVG are used to design logos.

2) Used to make high quality images (banner) and shapes. for example.

Animation SVG banner example

This is an basic banner. the code are given in below.

<html>
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script></head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="210" height="140" >
   <clipPath id="items">
      <circle cx="90" cy="120" r="120" fill="white" ><animate attributeType="XML" attributeName="r" from="10" to="120"
        dur="7s" repeatCount="indefinite"/>
</circle>
  </clipPath>
  <g>
    <rect x=0 y=0 width=200 height=130 stroke="gray" fill="lightslategrey" ></rect>
  <text  id="firstLine" font-family="sans-serif" font-weight="600" font-size="30" fill="white" x=10 y=30 ></text>
    
    <text  clip-path="url(#items)" id="animate" font-family="sans-serif" font-weight="600" font-size="40" fill="white" x=2 y=100 >Animation
     <animate attributeName="fill"
          values="beige;#e91e63;red;pink;orange;" begin="0s" dur="9s" repeatCount="indefinite"></animate>
  </text>
     <circle stroke-dasharray="3 3"  cx="90" cy="50" r="6" fill="none" stroke="white" stroke-width="4"> <animate attributeName="stroke-dashoffset" from="200" to="0" begin="0s" dur="19s" repeatCount="indefinite"/>
</circle>
   <circle  cx="90" cy="50" r="1" fill="none" stroke="white" stroke-width="2"> <animate attributeName="r" from="0" to="5" begin="0s" dur="10s" repeatCount="indefinite"/></circle>
  
</g>
  <!-- JQuery-->
    <script type="text/JavaScript">
      <![CDATA[
        function fillText(start,end,dispaly){
          if(start==end) return;
          $("#firstLine").text($("#firstLine").text()+dispaly[start]);
          setTimeout(function(){
            fillText(start+1,end,dispaly);
          },150);
        }
        $(function(){
          var textData="Learn SVG";
          
          fillText(0,textData.length,textData);
        });
         ]]>
  </script>
  </svg>
  </body>
</html>
</svg>

SVG Advantages

1) We can be animate every svg element.

2) All Modern browser are support SVG.

3) SVG element are supported of CSS styles.

4) SVG element are support Jquery. so we are animated SVG element are dynamically.

5) Quality of SVG shape are good.

6) SVG shape and image are scalable.

7) SVG an open source.

8) SVG images can be searched,scripted, indexed, and compressed.

SVG Animation Example

SVG Bicycle Animation 
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="280" height="300" >
  <g x="0">  
  <circle stroke-dasharray="10 10" cx="80" cy="150" r="30" fill="none" stroke="gray" stroke-width="10"> <animate attributeName="stroke-dashoffset" from="200" to="0" begin="0s" dur="19s" repeatCount="10"/></circle>
 <circle stroke-dasharray="10 10" cx="200" cy="150" r="30" fill="none" stroke="gray" stroke-width="10"> <animate attributeName="stroke-dashoffset" from="200" to="0" begin="0s" dur="19s" repeatCount="10"/></circle>   
<circle cx="80" cy="150"  r="26" stroke="gray" stroke-width="3px" fill="none"></circle>
<circle cx="200" cy="150" r="26" stroke="gray" stroke-width="3px" fill="none"></circle>    

<circle cx="80" cy="150"  r="5" fill="gray"></circle>
<circle cx="200" cy="150" r="5" fill="gray"></circle>
<g>    
<line x1="80" y1="120" x2="80" y2="180" stroke="gray"></line> 
<line transform="rotate(90 80 150)" x1="80" y1="120" x2="80" y2="180" stroke="gray"></line> 
<line transform="rotate(45 80 150)" x1="80" y1="120" x2="80" y2="180" stroke="gray"></line>  
<line transform="rotate(145 80 150)" x1="80" y1="120" x2="80" y2="180" stroke="gray"></line> 
 <animateTransform
            attributeName="transform"
            type="rotate"
            from="0 80 150"
            to="360 80 150"
            dur="19s"
            repeatCount="10"/>
    </g>
    <g>
 <line x1="200" y1="120" x2="200" y2="180" stroke="gray"></line>  
<line transform="rotate(90 200 150)" x1="200" y1="120" x2="200" y2="180" stroke="gray"></line> 
<line transform="rotate(45 200 150)" x1="200" y1="120" x2="200" y2="180" stroke="gray"></line>  
<line transform="rotate(145 200 150)"x1="200" y1="120" x2="200" y2="180" stroke="gray"></line>
 <animateTransform
            attributeName="transform"
            type="rotate"
            from="0 200 150"
            to="360 200 150"
            dur="15s"
            repeatCount="10"/>
   
    </g>
    <path stroke="red" fill="none" stroke-width="3px" d="m80 150 l 50 0 l60 -55 l-80 0 l-30 55 m50 0 l-25 -67 m -15 0 l 30 0 m72 10 l 0 -20 l -20 0 l0 10 l 10 0 m10 10 l 10 60 "/> 
 <circle cx="130" cy="150" r="6" fill="red"></circle>
       
<path stroke="red" fill="none" stroke-width="3px" d="m125 165 l 10 -35 l -6 0 l 12 0 m -10 35 l -12 0" >
      <animateTransform
            attributeName="transform"
            type="rotate"
            from="0 130 150"
            to="360 130 150"
            dur="8s"
            repeatCount="10"/>
    </path>
   <animateTransform
            attributeName="transform"
            type="translate"
            from="0 "
            to="220"
            dur="8s"
            repeatCount="10"/>
    </g>
    <g>
    </g>
</svg>
Last updated on by Kalkicode




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