What is SVG?
SVG stands for Scalable Vector Graphics. It is a vector-based image format for the web, which means that images created using SVG are not made up of pixels, like a JPEG or PNG image. Instead, they are created using mathematical equations that describe the shapes, lines, and colors in the image.
SVG images are resolution independent, which means that they can be scaled up or down without losing any quality or becoming pixelated. This makes SVG images ideal for logos, icons, and other graphics that need to be displayed at various sizes on different devices.
SVG images can be created using a variety of tools, including Adobe Illustrator, Inkscape, and Sketch. They can also be created using code, which makes them ideal for web developers who want to create dynamic graphics that can be manipulated using JavaScript.
In addition to being scalable, SVG images are also lightweight, which means that they load quickly and don't take up a lot of bandwidth. This makes them ideal for use on websites and other digital media.
Where are Use?
1) SVG are used to design logos.
2) Used to make high quality images (banner) and shapes. for 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 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>
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