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