Login | Register   
RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX

By submitting your information, you agree that devx.com may send you DevX offers via email, phone and text message, as well as email offers about other products and services that DevX believes may be of interest to you. DevX will process your information in accordance with the Quinstreet Privacy Policy.

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
Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



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