18 Backward Browser Compatibility, Descriptions and Titles


18.1 Introduction

SVG offers features to allow for:

18.2 The <althtml> element

Each <g> or graphics object can contain an <althtml> element which in turn can contain any HTML content, such as an HTML <img> element. This <althtml> mechanism provides for an alternative image representation of the contents of a particular graphics element or a particular collection of graphics elements. A common use of this mechanism is to provide an alternative image representation of a complete drawing for older browsers.

The following is an example. The <g> element consists of an <althtml> element and other graphics to draw a company logo. Browsers that support SVG would ignore the <althtml> element and render the remaining contents of the <g> element. Browsers that don't support SVG (i.e., older browsers) would ignore all elements except the <img> element, which it would recognize as an HTML <img> element, which it would then process as such.

<g>
  <althtml>
    <!-- </img> added to keep the document well-formed XML -->
    <img src="http://MyWebSite/CompanyLogo" alt="Company Logo"></img>
  </althtml>
  <!-- Company logo defined as vector data -->
</g>

18.3 The <description> and <title> elements

Each <g> or graphics object in an SVG drawing can supply a <description> and/or a <title> description string where the description is text-only. These description strings provide information about the graphics to visually impaired users, and (if the SVG drawing is included inline) old browsers will display the description strings instead of the drawings. Newer browsers which understand SVG in most cases will ignore the description strings (except that the <title> might be used to provide a tooltip). Both the <description> element and the <title> elements have the option of providing their text strings as character data or within an attribute string= to give site designers control over whether the string should be viewed in old browsers or by HTML/XML document reading software for the visually impaired.

The following is an example. In typical operation, the SVG processor would ignore (i.e., not display) the <description> 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 <description> and <title> elements) within the current text region using current text styling parameters.

<g>
  <description>
    This is a bar chart which shows 
    company sales by region ...
  </description>
  <title>
    Company sales by region
  </title>
  <!-- Bar chart defined as vector data -->
</g>