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>
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.
There are several basic shapes provided in
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 ...