HTML and CSS Reference
Figure 9-18. Animating the selected state
The image will then fly back into place and an alert will appear as shown in
Figure 9-19 .
Figure 9-19. The alert showing the name of the selected state
In this chapter I introduced SVG with a couple of fairly simple applications. An SVG image is made up of multiple
elements, which can be simple elements such as lines, circles, and rectangles or more complex options like
polygons and paths. The key feature of SVG is that each individual element can be styled independently both
statically and dynamically. This enables much greater control and interaction. Also, because the image is based
on an expression, the images can be scaled without affecting the image quality.
In the exercises in this chapter you:
Designed an image using simple geometric shapes
.svg image file
Created a standalone
Displayed a map as a collection of
Implemented animation on an SVG element
You also used LINQ to SQL to implement a model class that accesses a SQL Server database and then
designed a view that creates an SVG image using the model elements.
In the next chapter I'll show you how to use the canvas element to construct graphical elements in HTML5.