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...

Because the SVG code is cumbersome, it can often be replaced with an image without slowing the page load. It is only required when interactivity is essential.
It is not always perfectly supported by browsers, so we must target an audience that can choose a recommended browser.
There have been update for browsers that removed the SVG compatibilitité with certain tags. The previous condition applies even more.
Canvas is most appropriate when there is no need to access the individual parts of the image. See the Canvas vs. SVG comparison.

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

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.

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

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.

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!

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.

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.

Anatomy: the animated mouth

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

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 ...

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 the public is not restricted to older browsers, this format allows for beautiful things and makes the user experience very pleasant.