What is SVG?

SVG is called Scalable Vector Graphics. there are based on 2 dimensional in xml. SVG is most popular. Because normal image like (png, jpg, gif ) is takes more time to load in web page. but svg are lightweight they are fast load in web browser. so they are decrease page loading speed. And SVG element are not affects its quality when change device size. so they are reliable.

Where are Use?

1) SVG are used to design logos.
2) used to make high quality images and shapes.

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

© 2019, regularcodes.com, All rights reserved