Nowadays, it is difficult to imagine any eye-catching web-site without animation.
However, animated technical drawings are difficult to find. But why can’t we breathe life into general arrangement drawings (GA), piping and instrument diagrams (P&ID) and so on? It would be interesting and more effective to present these drawings dynamically as opposed to statically.
The SVG (Scalable Vector Graphic) format can assist you in solving this issue of “livening up” your drawing. SVG is a special format, based on XML and designed for representation of 2D images in your browser supported by interactivity and animation. Having only to convert your image previously into the CDR (CorelDraw) or AI (Adobe Illustrator) formats, one can consequently use as many as three popular tools (SMIL, JavaScript and Raphael library) to make any “dead” image full of life.
Let me start from the simplest way of animating an SVG drawing. It is called Synchronized Multimedia Integration Language or SMIL. It should be noted that SMIL is a part of SVG. It is embedded in the SVG specification. SMIL provides one with a possibility to do the following:
- animate color attributes;
- transport or rotate elements;
- animate the numeric attributes of elements (eg. the value of x-y coordinates);
- follow a motion path.
Take for example the SVG code where the following animation is used:
Example 1:
<circle cx=”100″ cy=”100″ r=”20″ fill=”red” stroke=”blue” stroke-width=”1″>
<animate attributeName=”r” from=”20″ to=”100″ begin=”0s” dur=”5s” repeatCount=”1″/>
</circle>
The circle animation starts with a radius of 20px and is increased to 100px during 5 seconds.
On the other hand, if you need to create a more complicated animation, SMIL may run short of the necessary functions. That is why one should look for other ways of animating drawings. JavaScript can be helpful.
JavaScript (JS) is widely used in web programming. You can create your own function for displaying or calculating something. Since SVG is an XML-based standard, we can use JavaScript to produce truly remarkable animation.
Let us illustrate this with this part of the SVG code using JavaScript:
Example 2:
<svg>
<script type=”text/javascript”> //include javascript
…..
function changeColorIn(evt) //name of the function
{
evt.target.setAttributeNS(null,”fill”,”grey”); //change fill color from white to grey evt.target.setAttributeNS(null,”fill-opacity”,”0.4″); //change fill-opacity of color from 1 to 0.4
}
</script>
…..
<rect x=”50″ y=”20″ width=”150″ height=”150″ fill=”white” fill-opacity=”1″ stroke =”black” onmouseover=”changeColorIn(evt)”/>
//draw a white rectangle with a black stroke with width=150 and height=150 at x = 50, y = 20
</svg>
Utilizing JavaScript has, of course, both advantages and disadvantages. The biggest plus of using JS is that the sky is the limit for programmers to create the animation they want. However, a minus of using JS is that programmers have to write manually the specific steps for animating in JS code. As a result, several libraries have been created for optimizing the work related to programming. The most famous library is Raphael.
Raphael is a JavaScript library that displays vector graphics for websites. Raphael supports all of the main internet browsers. One can download the library from the official Raphael site and include it into one’s own web site:
<script src=”…/raphael.js”></script>.
This part of the Raphael code shows initializing of a new document and draws a circle with a radius of 5px with its center placed at x=100, y=100:
Example 3:
var paper = Raphael(10, 50, 320, 200);
// Creates circle at x = 100, y = 100, with radius 5
var circle = paper.circle(100, 100, 5);
Since Raphael is based on JS, it has the same functions of interactivity as a mouse click or pushing a button.
Generally speaking, one has a lot of ways of animating an image or a drawing. It can be using SMIL, JavaScript or Raphael. The choice of an animation technique depends only on the complexity of tasks and the professionalism of the programmer.
To learn more about these techniques, don’t hesitate to contact me.
