Marja-Riitta Koivunen <marja@w3.org>
Copyright © 1999-2000 W3C® (MIT, INRIA, Keio), All Rights Reserved. W3C liability,
trademark,
document
use and software
licensing rules apply.
Scalable Vector Graphics (SVG) offers a number of features which can make graphics on the Web more accessible than is currently possible, to a wider group of users.This includes users with varying disabilities, such as low vision, color blind or blind users, and users with different interaction devices. A number of these features can also increase usability of content for many people without disabilties.
Accessibility can only be achieved if the features offered by SVG are correctly used and supported. This draft Note aims to describe the possibilities offered, and illustrate their use with concrete examples.
This Note presents some initial ideas which may be proposed as a note on the accessibility features of SVG. It is a preliminary working draft. It is inappropriate to reference W3C working drafts as anything other than "work in progress". This document is expected to become a W3C Note before the SVG Specification is published as a recommendation, and may for a basis for comment on that specification. Comment on this document is invited. Currently this document has not been reviewed by any working group. It is expected to be reviewed by the WAI Protocols and Formats Group, the WAI Education and Outreach Group and the SVG Working Group before publication as a Note.
This document is a potential draft W3C Note and has not yet been approved by anyone. In particular no endorsement is implied or made by the World Wide Web Consortium, the Web Accessibility Initiative, nor by the working groups or members thereof. Hopefully it will grow up into a real document one day, or will quietly resign and live out its autumn years in dignity and anonymity.
Publication of a W3C Note does not imply endorsement by the W3C Membership. A list of current W3C technical reports and publications, including working drafts and notes, can be found at http://www.w3.org/TR.
Please send comments to Charles McCathieNevile, Marja-Riitta Koivunen
In many cases, images have an important role in conveying additional information or clarifying and simplifying issues. In this way the use of multimedia is itself a benefit to accessibility. However the information presented in images needs to be accessible to all users, including users with non-visual devices. Furthermore, in order to have full access to the web, it is important authors with disabilities can create Web content, including where possible images.
The working context of people can be very different from your own. Many users or authors
Increasing the accessibility of images can benefit a wide variety of users and authors including many people who do not have a physical disability but who have similar needs. For example, someone may be working in an eyes-busy environment and thus require an audio equivalent to information they cannot view. Users of small mobile devices (with small screens, no keyboard, and no mouse) have similar functional needs to some users with disabilities. For further information on how people with different disabilities use the Web, please consult the Working Draft "How People with Disabilities Use the Web" [USENOTE].
Scalable Vector Graphics [SVG] is an XML based mark-up language representing a new way of producing graphics for the Web. It provides many accessibility benefits, some originating from its use of the vector graphics model, some inherited because SVG is built on top of XML, and the rest spring from the design of SVG itself, for example, SVG-specific elements for equivalent alternatives.
The raster-based images on the Web, such as PNG or GIF, are typically made accessible for users with visual disabilities by attaching a textual description, which is accessed instead of the visual image. This alternative text is virtually the only possibility as the images are stored as matrices of colored dots with no structural information. The structural information can be naturally added to any image as metadata but managing it separately from the visible image is tedious, making it less likely that authors will create it, and prone to errors or falling out of date. The vector graphics based SVG format stores the structural information of graphical shapes as an integral part of the image. As we discuss below, this information can be used by alternative rendering tools to increase accessibility, especially when combined with corresponding alternative equivalents and metadata.
The structural and graphical information embedded in the SVG images makes them highly scalable so that they can be zoomed and resized by the reader as needed without loss of quality. Furthermore, the style of the images can be changed by the user using stylesheets. The scaling and styling possibilities can help users with low vision, color deficiencies, or users with alternative interaction devices, such as tactile graphic devices, which typically have a very low resolution. Definition of their own stylesheets enables users who might otherwise be unable to access the content to control the rendering of the SVG images.
The following example illustrates the scalability of a vector graphics image. The first row shows a small PNG and a corresponding SVG image, which look the same. The second row shows an enlargement of both. It is easy to see that the PNG version of the image has suffered a significant loss of quality, while the SVG version looks smooth and shows more details than before. Providing smooth zooming makes it easier for users with low vision to make sense of the image at an appropriate size for them.
| Small PNG image:
|
Small SVG image:
|
| Enlarged PNG image:
|
Enlarged SVG image:
|
As SVG is an XML based language it also inherits some accessibility benefits directly from XML. Although these benefits are common to all XML based languages we want to show how they can be utilized with the context of SVG images.
One major XML based accessibility benefit is that an SVG image is defined as text, so it can be created or edited by a text-processing or XML authoring application (as we shall see, there are other properties of SVG that make this easier than it might seem at first). A number of popular Web design tools are in fact enhanced text editing applications, and for users with certain types of disabilities these are much easier to use. Naturally, it is also possible to create graphic SVG authoring tools that require very little reading and writing, benefitting people with other types of disabilities.
The separation of presentation and the rest of the content is highly important for accessibility. Presentations of SVG images can be controlled by attaching stylesheets to them which is a feature inherited from XML. SVG adds a number of elements to CSS for better control of the presentation of images.
Accessible interaction through DOM is another benefit inherited from XML. The DOM interface can enable the use of many assistive technologies with SVG images.
SVG can also be easily used with other XML based languages, which increases accessibility as it is possible to use the most suitable mark-up language for each part of a document (refer to [WAI-WEBCONTENT], Guideline 3 in general). SVG definitions can be embedded into other XML languages, although we do not show that in this document. For instance, a MathML document could use SVG both for presenting equations and illustrative images of the equations. Similarly an SVG document can include other XML based languages. In examples below we show how to include RDF metadata and SMIL presentations to provide further information about the graphical components and their relationships.
This document highlights the features in SVG which support accessibility. In Sections 2, 3, 4, 5 and 6 we discuss the accessibility features of SVG (including the use of style sheets). Section 7 explains the accessibility benefits that are inherited from XML. To illustrate how to create accessible SVG graphics with various SVG features the document uses an example of a network diagram which is successively built up. A reader with a sound basic grasp of HTML should be able to make sense of the code examples, however, a good working knowledge of XML helps to make them more readily comprehensible.
One of the key requirements for accessibility of graphics is to make alternative information available to people who cannot see the graphics (refer to [WAI-WEBCONTENT], Checkpoint 1.1, and Guideline 1 in general). This Note presents a number of ways to include and use alternative content. The simplest of them is to specify equivalent alternatives by including the following elements in any SVG container or a graphics element:
titledescMost often the title and desc elements contain
text. However, if necessary they may also contain text mark-up from other XML
based languages. Figure 5.1 has an example of including text mark-up in
equivalent alternatives.
The following example is a simple SVG document that includes a title and a description for an image of a computer network, although it does not have any graphic components that can be drawn.
<?xml version="1.0"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN" "http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd"> <svg width="6in" height="4.5in" viewBox="0 0 600 450"> <title>Network</title> <desc>An example of a computer network based on a hub</desc> </svg>
Figure 2.1: A simple SVG
document with title and desc elements.
An SVG image can consist of several hierarchical components each of which can have a title and a description. By using the hierarchy and the equivalents it is possible to create a rough mental model of the image without being able to see the graphics of the image. Therefore it is important that the SVG authors carefully build the hierarchical component structure so that it reflects the components of the object illustrated by the image. Some guidance for using structure can be found in WCAG (refer to [WAI-WEBCONTENT], Guidelines 3 and 12). .
The following example extends the network image component introduced in the previous example by introducing six subcomponents:
Each subcomponent is included as a container element with an
id attribute and equivalent information. Although this image does
not yet contain any graphics elements we already know quite a lot about it.
(Note: To easily identify changes from the previous version of the example
new content is strongly emphasized).
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN"
"http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">
<svg width="6in" height="4.5in" viewBox="0 0 600 450">
<title>Network</title>
<desc>An example of a computer network based on a hub</desc>
<g id="hub">
<title>Hub</title>
<desc>A typical 10BaseT/100BaseTX network hub</desc>
</g>
<g id="ComputerA">
<title>Computer A</title>
<desc>A common desktop PC</desc>
</g>
<g id="ComputerB">
<title>Computer B</title>
<desc>A common desktop PC</desc>
</g>
<g id="CableA">
<title>Cable A</title>
<desc>10BaseT twisted pair cable</desc>
</g>
<g id="CableB">
<title>Cable B</title>
<desc>10BaseT twisted pair cable</desc>
</g>
<g id="CableN">
<title>Cable N</title>
<desc>10BaseT twisted pair cable</desc>
</g>
</svg>Figure 2.2: A structured SVG document with alternative equivalents (download structure in 2.2).
The component hierarchy with alternative equivalents can be used in different ways by different renderers. For instance, a simple non-visual renderer can provide access to the component hierarchy and allow the user to navigate her way up and down or at a certain level of the structure, giving her the equivalent description of each encountered component (see also User Agent Guidelines [UAAG] checkpoint ?.?. A standard XML browser, which does not render SVG as graphics, may also do this. A multimedia-capable renderer might name each component that has focus through speech output - much like tooltips are used in some Web browsers to render alternative text for images.
The simplest way to render the image in Figure 2.2 is naturally to show the
alternative equivalents as text, such in Figure 2.3. This can be done by
attaching CSS [CSS] style information to the
title and desc elements of the image. An example
stylesheet to do this kind of rendering is presented and explained in Figure
4.2 in Section 4. Normally, without the style definition, nothing from Figure
2.2 would be presented to the user.
Network An example of a computer network based on a hub
Hub A typical 10baseT/100BaseTX network hub
Computer A A common desktop PC
Computer B A common desktop PC
Cable A 10BaseT twisted pair cable
Cable B 10BaseT twisted pair cable
Cable N 10BaseT twisted pair cable
Figure 2.3: Textual representation of Figure 2.2 when it is rendered with the stylesheet in Figure 4.2.
Users examining images visually automatically try to divide them into components and connections between these components. The author guides the division by using visual means, such as the adjacency, colors, patterns, sizes and shapes of the components. In SVG the author can provide the component structure also for users who cannot see the visual image and its structure for one reason or another. If the image is well-constructed, a user can easily discover which graphical elements construct each component, how the components are related, and what components are re-used in the image.
The component structure is especially important for blind users as it gives them additional information about the image. The re-use of components saves time as users only need to examine the same component once. The structural information does not decrease the need for author-provided equivalent information. However, it helps to gain deeper understanding of the image when the user or a special device needs it (and is capable of using it). Authoring tools can support the authors to provide a good structure that is easy to understand by providing ways to visualize the component hierarchy (refer to Authorint Tool Accessiblity Guidelines [ATG} checkpoint 3.2).
The ability to re-use structured components also helps authors, including authors with disabilities, because images can be edited through their structure as well as through the individual graphic elements. This is a requirement of the Authoring Tool Accessibility Guidelines (refer to to [WAI-AUTOOLS], Checkpoint 7.5). Because the image components can include alternative information, it is also possible to build up libraries of annotated multimedia (refer to to [WAI-AUTOOLS], Checkpoint 3.5).
SVG provides a number of basic shapes, with which most people are familiar. Rectangles, circles, polygons and ellipses can all be easily created by name, making it a fairly simple matter to determine the basic shape or shapes used to represent an object. In the following example (which will be the hub for the network image) we have two rectangles, one inside the other, and a small circle inside the larger rectangle.
<?xml version="1.0"?>
<?xml-stylesheet href="http://www.w3.org/1999/09/SVG-access/svg-basic-style" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN"
"http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">
<svg width="6in" height="4.5in" viewBox="0 0 600 450">
<g transform="translate(10 10)">
<title>Hub</title>
<desc>A typical 10BaseT/100BaseTX network hub</desc>
<rect width="253" height="84"/>
<rect width="230" height="44" x="12" y="10"/>
<circle cx="227" cy="71" r="7"/>
</g>
</svg>Figure 3.1: Adding some shapes to form an image of a Hub (download hub image in 3.1).
Figure 3.2: Visual rendering of Figure 3.1.
Figure 3.2 presents the Hub in Figure 3.1 as a visual image. In case the graphics cannot be rendered there are other means that could help to understand the relations of the graphics elements. For instance, sometimes it can help to render the graphical shapes, such as rectangles, circles or ellipses, as text. This can be done using stylesheets as shown in Section 4 (see Figure 4.3).
Images often include text that explains or names the elements presented in
the image. With SVG the text is contained in text elements that
keep the textual form available for various assistive or other technologies.
Furthermore, the text from other elements, such as alternative text
equivalents, can be reused. This helps in managing of the text as it only
needs to be changed at one place which can help users for whom entering
content is difficult, for example because they have a physical disability
(there is also more chance that it will be right).
In the following, we add a text element to the image of the
Hub that was described in Section 3.1. This text element re-uses
the title text of the Hub image by referring to it with a
tref element and rendering it as part of the text
element. An id attribute is added to the title
element so that it can be referenced.
<?xml version="1.0"?>
<?xml-stylesheet href="http://www.w3.org/1999/09/SVG-access/svg-basic-style" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN"
"http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">
<svg width="6in" height="4.5in" viewBox="0 0 600 450">
<g transform="translate(10 30)">
<title id="hub">Hub</title>
<desc>A typical 10BaseT/100BaseTX network hub</desc>
<!-- Re-use the text in the title element -->
<text x="0" y="-10">
<tref xlink:href="#hub"/>
</text>
<rect width="253" height="84"/>
<rect width="230" height="44" x="12" y="10"/>
<circle cx="227" cy="71" r="7"/>
</g>
</svg>Figure 3.3: Reusing the title as
text in the Hub image (download hub image in
3.3).
Figure 3.4: Visual rendering of Figure 3.3.
SVG allows the construction and re-use of graphic components. This makes it easier to understand the structure of complex images as the re-usable components are defined only once and therefore need to be studied and understood only once. This helps especially if the alternative means of examining the image are more time consuming. Serial means of inspecting information, such as using a speech rendering, have often been compared to reading through a soda straw. It can take a lot longer to be able to understand context and relationships than it does by visual inspection. An authoring tool may also utilize this feature to help to create and modify graphics with the same components. This can also help users having difficulties in fine motor control as there is less drawing and writing required.
In the following example we have defined a socket, and added five of them to the hub defined in Figure 3.3:
<?xml version="1.0"?>
<?xml-stylesheet href="http://www.w3.org/1999/09/SVG-access/svg-basic-style" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN"
"http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">
<svg width="6in" height="4.5in" viewBox="0 0 600 450">
<g transform="translate(10 30)">
<!-- Define a socket -->
<defs>
<g id="hubPlug">
<desc>A 10BaseT/100baseTX socket</desc>
<path d="M0,5 h5 v-9 h12 v9 h5 v16 h-22 z"/>
</g>
</defs>
<title id="hub">Hub</title>
<desc>A typical 10BaseT/100BaseTX network hub</desc>
<text x="0" y="-10">
<tref xlink:href="#hub"/>
</text>
<rect width="253" height="84"/>
<rect width="229" height="44" x="12" y="10"/>
<circle cx="227" cy="71" r="7"/>
<!-- five groups each using the defined socket -->
<g transform="translate(25 25)" id="sock1">
<title>Socket 1</title>
<use xlink:href="#hubPlug"/>
</g>
<g transform="translate(70 25)" id="sock2">
<title>Socket 2</title>
<use xlink:href="#hubPlug"/>
</g>
<g transform="translate(115 25)" id="sock3">
<title>Socket 3</title>
<use xlink:href="#hubPlug"/>
</g>
<g transform="translate(160 25)" id="sock4">
<title>Socket 4</title>
<use xlink:href="#hubPlug"/>
</g>
<g transform="translate(205 25)" id="sock5">
<title>Socket 5</title>
<use xlink:href="#hubPlug"/>
</g>
</g>
</svg>Figure 3.5: Adding 5 sockets to the Hub in Figure 3.3 (download hub image in 3.5).
Figure 3.6: A visual rendering of Figure 3.5.
SVG images can also include components or complete images from other documents using XML Linking Language [Xlink]. Xlink enables easy construction and re-use of libraries of known images either locally or on the Web. For authors, this means being able to use a known graphic component even when it cannot be seen. For users who cannot see a library of described images or image components can be used to identify standard graphic components.
The following example uses images and symbols defined elsewhere with the
rest of the graphics. These are emphasized in the example. In addition, it
adds a text element to the Network image and some graphics
elements to the Cable images. These are marked with comments.
<?xml version="1.0"?>
<?xml-stylesheet href="http://www.w3.org/1999/09/SVG-access/svg-style" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN"
"http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">
<svg width="6in" height="4.5in" viewBox="0 0 600 450">
<title id="mainTitle">Network</title>
<desc>An example of a computer network based on a hub</desc>
<!-- Draw text. -->
<text x="0" y="-10">
<tref xlink:href="#mainTitle"/>
</text>
<!-- Use the hub image and its title and description information. -->
<g id="hub" transform="translate(180 200)">
<image xlink:href="http://www.w3.org/1999/09/SVG-access/hub"/>
</g>
<!-- Use an external computer symbol. Scale to fit. -->
<g id="ComputerA" transform="translate(20 170)">
<title>Computer A</title>
<use xlink:href="http://www.w3.org/1999/09/SVG-access/computer#terminal"
transform="scale(0.5)"/>
</g>
<!-- Use the same computer symbol. -->
<g id="ComputerB" transform="translate(300 170)">
<title>Computer B</title>
<use xlink:href="http://www.w3.org/1999/09/SVG-access/computer#terminal"
transform="scale(0.5)"/>
</g>
<g id="CableA" transform="translate(107 88)">
<title>Cable A</title>
<desc>10BaseT twisted pair cable</desc>
<!-- Draw Cable A. -->
<path d="M0,0c100,140 50,140 -8,160"/>
</g>
<g id="CableB" transform="translate(142 88)">
<title>Cable B</title>
<desc>10BaseT twisted pair cable</desc>
<!-- Draw Cable B. -->
<path d="M0,0c100,180 110,160 159,160"/>
</g>
<g id="CableN" transform="translate(242 88)">
<title>Cable N</title>
<desc>10BaseT twisted pair cable</desc>
<!-- Draw Cable N. -->
<path d="M0,0c0,-70 20,-50 60,-50"/>
</g>
</svg>Figure 3.7: Adding graphics to the Network components presented in Figure 2.2 (download network image in 3.7).
Figure 3.8: A visual rendering of Figure 3.7.
Note that there are no title or desc elements for
the hub, since it is an SVG image and already contains those elements with
general descriptions. Each computer has a different title, but
there is already a desc element defined as part of the
symbol element so it does not need to be repeated.
One of the main themes in the Web Content Accessibility Guidelines is the separation of presentation from the other content (refer to [WAI-WEBCONTENT], Checkpoint 3.3 and Guideline 3 in general). When presentation is separate the user has more control to adjust the style, such as the color of the elements or font size, to her specific needs. Furthermore, also the author can more easily experiment with different styles or adjust the presentation to different output devices in accordance with Authoring Tool Accessiibiltiy Guidelines [ATAG] checkpoint 7.2.
As the position of the graphics elements is so essential when drawing images that is not part of the SVG style definitions but rather included in the SVG elements themselves. CSS can be used for all other style definitions.
In the following sections we have looked different aspects of separating style and content. We start with adding simple style definitions to SVG elements, then using classes to add more semantics and grouping to the elements, and binding the style definitions to different media. Finally, we illustrate how SVG allows authors to define their own style values to be used with fonts, masks, filters, fills etc. In this way it is often possible to prevent the loss of important content information that otherwise would be mixed with style definitions. This also supports the use of non-visual devices.
SVG uses CSS syntax and properties or XSL to specify formatting effects with stylesheets. Stylesheets give the author means to specify rich presentations, while ensuring that the different presentation-related needs of users can be met (refer to [WAI-WEBCONTENT], Checkpoint 3.3 and Guideline 3 in general and to [CSS-access]).
Although it is possible to specify styles as attributes of particular elements, or as part of a style element, we have chosen to demonstrate mostly external linked style sheets. With external stylesheets authors can more easily try out several different styles as they can supply a set of alternative stylesheets. An external stylesheet or a separate style element helps the author to make style changes to selected elements in one place.
Style rules using element selectors are preferred over the styles based on
id or class attribute selectors which are more
difficult to override by users. especially if every author uses their own private
. However, the use of classes can be valuable, for instance if the graphical elements or their combinations have
different semantic meanings (see examples in Section 4.2).class names
An inline style attribute may not be a very good choice as it is difficult to
manage by the authors, because each element style needs to be changed
separately. Although this may be managed by authoring tools, inline styles are
also more difficult to override by users who need to do it because of
disabilities, restrictions in their environment or limitations of the devices
that they are using. This is especially true if the inline style definitions
try to illustrate an implicit semantic grouping of the elements with no
class definitions to support it.
In SVG, the default rendering of a graphic elements is a black fill, so without a stylesheet all the presented shapes would be solid black. To avoid that, the previous examples provide a link to the simple stylesheet presented in Example 4.1. It contains simple style definitions for changing the rendering style of graphic elements for rectangles, circles and paths.
rect { fill: white; stroke: black;
stroke-width: 1
}
circle { fill: red; stroke: black;
stroke-width: 1
}
path { fill: white; stroke: black;
stroke-width: 1
}Example 4.1: A simple stylesheet for presenting rectangle, circle, and path elements (download stylesheet in 4.1).
It is possible to use style sheets also to provide a text or audio
rendering of an SVG image. The content of title and
desc elements may not be rendered at all without a stylesheet
definition but when the simple stylesheet presented in Example 4.2 is used
with Figure 2.2, the content will be presented as text. The style information
in Example 4.2 simply defines that no svg elements (such as the
graphics elements) are visible except the title and
desc elements. The g element containing both
title and desc elements is not visible as such.
However, when it contains visible elements it is rendered as a block while the
title and desc elements inside it are by default
inline elements. Furthermore, the title element directly inside
the svg element will be bigger and bolder than the other titles.
The !important is used after each definition to make sure that
other stylesheets will not interfere with this stylesheet. The result can be
seen in 2.4. The text may also be rendered as audio if the user can select
that option in her user agent.
svg { visibility: hidden !important }
title { visibility: visible !important }
desc { visibility: visible !important }
g { display: block !important }
svg > title {
font-size: 120% !important;
font-weight: bolder !important
}Example 4.2: A simple
stylesheet to present title and desc elements as
text (download stylesheet in 4.2).
If the user wants to get a rough idea of the graphics shapes used in an
image we can use the stylesheet presented in Example 4.3. It will render the
types of common graphics elements as text in between the title
and desc renderings. We can use the stylesheet, for instance, to
give some information of the graphical shapes of the Hub in Example 3.1 or
3.2. (With simple CSS we cannot explain things such as: a small red circle is
located in the bottom right corner of a rectangle. But it is possible that in
the future there will be specialized players to do that, for example by using
mathematical processing.) In case the text is rendered as audio, the
stylesheet also includes audio emphasis for the main title by using a louder
and lower voice.
svg { visibility: hidden !important }
title { visibility: visible !important }
desc { visibility: visible !important }
g { display: block !important }
svg > title {
font-size: 120% !important;
font-weight: bolder !important;
volume: 120% !important;
pitch: lower !important
}
rect:before {
visibility: visible;
content: "rectangle " !important
}
ellipse:before {
visibility: visible;
content: "ellipse " !important
}
circle:before {
visibility: visible;
content: "circle " !important
}
path[d ~= z]:before,
polygon:before {
visibility: visible;
content: "closed shape " !important
}Example 4.3: A simple stylesheet with text for graphical shapes (download stylesheet in 4.3).
As discussed earlier, it is sometimes necessary to use classes to add
semantics that is needed with style definitions to the image. In Example 4.4
we define an image of a computer to be used in the network we have been
building. The image uses a stylesheet which gives styles for the components of
the computer by using their class attributes. For instance, the
class outline defines part of the image of each component as an
outline with minimal graphical details. This could be used by low resolution
devices, including tactile graphic displays and small-screen devices.
It is a good idea to
provide a variety of ready-made stylesheets to cover different user needs.
A sample stylesheet for different devices is presented in Figure
4.3.
<?xml version="1.0"?>
<?xml-stylesheet href="http://www.w3.org/1999/09/SVG-access/svg-style" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN"
"http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">
<svg width="6in" height="4.5in" viewBox="0 0 600 450">
<defs>
<symbol id="terminal">
<desc>A common desktop PC</desc>
<g id="monitorStand" transform="translate(35 101)">
<title>Monitor stand</title>
<desc>One of those cool swivelling monitor stands that sit under the monitor</desc>
<rect class="outline-only" width="80" height="20" x="5" y="0" />
<path d="m5 0 S 15 10 45 12"/>
<path d="m85 0 S 75 10 45 12"/>
<path d="m5 20 L 15 10 S 45 12 75 10 L 85 20z"/>
</g>
<g id="monitor" transform="translate(0 -20)">
<title>Monitor</title>
<desc>A very fancy monitor</desc>
<rect class="outline" width="160" height="120"/>
<rect class="screen" width="138" height="95" x="11" y="12" />
</g>
<g id="processor" transform="translate(0 122)">
<title>The computer</title>
<desc>A desktop computer - broad flat box style</desc>
<rect class="outline" width="160" height="60" />
<g id="discDrive" transform="translate(70 8)">
<title>disc drive</title>
<desc>A built-in disc drive</desc>
<rect class="disc" width="58" height="3" x="12" y="8" />
<rect class="light" width="8" height="2" x="12" y="15" />
</g>
<circle cx="135" cy="40" r="5"/>
</g>
</symbol>
</defs>
<g id="Computer" transform="translate(180 85)">
<title>Computer</title>
<use xlink:href="#terminal"/>
</g>
</svg>Example 4.4: A computer image ( download computer image in 4.4).
Figure 4.5: A visual rendering of Example 4.4
The following stylesheet defines styles for the computer and its components in Example 4.4.
/* Some style for the computer */
svg {
/* Default styles to be inherited */
fill: white;
stroke: black;
stroke-width: 0.3}
.outline-only {visibility:hidden}
#terminal .outline {
fill: beige}
.computer {
fill: beige}
.light {
fill:lightgreen}
Example 4.6: A stylesheet for the computer image in Example 4.4 (download stylesheet in 4.6).
The rendering of SVG images can be defined to depend on the media used for presentation. This is beneficial for accessibility as people with disabilities often use alternative interaction devices. For instance some media, such as screens, are suited to high-resolution graphics, other media, such as braille, to lower resolution graphics, and some people use audio instead of graphics. CSS can be used to provide an appropriate default presentation for all these different devices.
In the following example we expand the stylesheet in Example 4.5 to provide
a simplified version of the image for low-resolution media, such as embossed,
braille, handheld, or projection devices. The appropriate style definitions
for those devices are selected by using CSS @media rules. Within
the simplified version we define that only the text and the outline of
graphics components will be rendered. For this we utilize the
outline and outline-only class elements defined in
Example 4.4. The screen media definitions contain the default style
definitions presented earlier in Example 4.5.
/* some style for low-resolution media */
@media embossed, braille, handheld, projection {
svg { visibility: hidden }
.outline, .outline-only {
visibility: visible;
fill: none;
stroke: black;
stroke-width: 5
}
text { visibility: visible }
}
@media screen {
/* Some style for the computer */
...
/* Some style for the other network components */
...
} Example 4.7: Extending stylesheet in Example 4.5 for different media (download full stylesheet in 4.7).
title of a group is used as rendered text so that
the text needs to be defined only once. The style definitions are gathered
together and referenced through the classes in the elements instead of using a
style attribute. This makes it easier to change the style when experimenting
with the logo. It is also easier to override styles for different classes of
elements which might be necessary sometimes. For instance, users with low
vision or with color deficiencies might need to do it even for logos.
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN"
"http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">
<svg width="1.5in" height="1in" viewBox="0 0 150 100">
<defs>
<mask id="shadowMask">
<text class="masktext" transform="translate(-3,-4)">C</text>
</mask>
<style type="text/css">
svg { font:BaseTwelve; font-size:45; stroke-width:1 }
.w3crect { fill:white; stroke:none }
.w3cline { fill:black; stroke:black }
.bluetext { fill:blue; stroke:blue }
.masktext { fill:white; stroke:white }
.shadowtext { fill:black; stroke:black;
mask: url(#shadowMask)}
</style>
</defs>
<g id="w3clogo" transform="translate(10,10)scale(1.2)">
<title id="logotitle">W3C</title>
<rect class="w3crect" x="-2" y="0" width="80" height="59"/>
<g transform="translate(0,47)">
<desc>blue W and 3 and white C with a shadow</desc>
<text>
<tspan class="bluetext">W3</tspan>
<tspan class="shadowtext">C</tspan>
</text>
</g>
<g transform="translate(-2,0)">
<desc>line below and on top of W3C</desc>
<path class="w3cline" d="M0,0H80"/>
<path class="w3cline" d="M0,59H80"/>
</g>
</g>
</svg>b)
Figure 4.9: A visual image of the W3C logo in 4.8 both with a) BaseTwelve and b) a system lacking Base Twelve, that uses a substitute font.
The defined logo can be used by linking to it from an image
element. If the user does not have the BaseTwelve font then another (in this
case default) font will be used to render the text. Because the font is used
by referencing it from a CSS style declaration a user can also easily override
it. Of course since this is a normal XML document a stylesheet can also be
used to render the content (the letters "W 3 C") as a text-based presentation.
A new font for the logo can be defined by using the font element.
The following example defines a font named w3clogofont. It includes the glyphs
for the characters W, 3, and C. Each glyph element has a
human-readable title, and the letter C has a description of the special effect
provided for it. Note that in the last version, the special shadow effect was
defined with a mask, whereas in this version the character is defined
directly. Authoring tools may choose to use either method for SVG fonts,
depending on performance considerations. However it is important that the text
content is in fact the required text - it would be possible to get the mask
effect by placing a white "C"over the black one, but the text would then be
W3CC - which is wrong. Use of SVG fonts allows designers to create extremely
complex fonts without losing the text itself.
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN"
"http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">
<svg width="1.5in" height="1in" viewBox="0 0 150 100">
<defs>
<style type="text/css">
svg { font:w3clogofont; font-size:45; stroke-width:1 }
.w3crect { fill:white; stroke:none }
.w3cline { fill:black; stroke:black }
.bluetext { fill: rgb(0,90,156); ;stroke:rgb(0,90,156); }
.whitetext { fill:white; stroke:white }
.shadowtext { fill:black; stroke:black}
glyph { fill: rgb(0,90,156) }
</style>
<font id="w3clogofont" units-per-em="55"
cap-height="39.604" x-height="25"
ascent="23" descent="12"
baseline="0" centerline="20"
topline="43" mathline="20" horiz-adv-x="2"
text-bottom="0" text-top="45"
ideographic="5" hanging="0" >
<desc>w3clogofont</desc>
<missing-glyph>
<text>*</text>
</missing-glyph>
<glyph unicode="W" horiz-adv-x="39.1157">
<title>W</title>
<path d="M 19.8022,0 L 26.8921,24.105 33.9819,0 39.1157,0
L 27.3809,39.604 26.8921,39.604 19.5576,15.0596
L 12.2236,39.604 11.7349,39.604 0,0 5.13379,0
L 12.2236,24.105 17.0151,7.87262 14.6685,0z"/>
</glyph>
<glyph unicode="3" horiz-adv-x="19.9981">
<title>3</title>
<path d="M 19.9981,26.893
C 19.9981 30.479 19.0445 33.494 17.1377 35.938
C 15.2305 38.383 12.7613 39.604 9.73001 39.604
<!-- some more path data ... -->
L 0.440491,0 19.5093,2.396 12.2725,14.864
C 14.8155 15.68 16.7383 17.163 18.042 19.314
C 19.3457 21.466 19.9981 23.992 19.9981 26.893z"/>
</glyph>
<glyph unicode="C" horiz-adv-x="20.416">
<title>C</title>
<desc>the shadow of a raised letter C</desc>
<path d="M 19.306,0
C 19.306 0 20.138 5.05597 20.138 5.05597
C 20.138 5.05597 17.194 10.688 17.194 10.688
<!-- some more path data ... -->
C 19.953 33.412 20.416 32.513 20.416 32.513z"/>
</glyph>
<hkern u1="W" u2="3" k="4.207"/>
</font>
</defs>
<g id="w3clogo" transform="translate(10,10) scale(1.2)">
<title id="logotitle">W3C</title>
<rect class="w3crect" x="-2" y="0" width="80" height="59"/>
<g transform="translate(0, 47)">
<desc>W3C logo</desc>
<text>
<tspan class="bluetext">W3</tspan>
<tspan class="shadowtext">C</tspan>
</text>
</g>
<g transform="translate(-2,0)">
<desc>line below and on top of W3C</desc>
<path class="w3cline" d="M0,0H80"/>
<path class="w3cline" d="M0,59H80"/>
</g>
</g>
</svg>Example 4.10: Defining a special font for the W3C logo (download W3C logo in 4.10).
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN"
"http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">
<svg width="6in" height="4.5in" viewBox="0 0 600 450">
<defs>
<radialGradient id="screenGrad" cx="0" cy="0" r="200">
<stop class="s100" offset="100%"/>
<stop class="s0" offset="0%"/>
</radialGradient>
<linearGradient id="discGrad">
<stop class="s100" offset="100%"/>
<stop class="s0" offset="0%"/>
</linearGradient>
</defs>
</svg>Figure 4.11: Defining some style values (download style values in 4.11). The following stylesheet (an extended version of the one in Example 4.7) uses the gradients we have defined to provide additional style for the computer in Example 4.4.
/* Some style for the computer */
#screenGrad .s100 {color:#AAA9A9 }
#screenGrad .s0 {color:black }
#discGrad .s100 {color:beige }
#discGrad .s0 {color:black }
svg {
/* Default styles to be inherited */
fill: white;
stroke: black;
stroke-width: 0.3}
.outline-only {visibility:none}
#terminal .outline {
fill: beige}
.computer {
fill: beige}
.screen {
fill: url(http://www.w3.org/1999/09/SVG-access/@@style-values@@#screenGrad)}
.disc {
fill: url(http://www.w3.org/1999/09/SVG-access/@@style-values@@#discGrad)}
.light {
fill:lightgreen}
/* Some style for the other network components */
...Figure 4.12: An alternative stylesheet for the computer image in Example 4.4 (download stylesheet in 4.12).
SVG also supports declarative definition of animations. For accessibility reasons, a user needs to be able to turn off animations (refer to [WAI-USERAGENT] , Checkpoints 3.5, and 3.6 and Guideline 3 in general) while still being presented with appropriate content (refer to [WAI-WEBCONTENT], Checkpoint ?.?). In addition, the SVG specification itself requires that an image can be rendered without animation, for static media such as print.
Finally, the users should be able to interact with links and other navigation means embedded in the SVG images either serially, by using alternative texts, or spatially with more visual means.
SVG uses the new event set provided in DOM 2 [DOM], which
support device-independent interactive content. This allows authors of SVG to
to ensure that interactive content does not rely on a particular type of
user's device (refer to [WAI-WEBCONTENT],
Checkpoints 9.3, and 6.4, and Guideline 9 in general) . Good authoring
practice will use the focusin, focusout and
activate events rather than the device specific events for
starting and ending the focus on an element or activating the element. For
instance, in Figure 5.1 the animation is triggered by an activate
event, using different parameters for different types of activations. An
accessible User Agent allows these triggering events to be generated from a
mouse or other pointer device (where available) as well as from a keyboard.
See WCAG checkpoints, and UA checkpoints. According to the User Agent
Accessibility Guidelines [WAI-USERAGENT], guideline
2 and especially checkpoint 2.1, user agents must also provide
device-independent ways of activating all application functions. For the sake
of brevity we have not described the animation functionality that can be
triggered in the animation example in Figure 5.1. However, if
the description did exist a user agent could make it available, along with
indications of how to trigger the functions. A text-based system that renders
the descriptions for the animations could be provided to the user as a
"context menu" listing available actions. Another possibility is to have a
user agent function or a
user XSLT stylesheet that added a link to the descriptions in a textual
rendering of an SVG image.
Animation can easily clarify some things in a presentation or add eye catching
movement to highlight some issues. But animation may also prevent users from
reading adjacent information in the page, and animations with a certain
refresh rate can trigger discomfort or seizures in users with photosensitive
epilepsy. Users may also have difficulties in making selections fast enough
if they are embedded in the animation. Therefore animations need to be
designed carefully so that they do not affect accessibility or usability of
the presentation. For instance, until user agents allow the user to freeze or
control the rate of an animation (refer to [WAI-USERAGENT] , Checkpoints 3.5, 3.6 and 3.8, and
guideline 3 in general), authors should ensure that users can pause or stop
moving content (refer to [WAI-WEBCONTENT],
Checkpoint 7.3, and guideline 7 in general). Note that in the case of SVG we
have assumed that it is a User Agent responsibility to provide this
functionality, rather than primarily an authoring responsibility.@@Should
discuss this as a transition responsiblity - it is in WCAG because there it
was up to the authors since User Agents were hopeless. Here ity shouldbe User
agents@@ The animation model in SVG is jointly developed by the SVG and
the Synchronized Multimedia Integration Language (SMIL) [SMIL-boston] working groups. The model offers a
declarative approach for creating dynamic Web content. In many cases, this is
simpler to understand and use than the programmatic model used in scripting
languages such as ECMAscript or Javascript, when a non-graphic presentation is
required. The animation model aims to allow user agents to provide information
about what an animation is supposed to do even when the rendering device or
environment does not have the media capabilities presumed by the author.
Because SVG is an XML application it provides user agents with Document Object
Model (DOM), as discussed in Section 7. The animate elements are
included in the DOM, and are therefore directly accessible to User Agents.
Since animation effects do not produce changes in the DOM, a non-visual
renderer will need to interpret the animation and render it in an appropriate
manner. An assistive technology with access to the DOM can be used in
conjunction with an SVG browser, since the DOM includes the animation
declaration. In that case the assistive technology can provide an appropriate
presentation of the effect. In the following example we use animation to
highlight the path of messages from Computer A to the outside world, or
between computer A and computer B. The first animation is activated by
hyperactivation, such as doubleclick with mouse, and the second one by a
simple activation, such as mouse click. We are animating both the style of the
selected graphical components with class attribute, and the
reference in the corresponding desc elements, so that the textual
descriptions are also available when a non-visual renderer is used.
<?xml version="1.0"?>
<?xml-stylesheet href="http://www.w3.org/1999/09/SVG-access/svg-style" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN"
"http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">
<svg width="6in" height="4.5in" viewBox="0 0 600 450">
<title id="mainTitle">Network</title>
<desc>An example of a computer network based on a hub</desc>
<!-- define descriptions to be animated -->
<defs>
<text>
<tspan id="cabledesc">A 10BaseT network cable</tspan>
<tspan id="cableanim">An active 10BaseT network cable</tspan>
</text>
</defs>
<!-- animation to illustrate messages travelling to the outside net-->
<animate xlink:href="#ComputerA" attributeName="class"
to="highlight" begin="id(ComputerA).(activate(2))"
dur="2s" fill="remove"/>
<animate xlink:href="#CableAref" attributeName="xlink:href"
to="#cableanim" begin="id(ComputerA).(activate(2))(+2s)"
dur="2s" fill="remove"/>
<animate xlink:href="#CableA" attributeName="class" to="highlight"
begin="id(ComputerA).(activate(2))(+2s)"
dur="2s" fill="remove"/>
<animate xlink:href="#hub" attributeName="class" to="highlight"
begin="id(ComputerA).(activate(2))(+4s)"
dur="2s" fill="remove"/>
<animate xlink:href="#CableNref" attributeName="xlink:href"
to="#cableanim" begin="id(ComputerA).(activate(2))(+6s)"
dur="2s" fill="remove"/>
<animate xlink:href="#CableN" attributeName="class"
to="highlight" begin="id(ComputerA).(activate(2))(+6s)"
dur="2s" fill="remove"/>
<!-- illustrate messages travelling between computer A and B -->
<animate xlink:href="#ComputerA" attributeName="class"
to="highlight" begin="id(ComputerA).(activate)"
dur="2s" fill="remove"/>
<animate xlink:href="#CableAref" attributeName="xlink:href"
to="#cableanim" begin="id(ComputerA).(activate)(+2s)"
dur="2s" fill="remove"/>
<animate xlink:href="#hub" attributeName="class"
to="highlight" begin="id(ComputerA).(activate)(+4s)"
dur="2s" fill="remove"/>
<animate xlink:href="#CableBref" attributeName="xlink:href"
to="#cableanim" begin="id(ComputerA).(activate)(+6s)"
dur="2s" fill="remove"/>
<animate xlink:href="#ComputerB" attributeName="class"
to="highlight" begin="id(ComputerA).(activate)(+8s)"
dur="2s" fill="remove"/>
<!-- Draw text. -->
<text x="0" y="-10">
<tref xlink:href="#mainTitle"/>
</text>
<!-- Use the hub image and its title and description information. -->
<g id="hub" transform="translate(180 200)">
<image xlink:href="hub.svg"/>
</g>
<!-- Use an external computer symbol. Scale to fit. -->
<g id="ComputerA" transform="translate(20 170)">
<title>Computer A</title>
<use xlink:href="computer#terminal" transform="scale(0.5)"/>
</g>
<!-- Use the same computer symbol. -->
<g id="ComputerB" transform="translate(300 170)">
<title>Computer B</title>
<use xlink:href="computer#terminal" transform="scale(0.5)"/>
</g>
<g id="CableA" transform="translate(107 88)">
<title>Cable A</title>
<!-- use a tref for the description so we can animate it -->
<desc> @@xmlspy says desc can only contain text!@@
<tref id="cableAref" xlink:href="#cabledesc"/>
</desc>
<!-- Draw Cable A. -->
<path d="M0,0c100,140 50,140 -8,160"/>
</g>
<g id="CableB" transform="translate(142 88)">
<title>Cable B</title>
<desc>
<tref id="cableBref" xlink:href="#cabledesc"/>
</desc>
<!-- Draw Cable B. -->
<path d="M0,0c100,180 110,160 159,160"/>
</g>
<g id="CableN" transform="translate(242 88)">
<title>Cable N</title>
<desc>
<tref id="cableNref" xlink:href="#cabledesc"/>
</desc>
<!-- Draw Cable N. -->
<path d="M0,0c0,-70 20,-50 60,-50"/>
</g>
</svg>Figure 5.1: Animations when computer A is activated (download network animation in 5.1).
With SVG it is possible to easily add links to the various parts of the
images. This is done by including the graphics component inside an a
element. The a element should always include an
xlink:title attribute that explains the target of the link and a
title and a desc element that describe the graphical
object that is being linked to the target. The textual explanations are very
important for the users with blindness or low vision as they often navigate
through the document by tabbing from link to link and having the link text
rendered by a speech synthesizer or a refreshable braille display (refer to
[WAI-WEBCONTENT], Checkpoint 13.3, Priority 2). Unless SVG User Agents make
this textual information available, authors will need to include text-based
links to content as well (refer to [WAI-WEBCONTENT] checkpoint 1.5).
On the other hand, users heavily relying on visual information, such as some users with cognitive disabilities, may need the graphical links to be easily identified by visual means. For instance, we can expand the width of the lines or change the color of the linked object, or add graphic marks near the graphic components included in a link. We can highlight the object when it gets focus, or add a button that will highlight all the links when pressed
It is important that the graphic links are made accessible both visually as well as by using redundant text links. The authors select the style for highlighting, as there is no similar way of highlighting graphical links as the use of underline is for the textual links. However, it should be easy for the users to change the highlighting. The basic means for this are provided by CSS and the user agents.
As users with nonvisual devices usually tab through the links in serial order they need to be readily able to create a good mental model of the structures and shortcuts that make the navigation more effective (refer to [WAI-WEBCONTENT], Checkpoints 13.4, 13.5, and Guideline 3 in general). For instance, the user can benefit if the links can be traversed in an order that better corresponds to the graphic structure, or if links related to a certain structure can be easily skipped. Navigation bars are an example of such a structure. It is possible to create them by using SVG. However, it is helpful if the bars are marked up so that it is possible to skip over the whole navigation bar or part of it, if it contains other bars, or jump back to the bar or it's subbar when so wished by the user (refer to [WAI-WEBCONTENT], Checkpoint 13.6, Priority 3).
switch element using system-required or
system-language attributes. The following example tests whether a
system supports animation, and if not provides further explanation. The
system-language attribute could be used instead (or as well) to
provide multiple versions of text according to the language, or even to
provide a sign-language version of descriptive text.
<?xml version="1.0"?>
<?xml-stylesheet href="http://www.w3.org/1999/09/SVG-access/svg-style" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN"
"http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">
<svg width="6in" height="4.5in" viewBox="0 0 600 450">
<title id="mainTitle">Network</title>
<desc>An example of a computer network based on a hub</desc>
<!-- define descriptions to be animated -->
<defs>
<text>
<tspan id="cabledesc">A 10BaseT network cable</tspan>
<tspan id="cableanim">An active 10BaseT network cable</tspan>
</text>
</defs>
<switch>
<g system-required="org.w3c.svg.dynamic">
<!-- If this is a dynamic player provide an animation effect to highlight messages travelling to the outside world-->
<animate xlink:href="#ComputerA" attribute="class"
to="highlight" begin="id(ComputerA).(activate(2))"
dur="2s" fill="remove"/>
<!-- the rest of the animation is cut out -->
...
</g>
<g>
<!-- Otherwise provide a different form of the same content
that is suitable e.g. for a mobile client with
fixed software or hardware capability.
For instance, some explanatory text or links. -->
</g>
</switch>
<!-- Draw text. -->
<text x="0" y="-10">
<tref xlink:href="#mainTitle"/>
</text>
<!-- Use the hub image and its title and description information. -->
<g id="hub" transform="translate(180 200)">
<image xlink:href="hub.svg"/>
</g>
<!-- The rest of the network image is cut out. -->
...
</g>
</svg>Figure 6.1: Providing alternative content
with switch element (download whole
network in 6.1).
All XML based languages inherit some accessibility benefits from XML and so does SVG. In this section we explain how these features can be used to increase the accessibility of SVG documents.
The more information the author can provide of an SVG image and its components the better it is for accessibility. Adding metadata to a document can help the user in searching for information, e.g. documents with a suitable accessibility rating. In this case we have used it to describe the image further - although reading the XML structure shows that the network consists of a hub, some cables and some computers, it does not explain which are connected to which. We have included an automatically generated image of the relationships described by the metadata - the same information can be generated by an assistive technology. Combining the information with the equivalent alternatives included in the image can be used to provide a navigable, described network in text, audio, or even using substituted icons (refer to [WAI-WEBCONTENT] Checkpoint ?.?). The following example uses XML namespaces [NAMESPACE] and the Resource Description Framework [RDF] to add some metadata about the cables connecting the computers and the hub to the earlier network image.
<?xml version="1.0"?>
<?xml-stylesheet href="http://www.w3.org/1999/09/SVG-access/svg-style" type="text/css"?>
<svg width="6in" height="4.5in" viewBox="0 0 600 450"
xmlns="http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">
<metadata>
<rdf:RDF
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:connect="http://www.w3.org/1999/08/29-svg-connections-in-RDF">
<rdf:Description about="#CableN">
<connect:ends rdf:resource="#socket5"/>
<connect:ends>Everything
</rdf:Description>
<rdf:Description about="#CableA">
<connect:ends rdf:resource="#socket1"/>
<connect:ends rdf:resource="#ComputerA"/>
</rdf:Description>
<rdf:Description about="#CableB">
<connect:ends rdf:resource="#socket2"/>
<connect:ends rdf:resource="#ComputerB"/>
</rdf:Description>
<rdf:Description about="#hub">
<connect:ends rdf:resource="#socket1"/>
<connect:ends rdf:resource="#socket2"/>
<connect:ends rdf:resource="#socket3"/>
<connect:ends rdf:resource="#socket4"/>
<connect:ends rdf:resource="#socket5"/>
</rdf:Description>
</rdf:RDF>
</metadata>
<title id="mainTitle">Network
<desc>An example of a computer network based on a hub
<!-- Draw text. -->
<text x="0" y="-10">
<tref xlink:href="#mainTitle"/>
</text>
<!-- Use the hub image and its title and description information. -->
<g id="hub" transform="translate(180 200)">
<image xlink:href="http://www.w3.org/1999/09/SVG-access/hub"/>
</g>
<!-- Use an external computer symbol. Scale to fit. -->
<g id="ComputerA" transform="translate(20 170)">
<title>Computer A</title>
<use xlink:href="http://www.w3.org/1999/09/SVG-access/computer#terminal" transform="scale(0.5)"/>
</g>
<!-- And so on to add the rest of the network... -->
</svg>Example 7.1: Additional metadata for the
Network and its components (Download complete SVG from
example 7.1). D
Figure 7.2: A graphic representation of the metadata that has been added. It shows the connections between the various elements, so it is possible to trace the links from any one component to the others.
text, title and desc
elements contain structured content, which can be marked up using
extension to the SVG DTD or using a separate and already-known namespace. In
the following example we include some SMIL to provide richer descriptions of
the image in Figure 5.1 (the example assumes that a stylesheet provides
positioning for the textstream).
<?xml-stylesheet href="http://www.w3.org/1999/09/SVG-access/svg-style" type="text/css"?>
<svg width="6in" height="4.5in" viewBox="0 0 600 450"
xmlns="http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">
<!-- define descriptions to be animated -->
<title id="mainTitle">Network</title>
<desc>An example of a computer network based on a hub
<smil xmlns="@">
<par>
<audio src="describe" title="The network described in audio"/>
<textstream src="describe.ts" title="how the network works"/>
</par>
</smil>
</desc>
<defs>
<text>
<tspan id="cabledesc">A 10BaseT network cable</tspan>
<tspan id="cableanim">An active 10BaseT network cable</tspan>
</text>
</defs>
<!-- Draw text. -->
<text x="0" y="-10">
<tref xlink:href="#mainTitle"/>
</text>
<!-- Use the hub image and its title and description information. -->
<g id="hub" transform="translate(180 200)">
<image xlink:href="hub.svg"/>
</g>
<!-- Rest of the example is cut out. -->
</svg> Figure 7.3: An example of structured text.