dcsimg
 

Submitted by: Octavia Anghel(octaviaanghel@gmail.com)

Wednesday Sep 12th 2018 by Octavia Anghel

Language: Web, Expertise: Beginner - Learn more about the benefits of using SVG animations on your web site.

Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics.

As the name suggests, SVG is used to scale, so it very handy when comes to responsive web design. The SVG graphic will be clear, despite the screen resolution of the device it is viewed on.

SVG images can be created and edited with any text editor and they can be searched, indexed, scripted, and compressed. SVG images can also be printed with high quality at any resolution.

The below snippet of code is an example of growing rectangle that change color:

<svg width="200" height="300">

<rect id="rec" x="100" y="100" width="100" height="100" style="fill:lime">

<animate attributeName="x" attributeType="XML" begin="0s" dur="10s" fill="freeze" from="100" to="0" />

<animate attributeName="y" attributeType="XML" begin="0s" dur="10s" fill="freeze" from="100" to="0" />

<animate attributeName="width" attributeType="XML" begin="0s" dur="10s" fill="freeze" from="300" to="800" />

<animate attributeName="height" attributeType="XML" begin="0s" dur="10s" fill="freeze" from="100" to="300" />

<animate attributeName="fill" attributeType="CSS" from="lime" to="red" begin="2s" dur="6s" fill="freeze" />

</rect>

</svg>
Home
Mobile Site | Full Site