Browse DevX
Sign up for e-mail newsletters from DevX

Tip of the Day
Language: Web
Expertise: Beginner
Sep 12, 2018



Building the Right Environment to Support AI, Machine Learning and Deep Learning

Try Using SVG for Animation

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


Octavia Anghel
Thanks for your registration, follow us on our social networks to keep up-to-date