SVG offers features to allow for:
A user agent (UA) might not have the ability to process and view SVG documents. The following list outlines two of the backwards compatibility scenarios associated with SVG documents:
This <switch> element and feature-availability test facility (or their equivalents) are the recommended way for XML authors to provide an alternate representation to an SVG document, such as an image or a text string. The following example shows how to embed an SVG drawing within a SMIL 1.0 document such that an alternate image will display in the event the UA doesn't support SVG. (In this example, the SVG document is included via a URL reference. With some parent XML grammars it will also be possible to include an SVG document inline within the same file as its parent grammar.)
<?xml version="1.0" standalone="yes"?> <smil> <body> <!-- The SMIL <switch> element will process the first child element which tests true and skip past all others. --> <switch> <!-- The system-required attribute tests to see if the user agent supports SVG. If true, then render the file drawing.svg. --> <ref system-required="http://www.w3.org/Graphics/SVG/svg-19990706.dtd" type="image/svg" src="drawing.svg" /> <!-- Else, render the alternate image. --> <img src="alternate_image.jpg" /> </switch> </body> </smil>
<html> <body> <object type="image/svg" data="drawing.svg"> <!-- The contents of the <object> element (i.e., an alternate image) are drawn in the event the user agent cannot process the SVG drawing. --> <img src="alternate_image.jpg" alt="short description" /> </object> </body> </html>
Each <g> or graphics object in an SVG drawing can supply a <desc> and/or a <title> description string where the description is text-only. These description strings provide information about the graphics to visually impaired users. User agents which can process SVG in most cases will ignore the description strings (except that the <title> might be used to provide a tooltip).
The following is an example. In typical operation, the SVG user agent would ignore (i.e., not display) the <desc> element and the <title> elements and would render the remaining contents of the <g> element.
If this file were processed by an older browser (i.e., a browser that doesn't have SVG support), then the browser would treat the file as HTML. All SVG elements would not be recognized and therefore ignored. The browser would render all character data (including any character data within <desc> and <title> elements) within the current text region using current text styling parameters.
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg SYSTEM "http://www.w3.org/Graphics/SVG/svg-19990706.dtd"> <svg width="4in" height="3in"> <g> <title> Company sales by region </title> <desc> This is a bar chart which shows company sales by region. </desc> <!-- Bar chart defined as vector data --> </g> </svg>
Download this example
Description and title elements can contain marked-up text from other namespaces. Here is an example:
<?xml version="1.0" standalone="yes"?> <svg width="4in" height="3in" xmlns="http://www.w3.org/Graphics/SVG/svg-19990706.dtd"> <desc xmlns:mydoc="http://foo.org/mydoc"> <mydoc:title>This is an example SVG file</mydoc:title> <mydoc:para>The global description uses markup from the <mydoc:emph>mydoc</mydoc:emph> namespace.</mydoc:para> </desc> <g> <!-- the picture goes here --> </g> </svg>
Download this example