Scalable Vector Graphics (SVG)

Scalable Vector Graphics (SVG)

January 11, 2018

No Comments

Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation….

SVG images and their behaviors are defined in XML text files. This means that they can be searched, indexed, scripted, and compressed. In Modern days most of the websites are using this SVG  for make their website more attractive and catchable. It is a language for describing 2D-graphics and graphical applications in XML and the XML is then rendered by an SVG viewer. We can animate those SVG with their path-wise and  the SVG is more quality than images or fonts. We can also create logos, icons, backgrounds, patterns, animated backgrounds with this SVG.

If you put SVG in HTML, the page will barf and not even try to render. If you link up an SVG file that has that in it as an <img> or background-image , it won’t barf, but it won’t work. The HTML <svg> element is a container for SVG graphics. SVG has several methods for drawing paths, boxes, circles, text, and graphic images.

<svg version=”1.1″ id=”Layer_1″ xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink” x=”0px” y=”0px” viewBox=”0 0 512 512″ style=”enable-background:new 0 0 512 512;” xml:space=”preserve”><style type=”text/css”>.se_ct_wulli:hoversvg .st0

{

stroke-dasharray:6000; stroke-dashoffset:0; -webkit-animation: dash 4s linear forwards; -moz-animation: dash 4s linear forwards; -o-animation: dash 4s linear forwards; animation: dash 4s linear forwards; stroke: #8f8f8f; fill:transparent; transition: all 500ms linear;

}

.se_ct_wulli:hoversvg

{

transform: scale(1.1); transition: 500ms linear; -webkit-transition: 500ms linear; -moz-transition: 500ms linear;

}

 .st0{

fill:#64C100; stroke: transparent; stroke-width:8px; stroke-miterlimit:2;

}

 @-webkit-keyframesdash

{

from{stroke-dashoffset:6000;} to{stroke-dashoffset:0;}

}

</style>

<g><g><path class=”st0″d=”M59.733,443.733C26.803,443.733,0,470.536,0,503.467C0,508.186,3.814,512,8.533,512h102.4c4.719,0,8.533-3.814,8.533-8.533C119.467,470.536,92.664,443.733,59.733,443.733z M17.929,494.934c3.396-16.683,16.589-29.79,33.271-33.195v16.129h17.066v-16.129c16.683,3.414,29.875,16.513,33.271,33.195H17.929z”/></g></g>

</svg>