Building Web Applications with SVG - Cdn.oreilly.com

4. If you wish to serve this file from your own server, then make sure that the server is serving its
mime type as Content-Type: “image/svg+xml”. You may have to contact your systems administrator
to make sure the server is properly configured. If problems arise, please refer to the
document SVG MIME Type, at http://planetsvg.com/tools/mime.php.
Intermission and Analysis
Next, we’ll discuss the code from the preceding exercise so you can see what it does.
SVG As XML
The first and last lines show that SVG, as an XML dialect, is a markup language. Each element—in the
simplest case, a single word between the angle brackets—must have a beginning (the in this
case) and an end (the in this example). You can end the tag like this:
Or you can end it like this:
This second example is called a self-terminating tag, because the slash (/) occurs at the end of the
tag itself. Note that the second line in this example is indented as a convention for making the code
more readable—the indentation isn’t required.
Attributes
All SVG elements have a collection of attributes that are divided into two categories: regular attributes
and presentation attributes (http://www.w3.org/TR/SVG/attindex.html). The first category
includes, for example, geometrical attributes, such as x, cx, and width. The second category includes,
for example, paint attributes, such as fill, stroke-width, display, and opacity.
The element, for example, has an attribute r (meaning radius). The fact that the r attribute
has a value of 50 means (in the simplest and standard case) that the circle’s radius will be 50 pixels.
the SVG Namespace
The element has the attribute/value pair xmlns=”http://www.w3.org/2000/svg” (meaning that
the XML namespace used to interpret the document will be one specified by the W3C).
22 Building Web Applications with SVG