, , , , , , , ,

Are you familiar using vectorization and vector files? Then you must have been confronted one day to the choice of saving your Adobe Illustrator Artwork (.AI file) into a web readable format for your website or your power-point presentation. The usually way of solving this question is to register your file into an image format such as a Portable Network Graphics file (.png) AND into the classical Adobe format .ai, in the way that you could edit it anytime and display it wherever you want.

But what happens if you want some interactivity on your image? Will you produce 200 frames of .png and then load them on a server to display it to the web? This will give very quick problems of latency (for loading all images from the user) and requires a little of coding to decide what image do you want when you click somewhere on the image. And the size of your image will be also important, if you want to enlarge it, pixels will grow and become unpleasant.

The best way to do it would be to load your .ai file directly on the web and to code directly on it, but the .ai is a proprietary file format, so you won’t be able to code on it and your user won’t be able to see it until he install a special plugin and achieve some manipulations that we don’t want him to do. The solution we developed on a Bachelor project was to use a different vector format called scalable vector graphics (.svg) to implement our code directly on it.

Représentation SVG

Figure 1: SVG result for an actors scheme about a controversy, try it by clicking on the image

Scalable Vector Graphics (.svg) is a format which is based on Extensible Markup Language (.xml) architecture and can easily be introduced to an Hyper Text Markup Language (.html) file. This mean that it is human readable (not like .ai) and it can be saved from Illustrator as well as from other open source logiciels as Inkscape. The coding of animations is much simpler and the editing from another user is possible without Illustrator.

Test of SVG Technology
Figure 2: SVG Test on W3Schools, try it to discover the simple structure of .svg

As a conclusion, what is really relevant, we must know when we register our files, the format that we choose is determinant to the duration of our files and must be consequent with the future of our files.