What can we do with SVG?

Best current applications achieved with SVG will show you what can be done with this standard graphical language.

SVG is a language to convert data into graphs. We will see with the following list of applications that it can actually represent a very wide variety of uses.

But above all, we must not delude ourselves, SVG does not fit all cases and often it is better to replace the code with a simple image, possibly with an image map to add a little interactivity...

But when all the conditions meet, it is then possible to provide through SVG amazing things ...

Tiger in SVG

SVG Web Demo

This site offers a tool that converts SVG into Flash to display on all browsers. This may be a solution for older computers.

Map in SVG

Trace a path on a map

With the Raphael framework which knows leverage SVG and a map database you can show a course between a start point and an ending point on a map. The demo uses a screenshot of OpenStreetMap and a few lines of JavaScript. This application is well suited to show visitors how to access a site from the station, for example.

Board game in SVG

Board game

The link is on an SVG file. It shows a rube-goldberg machine in action, ie a mechanism to chain actions until a final outcome. It is clear that this system has all the possibility of a board game like Mario or the 2D version of Duke Nukem.

Invaders in SVG

The Invaders game

Another SVG file showing the possible use in the domain of games, with this classic arcade. It is not optimized and the game is rather slow, but it is here in entire!

Tetris in SVG

The Tetris game

Another classic in SVG file. Speed ​​is less critical here, so the demonstration is more convincing. We see in conclusion that SVG is suitable for games as long as it is not action game. Canvas is more appropriate but not optimal either. We need to take WebGL for this area of use.

Images and text over a song in SVG

Visual song

The program selects a musical piece and then displays the texts to accompany it.
It hangs at loading audio on some browsers but you can continue by clicking on the image.

SVG animated mouth

Anatomy: the animated mouth

This demonstration provided by the site svg-whiz.com shows the anatomical components of the mouth.

Trajan palace

The house of Trajan disassembled

This animation provided by Wikimedia shows the inside of the house of the Roman Emperor Trajan that it disassembles like a puzzle when you click on the image ...

Tourist map in SVG

Tourist map

Tip: mute before going on the site. This animation shows a map of Ireland and the path of a car with a postcard that appears for each place visited ...

Playing cards in SVG

Playing cards

This set of 52 cards being vectorial, they may be scaled without quality loss and so all games may be converted to JavaScript to run in a browser. They are also available in the EPS format. A CSS version exists too!

In conclusion, when SVG is in its privileged scope, where speed is not critical but the interaction with parts of the image is necessary, and if we can target an audience with a given browser, this format allows for beautiful things and makes the user experience as pleasant as possible.