What you can do with SVG
The best current apps made with SVG will show you what can be done with this standard graphical language.
SVG is a language for converting data to graphics. The following list of applications will show that this can actually represent a very wide variety of applications.
But above all, let's face it, SVG is not suitable for all scenarios, and it is often better to replace the code with a simple image, perhaps an image map, to add a little interactivity...
- Because SVG code is heavy, it can often be replaced with an image without slowing down the page load. Therefore, it is more suitable when interactivity is important.
- It is not always fully supported by browsers, so we must target the audience who can choose the recommended browser.
- There have been cases where browser updates have removed compatibility with certain SVG tags. Therefore, the previous condition applies even more.
- Canvas is better suited when you don't need to access individual image elements. See Canvas vs SVG.
But when the conditions are right, it is possible to deliver amazing things with SVG...
SVG Web Demo
This site offers a tool that converts SVG to Flash so that it can be displayed on all browsers. This can be a solution for older browsers.
Draw a path in your map
Thanks to the Raphael framework, which uses SVG and the map database, you can draw a path between the start and end points on the map. The demo uses a screenshot of OpenStreetMap and several lines of JavaScript. This application is well suited, for example, to show visitors how to get to the place from the railway station.
Board game
Link to SVG file. It depicts the Rube Goldberg machine in action, in other words, a mechanism for linking actions together to achieve the final result. It is clear that this system has all the potential of a 2D board game like Mario or Duke Nukem.
Game of invaders
Another SVG file showing the possible applications of this arcade classic in games. It is not optimized, and the game is quite slow, but nevertheless complete!
Game "Tetris"
Another classic in the SVG file. Speed is less important here, so the demonstration is more convincing. We see in the conclusion that SVG is suitable for games, provided that they are not action games. The canvas is more appropriate, but not optimal either. For this use case, you must switch to WebGL.
Visual music
The program allows you to select a piece of music and then displays the accompanying lyrics.
It hangs when downloading audio in some browsers, but you can continue by clicking on the image.
Anatomy: Animated Mouth
This demonstration provided by svg-whiz.com shows the anatomical components of the mouth.
Trajan's house dismantled
This animation, provided by Wikimedia, shows the interior of the house of the Roman emperor Trajan, which is disassembled like a puzzle when you click on the image...
Playing cards
Because this 52-card deck is vector-based, they can be enlarged without loss of quality, and so all decks can be converted to JavaScript to run in the browser. They are also available in EPS format. There is also a CSS version!
In conclusion, when SVG is in its preferred application, where speed is not crucial, but interaction with parts of the image is necessary, and the audience is not limited to older versions of the browser, this format allows for very beautiful results and a very pleasant user experience.