The Art of Writing Short Stories Read Here

SVG Animations: Create And Play On Any Phone


3D Scalable Vector Graphics
You can play .svg files on any phone, even on your Nokia s40 phone. That means you can create and play images and high quality animations on your mobile itself.

What is SVG?

SVG stands for Scalable Vector Graphics. With the help of Scalable Vector Graphics you can create graphics (images) by only writing some simple codes. SVG and flash are similar but SVG is better. In case of Flash we have to compile the code but for SVG there's no need of compiling, just write and run. SVG is light-weight and easy to learn and write. You can learn SVG on W3Schools.com.

How to create SVG files on Nokia s40 mobile phones?

You can create SVG files easily on your mobile phone by following these steps;
    1. Learn SVG from W3schools.com

    1. Open Opera Mini Mod, Go to Menu > File Manager and choose any folder where you want to save the file.

    1. Press Menu > Operations > New File. Give any name to the file but put .svg at the end of the file name.

    1. Highlight this file (hold on the file name, if you are using a touch phone) and Press Menu > Open > Text/ UTF.

File will be opened as blank page.
    1. Press Menu > Edit > Text:Page or Text:All.

  1. Write all the SVG code and save it.
Exit Opera Mini Mod, go to the SVG file and open the file. You'll see what you've tried to draw (by coding).

Here is a sample code. In this animation a rectangle will increase in size repeatedly for 20 seconds. Press "Left" key 2 times to make it visible You can download the code from below.

<svg author="Asad" version="1.0.0"
viewBox="0 0 240 40" width="240"
hieght="40">
<rect id="rec" x="30" y="10"
width="30"
height="10" style="fill:lime">
<animate attributeName="x"
attributeType="XML"
begin="0s" dur="20s" fill="freeze"
from="300" to="0"/>
<animate attributeName="y"
attributeType="XML"
begin="0s" dur="20s" fill="freeze"
from="100" to="0"/>
<animate
attributeName="width"
attributeType="XML"
begin="0s" dur="20s" fill="freeze"
from="300" to="800"/>
<animate
attributeName="height"
attributeType="XML"
begin="0s" dur="20s" fill="freeze"
from="100" to="300"/>
<animateColor
attributeName="fill"
attributeType="CSS"
from="#000000" to="#ff20ff" begin="2s"
dur="20s" fill="freeze"/>
</rect>
</svg>

Download: asad.svg.txt
Remove .txt from the end.
Comment below if there is something is wrong in this tutorial or if you have any doubt. Please share your ideas about this blog.0
You may also like :