Adding Ajax

SVG Quick View

A comprehensive discussion of SVG would require an entire book, so here I'm going to be touching on various common elements and actions, enough to get you started. We've seen in the last few sections that the svg element itself acts like a container in which to add other objects. It can be given a width and a height, given a version number, or hold the SVG namespace, and if contained within other svg elements, it can have an x and y to mark its position:

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200">
...
</svg>

Tip

I'm covering SVG only briefly in this chapter. For more detailed coverage of SVG I recommend the following web sites: the SVG Basics Tutorial at http://www.svgbasics.com, the http://svg.org community site, and the SVG wiki at http://wiki.svg.org.

Basic Shapes and Attributes

There are several basic shapes provided in svg: ellipse, circle, rect, line, polyline, and polygon. Each has a given way of specifying a height and width, as well as location, rounding for corners, fill, border stroke, opacity, clipping, and so on—depending on what the element is, of course. All elements also have the style attribute to apply CSS styling as well as the SVG specialized attributes.

Example 8-8 demonstrates each of the basic SVG shapes using some of the more common attributes for the specific shape. It's using inline SVG, and the example is given an xhtml extension, accessed from a folder where the .htaccess modifications have been made. In addition, this document ...