Scalable Vector Graphics have an obvious appeal to graphical designers and users: the following table shows the difference between a PNG format image and an SVG format image. The example is from the W3C Notes at http://www.w3.org/TR/SVG-access/.
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. The enlarged PNG version of the image has suffered a significant loss of quality, while the enlarged SVG version looks smooth and shows more details than before. Scalable graphics can help users with low vision make sense of an image at a size that best suits their needs.
| Small PNG image:
|
Small SVG image:
|
| Enlarged PNG image:
|
Enlarged SVG image:
|
As the authors of the 'Accessibility Features of SVG' Notes say:
"Scalable Vector Graphics [SVG] is an Extensible Markup Language (XML) application for producing Web graphics. SVG provides many accessibility benefits to disabled users, some originating from the vector graphics model, some inherited because SVG is built on top of XML, and some in the design of SVG itself, for example, SVG-specific elements for alternative equivalents.
SVG images are scalable - they can be zoomed and resized by the reader as needed. Scaling can help users with low vision and users of some assistive technologies (e.g., tactile graphic devices, which typically have a very low resolution)."
They continue:
"Structured images
The most common way authors make a raster image (e.g., GIF or PNG images) accessible on the Web is to provide a text equivalent that may be rendered with or without the image. Often, this text equivalent is the only information available for non-visual rendering, as the raster image is stored as a matrix of colored dots, generally with no structural information. Structural information can be added to any image as metadata, but managing it separately from the visible image is tedious, making it less likely that authors will create and use it with careful attention. SVG's vector-graphics format stores structural information about graphical shapes as an integral part of the image.
Alternative equivalents
In addition to image structure, SVG allows for alternative equivalents - content that users can access to help them understand the image. In particular, SVG authors to include a text description for each logical component of an image, and a text title to explain the component's role in the image as a whole. Text is considered very accessible to users with a range of disabilities (e.g., some vision impairments and some cognitive disabilities) since it may be rendered on screen, as speech, or as Braille using readily available assistive technology."
And from the glossary of the same document:
"Equivalent alternatives for content
Since rendered content in some forms is not always accessible to users with disabilities, authors must supply equivalent alternatives for content. In the context of this document, the equivalent must fulfill essentially the same function for the person with a disability (at least insofar as is feasible, given the nature of the disability and the state of technology), as the "primary" content does for the person without any disability. For example, the text "The Full Moon" might convey the same information as an image of a full moon when presented to users. Note that equivalent information focuses on fulfilling the same function. If the image is part of a link and understanding the image is crucial to guessing the link target, an equivalent must also give users an idea of the link target.
Equivalent alternatives of content include text equivalents (long and short, synchronized and unsynchronized) and non-text equivalents (e.g., an auditory description, or a visual track that shows a sign language translation of a written text, etc.). Please also consult the Web Content Accessibility Guidelines 1.0 [WCAG10]."
Finally the authors provide a number of techniques that can be used: see http://www.w3.org/TR/SVG-access/.
In addition, SVG provides other features that may be useful. Some of them are described below.
from http://www.w3.org/TR/SVG/struct.html#GElement
The grouping element of SVG allows the content producer to create a graphical object from a set of objects in a way that makes it possible to identify and thus describe each element separately. If the graphical elements can be described and their relationship described, the user without a grahical interface still has a good chance of 'reading' the image. As specified in SVG 1.0:
Overview
"The 'g' element is a container element for grouping together related graphics elements.
Grouping constructs, when used in conjunction with the 'desc' and 'title' elements, provide information about document structure and semantics. Documents that are rich in structure may be rendered graphically, as speech, or as braille, and thus promote accessibility.
A group of elements, as well as individual objects, can be given a name using the id attribute. Named groups are needed for several purposes such as animation and re-usable objects.
An example:<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="5cm" height="5cm"
xmlns="http://www.w3.org/2000/svg">
<desc>Two groups, each of two rectangles
</desc>
<g id="group1" fill="red" >
<rect x="1cm" y="1cm" width="1cm" height="1cm" />
<rect x="3cm" y="1cm" width="1cm" height="1cm" />
</g>
<g id="group2" fill="blue" >
<rect x="1cm" y="3cm" width="1cm" height="1cm" />
<rect x="3cm" y="3cm" width="1cm" height="1cm" />
</g>
<!-- Show outline of canvas using 'rect' element -->
<rect x=".01cm" y=".01cm" width="4.98cm" height="4.98cm"
fill="none" stroke="blue" stroke-width=".02cm" />
</svg>View this example as SVG (SVG-enabled browsers only)
from http://www.w3.org/TR/SVG/metadata.html
"Here is an example of how metadata can be included in an SVG document. The example uses the Dublin Core version 1.1 schema. (Other XML-compatible metadata languages, including ones not based on RDF, can be used also.)
<?xml version="1.0" standalone="yes"?>
<svg width="4in" height="3in"
xmlns = 'http://www.w3.org/2000/svg'>
<desc xmlns:myfoo="http://example.org/myfoo">
<myfoo:title>This is a financial report</myfoo:title>
<myfoo:descr>The global description uses markup from the
<myfoo:emph>myfoo</myfoo:emph> namespace.</myfoo:descr>
<myfoo:scene><myfoo:what>widget $growth</myfoo:what>
<myfoo:contains>$three $graph-bar</myfoo:contains>
<myfoo:when>1998 $through 2000</myfoo:when> </myfoo:scene>
</desc>
<metadata>
<rdf:RDF
xmlns:rdf = "http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:rdfs = "http://www.w3.org/2000/01/rdf-schema#"
xmlns:dc = "http://purl.org/dc/elements/1.1/" >
<rdf:Description about="http://example.org/myfoo"
dc:title="MyFoo Financial Report"
dc:description="$three $bar $thousands $dollars $from 1998 $through 2000"
dc:publisher="Example Organization"
dc:date="2000-04-11"
dc:format="image/svg+xml"
dc:language="en" >
<dc:creator>
<rdf:Bag>
<rdf:li>Irving Bird</rdf:li>
<rdf:li>Mary Lambert</rdf:li>
</rdf:Bag>
</dc:creator>
</rdf:Description>
</rdf:RDF>
</metadata>
</svg>
Last updated: 8 March 2002
