How to Breathe Life into the SVG Drawings

Sergiy Hrytsay, CAD Engineer

DWG-SVG-drawing conversion

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.

 

We are ready to help!

Request consultation, ask a question or share your feedback. Just get in touch!

5 SAP S4 HANA Data Migration Challenges for the Oil, Gas and Energy Industry
5 SAP S/4 HANA Data Migration Challenges for...
Five years have passed since SAP S/4 HANA was released in 2015. Five years remain...
ecl@ss congress 2019 Keel
Attending e-cl@ss Congress 2019
During 18-19 September, Keel attended the 7th e-cl@ss Congress 2019 in Cologne, Germany. The congress...
KICKer - SAP data management application
Data Governance with KICKer, or What Really Hides...
In recent times, runaway data growth leads to a great volume of unordered information that...
ISO certification
ISO 27001 (Information Security) Certification Acquisition in Keel
In September 2018 the management of KEEL initiated the process of obtaining the ISO 27001...