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