Using SVG with CSS3 and HTML5

Chapter 17. Beyond the Visible

Chapter 17. Metadata for Accessibility and Added Functionality

SVG on the web is more than just a picture. It’s a structured document that can contain structured information about what the graphic represents.

This chapter looks at the metadata elements and attributes available in SVG to make your graphic more accessible, or to annotate it with information that will be used by your own scripts or by other software.

Titles and Tips

The most commonly used metadata element in SVG is the <title>. We’ve used titles throughout the book—in fact, unless we’ve messed up, there should be a <title> (either SVG or HTML) in every complete example.

As we mentioned back in Chapter 1, a <title> is used to provide a name for a web page or document as a whole. It is used in your browser history list and bookmarks, among other places.

For SVG, a <title> behaves this way if it is the first child of the root <svg> in a .svg file, like this (which is the code from Example 6-1 in Chapter 6):

<svg xmlns="http://www.w3.org/2000/svg" xml:lang="en"
     height="20px" width="20px">
    <title>Diamond</title>
    <path fill="red"
          d="M3,10 L10,0 17,10 10,20Z
             M9,11 L10,18 V10 H15 L11,9 10,2 V10 H5 Z" />
</svg>

The actual title (“Diamond”) is given in the text content of the <title> element. The language of the title text is determined by the nearest ancestor element with an xml:lang attribute—here, en (English) is set on the root <svg>.

If you don’t set a language anywhere in the document, ...