5 Document Structure

Contents

• 5.1 Defining an SVG document fragment: the 'svg' element
  • 5.1.1 Overview
  • 5.1.2 The 'svg' element
• 5.2 Grouping: the 'g' element
  • 5.2.1 Overview
  • 5.2.2 The 'g' element
• 5.3 The 'defs' element
• 5.4 The 'discard' element
• 5.5 The 'title' and 'desc' elements
  • 5.5.1 Applicable 'title' and 'desc'
  • 5.5.2 Multiple 'title' and 'desc' elements
  • 5.5.3 User interface behavior for 'title' and 'desc'
• 5.6 The 'use' element
• 5.7 The 'image' element
• 5.8 Conditional processing
  • 5.8.1 Conditional processing overview
  • 5.8.2 The 'switch' element
  • 5.8.3 The 'requiredFeatures' attribute
  • 5.8.4 The 'requiredExtensions' attribute
  • 5.8.5 The 'systemLanguage' attribute
  • 5.8.6 The 'requiredFormats' attribute
  • 5.8.7 The 'requiredFonts' attribute
• 5.9 External Resources resources
  • 5.9.1 The 'externalResourcesRequired' attribute
  • 5.9.2 Progressive Rendering rendering
  • 5.9.3 The 'prefetch' element
• 5.10 Common attributes
  • 5.10.1 Attributes common to all elements: 'class', 'id', 'xml:id' 'xml:id', 'xml:base', 'class', 'role', 'rel', 'rev', 'about', 'content', 'datatype', 'property', 'resource', and 'xml:base' 'typeof'
  • 5.10.2 The Attributes for character-content elements: 'xml:lang' and 'xml:space' attributes

5.1 Defining an SVG document fragment: the 'svg' element

5.1.1 Overview

An SVG document fragment consists of any number of SVG elements contained within an 'svg' element, including the 'svg' element.

An SVG document fragment can range from an empty fragment (i.e., no content inside of the 'svg' element), to a very simple SVG document fragment containing a single SVG graphics element such as a 'rect' , to a complex, deeply nested collection of container elements and graphics element s.

An SVG document fragment can stand by itself as a self-contained file or resource, in which case the SVG document fragment is an SVG document , or it can be embedded inline as a fragment within a parent XML document.

The following example shows simple SVG content embedded inline as a fragment within a parent XML document. Note the use of XML namespaces to indicate that the 'svg' and 'ellipse' elements belong to the SVG namespace:

<?xml version="1.0"?>
<parent xmlns="http://example.org"
       xmlns:svg="http://www.w3.org/2000/svg">

        xmlns:svg="http://www.w3.org/2000/svg">

   <!-- parent contents here -->
   <svg:svg width="4cm" height="8cm" version="1.2" baseProfile="tiny" viewBox="0 0 100 100">
      <svg:ellipse cx="50" cy="50" rx="40" ry="20" />
   </svg:svg>
   <!-- ... -->
</parent>

This example shows a slightly more complex (i.e., it contains multiple rectangles) stand-alone, self-contained SVG document:

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"
     width="5cm" height="4cm" viewBox="0 0 100 100">
  <desc>Four separate rectangles</desc>
  <rect x="20" y="20" width="20" height="20"/>
  <rect x="50" y="20" width="30" height="15"/>
  <rect x="20" y="50" width="20" height="20"/>
  <rect x="50" y="50" width="20" height="40"/>

  <!-- Show outline of canvas using 'rect' element -->
  <rect x="1" y="1" width="98" height="98"
        fill="none" stroke="blue" stroke-width="2" />
</svg>

An SVG document fragment can only contain one single 'svg' element, this means that 'svg' elements cannot appear in the middle of SVG content.

In all cases, for compliance with either the "Namespaces Namespaces in XML 1.0" 1.0 or the "Namespaces Namespaces in XML 1.1" 1.1 Recommendations [ XML-NS10 ][ , XML-NS ], an SVG namespace declaration must be in scope for the 'svg' element, so that all SVG elements are identified as belonging to the SVG namespace.

For example, an 'xmlns' attribute without a prefix could be specified on an 'svg' element, which means that SVG is the default namespace for all elements within the scope of the element with the 'xmlns' attribute:

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny">
  <desc>Demonstrates use of a default namespace prefix for elements.</desc>
  <rect width="7" height="3"/>
</svg>

If a namespace prefix is specified on the 'xmlns' attribute (e.g., xmlns:svg="http://www.w3.org/2000/svg") , then the corresponding namespace is not the default namespace, so an explicit namespace prefix must be assigned to the elements:

<?xml version="1.0"?>
<s:svg xmlns:s="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny">
  <s:desc>Demonstrates use of a namespace prefix for elements.
    Notice that attributes are not namespaced</s:desc>
  <s:rect width="7" height="3"/>
</s:svg>

Namespace declarations can also be specified on ancestor elements (illustrated in the above example 05_01, above ). For more information, refer to the "Namespaces Namespaces in XML 1.0" 1.0 or the "Namespaces Namespaces in XML 1.1" 1.1 Recommendations [ XML-NS10 ][ , XML-NS ].

5.1.2 The 'svg' element

    <define name='svg'>
      <element name='svg'>
        <ref name='svg.AT'/>
        <zeroOrMore><ref name='svg.G.group'/></zeroOrMore>
      </element>
    </define>
    <define name='svg.AT' combine='interleave'>
      <ref name='svg.Properties.attr'/>
      <ref name='svg.FocusHighlight.attr'/>
      <ref name='svg.External.attr'/>
      <ref name='svg.Focus.attr'/>
      <ref name='svg.AnimateSyncDefault.attr'/>
      <ref name='svg.Core.attr'/>
      <ref name='svg.WH.attr'/>
      <ref name='svg.PAR.attr'/>
      <optional>
        <attribute name='viewBox' svg:animatable='true' svg:inheritable='false'>
          <text/>
        </attribute>
      </optional>
      <optional>
        <attribute name='zoomAndPan' svg:animatable='false' svg:inheritable='false'>
          <choice>
            <value>disable</value>
            <value>magnify</value>
          </choice>
        </attribute>
      </optional>
      <optional>
        <attribute name='version' svg:animatable='false' svg:inheritable='false'>
          <choice>
            <value type='string'>1.0</value>
            <value type='string'>1.1</value>
            <value type='string'>1.2</value>
          </choice>
        </attribute>
      </optional>
      <optional>
        <attribute name='baseProfile' svg:animatable='false' svg:inheritable='false'>
          <choice>
            <value type='string'>none</value>
            <value type='string'>tiny</value>
            <value type='string'>basic</value>
            <value type='string'>full</value>
          </choice>
        </attribute>
      </optional>
      <optional>
        <attribute name='contentScriptType' svg:animatable='false' svg:inheritable='false'>
          <ref name='ContentType.datatype'/>
        </attribute>
      </optional>
      <optional>
        <attribute name='snapshotTime' svg:animatable='false' svg:inheritable='false'>
                                  <choice>
                                        <value type='string'>none</value>

          <choice>
            <value type='string'>none</value>

            <ref name='Clock-value.datatype'/>
                                  </choice>
                        </attribute>

          </choice>
        </attribute>

      </optional>
      <optional>
        <attribute name='timelineBegin' svg:animatable='false' svg:inheritable='false'>
          <choice>
            <value type='string'>onLoad</value>
            <value type='string'>onStart</value>
          </choice>
        </attribute>
      </optional>
      <optional>
        <attribute name='playbackOrder' svg:animatable='false' svg:inheritable='false'>
          <choice>
            <value type='string'>all</value>
            <value type='string'>forwardOnly</value>
          </choice>
        </attribute>
      </optional>
    </define>

Note that 'animateMotion' and 'animateTransform' are legal as children to 'svg' but don't apply to their 'svg' parents parent (since the 'svg' element doesn't have a 'transform' attribute). They only have any effect if the xlink:href 'xlink:href' attribute is attached to them specified so that they point to other elements. target a different element for animation.

Content produced by illustration programs originally targeted at print often has a fixed width and height, which will prevent it scaling for different display resolutions. The first example below has a fixed width and height in pixels, and no 'viewBox' .

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"
     width="300px" height="600px">

  <desc>...</desc>
</svg>

Normally, SVG content is designed to be scalable. In order for the SVG content to scale automatically to fill the available viewport , it must include a 'viewBox' attribute on the 'svg' element. This describes the region of world coordinate space (the initial user coordinate system) used by the graphic. This attribute thus provides a convenient way to design SVG documents to scale-to-fit into an arbitrary viewport .

The second example is scalable, using a 'viewBox' rather than a fixed width and height.

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" 
     baseProfile="tiny" viewBox="0 0 300 600">
  <desc>...</desc>
</svg>

Below is an example of 'snapshotTime' . An SVG User Agent user agent is displaying a number of SVG files in a directory by rendering a thumbnail image. It uses the 'snapshotTime' as the time to render when generating the image, thus giving a more representative static view of the animation. The appearance of the thumbnail for an SVG User Agent user agent that honors the 'snapshotTime' and for an SVG User Agent user agent that does not is shown below the example (UA which generates thumbnails based on 'snapshotTime' at the left, UA which doesn't generate thumbnails based on 'snapshotTime' at the right, e.g. a static viewer).

<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"
     viewBox="0 0 400 300" snapshotTime="3">

  <title>Snapshot time example</title>
  <desc>This example shows the use of snapshotTime on an animation of 
     color
   </desc>
   <rect x="60" y="85" width="256" height="65" fill="none" stroke="rgb(60,126,220)" stroke-width="4"/>

  <desc>This example shows the use of snapshotTime on an animation of color.</desc>
  <rect x="60" y="85" width="256" height="65" fill="none" stroke="rgb(60,126,220)" stroke-width="4"/>

    
   <text x="65" y="140" fill="rgb(60,126,220)" font-size="60">Hello SVG
      <animateColor attributeName="fill" begin="0" dur="3" from="white" to="rgb(60,126,220)"/>  
   </text> 

  <text x="65" y="140" fill="white" font-size="60">
    Hello SVG
    <animateColor attributeName="fill" begin="0" dur="3" from="white" to="rgb(60,126,220)"/>  
  </text> 

</svg>

5.2 Grouping: the 'g' element

5.2.1 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 'xml:id' attribute. Named groups are needed for several purposes such as animation and re-usable objects.

An example:

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"
     width="5cm" height="5cm" viewBox="0 0 5 5">
  <desc>Two groups, each of two rectangles</desc>
  <g xml:id="group1" fill="red">

    <desc>First group of two red rectangles</desc>
    <rect x="1" y="1" width="1" height="1" />
    <rect x="3" y="1" width="1" height="1" />

    <rect x="1" y="1" width="1" height="1"/>
    <rect x="3" y="1" width="1" height="1"/>

  </g>
  <g xml:id="group2" fill="blue" >

  <g xml:id="group2" fill="blue">

    <desc>Second group of two blue rectangles</desc>
    <rect x="1" y="3" width="1" height="1" />
    <rect x="3" y="3" width="1" height="1" />

    <rect x="1" y="3" width="1" height="1"/>
    <rect x="3" y="3" width="1" height="1"/>

  </g>
  <!-- Show outline of canvas using 'rect' element -->
  <rect x=".01" y=".01" width="4.98" height="4.98"
        fill="none" stroke="blue" stroke-width=".02" />

        fill="none" stroke="blue" stroke-width=".02"/>

</svg>

A 'g' element can contain other 'g' elements nested within it, to an arbitrary depth. Thus, the following is possible:

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"
     width="5cm" height="5cm">
  <desc>Groups can nest</desc>

  <g>
     <g>
       <g>
       </g>
     </g>
   </g>

    <g>
      <g>
      </g>
    </g>
  </g>

</svg>

Any element that is not contained within a 'g' is treated (at least conceptually) as if it were in its own group.

5.2.2 The 'g' element

    <define name='g'>
      <element name='g'>
        <ref name='g.AT'/>
        <zeroOrMore><ref name='svg.G.group'/></zeroOrMore>
      </element>
    </define>
    <define name='g.AT' combine='interleave'>
      <ref name='svg.Properties.attr'/>
      <ref name='svg.FocusHighlight.attr'/>
      <ref name='svg.Core.attr'/>
      <ref name='svg.External.attr'/>
      <ref name='svg.Conditional.attr'/>
      <ref name='svg.Focus.attr'/>
      <ref name='svg.Transform.attr'/>
    </define>

5.3 The 'defs' element

The 'defs' element is a container element for referenced elements. For understandability and accessibility reasons, it is recommended that, whenever possible, referenced elements be defined inside of a 'defs' . For performance reasons, authors should put the 'defs' element before other document content, so that all resources are available to be referenced.

The content model for 'defs' is the same as for the 'g' element; thus, any element that can be a child of a 'g' can also be a child of a 'defs' , and vice versa.

Elements that are descendants of a 'defs' are not rendered directly; they are prevented from becoming part of the rendering tree just as if the 'defs' element were a 'g' element and the 'display' property were set to none . Note, however, that the descendants of a 'defs' are always present in the source tree and can be referenced by other elements. The actual value of the 'display' property on the 'defs' element or any of its descendants does not change the rendering of these elements or prevent these elements from being referenced.

    <define name='defs'>
      <element name='defs'>
        <ref name='defs.AT'/>
        <zeroOrMore><ref name='svg.G.group'/></zeroOrMore>
      </element>
    </define>
    <define name='defs.AT' combine='interleave'>
      <ref name='svg.Properties.attr'/>
      <ref name='svg.Core.attr'/>
    </define>

Creators of SVG content are encouraged to place all elements which are targets of local IRI reference s (except of course for animation targets) within a 'defs' element which is a direct child of one of the ancestors of the referencing element. For example:

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"
     width="100%" height="100%" viewBox="0 0 8 3">     

  <desc>Local URI references within ancestor's 'defs' element.</desc>
  <defs>
    <linearGradient xml:id="Gradient01">
      <stop offset="0.2" stop-color="#39F" />
      <stop offset="0.9" stop-color="#F3F" />

      <stop offset="0.2" stop-color="#39F"/>
      <stop offset="0.9" stop-color="#F3F"/>

    </linearGradient>
  </defs>
  <rect x="1" y="1" width="6" height="1" 
        fill="url(#Gradient01)"  />

  <rect x="1" y="1" width="6" height="1" fill="url(#Gradient01)"/>

  <!-- Show outline of canvas using 'rect' element -->
  <rect x=".01" y=".01" width="7.98" height="2.98"
        fill="none" stroke="blue" stroke-width=".02" />
</svg>

In the document above, the linear gradient is defined within a 'defs' element which is the direct child of the 'svg' element, which in turn is an ancestor of the 'rect' element which references the linear gradient. Thus, the above document conforms to the guideline.

5.4 The 'discard' element

The 'discard' element allows authors to specify the time at which particular elements are to be discarded, therefore thereby reducing the resources required by an SVG UA. user agent. This is particularly useful for the to help SVG viewers to handle conserve memory while displaying long-running documents. This element will not be processed by static SVG viewers.

The 'discard' element may occur wherever the animate 'animate' element may.

    <define name='discard'>
      <element name='discard'>
        <ref name='discard.AT'/>
        <ref name='discard.CM'/>
      </element>
    </define>
    <define name='discard.AT' combine='interleave'>
      <ref name='svg.Core.attr'/>
      <ref name='svg.XLink.attr'/>
      <ref name='svg.AnimateBegin.attr'/>
      <ref name='svg.Conditional.attr'/>
    </define>
    <define name='discard.CM'>
      <zeroOrMore>
        <ref name='svg.Desc.group'/>
        <ref name='svg.Handler.group'/>
      </zeroOrMore>
    </define>

The 'discard' element has an implicit simple duration of 'indefinite' "indefinite" . As soon as the element's active duration starts, the SVG User Agent user agent discards the element identified by the 'xlink:href' attribute. attribute ([ SMIL21 ], section 10.4.3). The removal operation acts as if the method removeChild were called on the parent of the target element with the target element as parameter. The SVG User Agent user agent must remove the target node as well as all of its attributes and descendants. If the attribute is not specified, the effect is as if a value of "0s" were specified. This indicates that the target element should be discarded immediately. Animatable : no. SVG User Agents must discard an element when it is the target of a 'discard' element and the time specified by the value of the 'begin' attribute of this 'discard' element is reached. When an element is discarded, all its descendants must be discarded as well.

After removal of the target element , the 'discard' element is no longer useful. It must also be discarded following the target element removal. If the 'xlink:href' attribute has an invalid IRI reference (the target element did not exist, for example), the 'discard' element itself must still be removed following activation.

Seeking backwards in the timeline ([ SMIL21 ], section 10.4.3) must not re-insert the discarded elements. Discarded elements are intended to be completely removed from memory. So, authors are encouraged to set the 'playbackOrder' attribute to forwardOnly "forwardOnly" when using the 'discard' element.

The 'discard' element itself can be discarded prior to its activation, in which case it will never trigger the removal of its own target element. UA's User agents must allow the 'discard' element to be the target of another 'discard' element.

The following example shows demonstrates a simple usage of the 'discard' element. The list below describes relevant happenings behavior in the document timeline of this example:

At time = 0:

When the document timeline starts, the blue ellipse starts to move down the page.

At time = 1 second:

The red rectangle starts moving up the page.

At time = 2 seconds:

The animateTransform 'animateTransform' on the ellipse 'ellipse' ends. The ellipse 'ellipse' and its children are also discarded, as it is the target element of a discard 'discard' with begin='2'. begin="2" . The green polygon 'polygon' starts to move across the page.

At time = 3 seconds:

The animation on the red rectangle ends. The rectangle and its children are discarded as it is the target of a discard 'discard' element with begin='3'. begin="3" .

At time = 4 seconds:

The animation on the green triangle ends. The green polygon 'polygon' and its children are discarded as it is the target of a discard 'discard' element with begin='4'. begin="4".

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" 
    width="352" height="240" playbackOrder="forwardOnly">
    
    <ellipse cx="98.5" cy="17.5" rx="20.5" ry="17.5" fill="blue" stroke="black" 
        transform="translate(9 252) translate(3 -296)">
        <animateTransform attributeName="transform" begin="0s" dur="2s" fill="remove"
            calcMode="linear" type="translate" additive="sum" from="0 0" to="-18 305"/>
        <discard begin="2s"/>
    </ellipse>
    
    <rect x="182" y="-39" width="39" height="30" transform="translate(30 301)" fill="red" stroke="black">
        <animateTransform attributeName="transform" begin="1s" dur="2s" fill="remove"
            calcMode="linear" type="translate" additive="sum" from="0 0" to="-26 -304"/>
        <discard begin="3s"/>
    </rect>

     width="352" height="240" playbackOrder="forwardOnly">

    
    <polygon points="-66,83.5814 -43,123.419 -89,123.419" fill="green" stroke="black" 
        transform="matrix(1 0 0 1.1798 0 -18.6096)">
        <animateTransform attributeName="transform" begin="2s" dur="2s"
            fill="remove" calcMode="linear" type="translate" additive="sum" from="0 0"
            to="460 63.5699"/>
        <discard begin="4s"/>
    </polygon>

  <ellipse cx="98.5" cy="17.5" rx="20.5" ry="17.5" fill="blue" stroke="black" 
           transform="translate(9 252) translate(3 -296)">
    <animateTransform attributeName="transform" begin="0s" dur="2s" fill="remove"
                      calcMode="linear" type="translate" additive="sum"
                      from="0 0" to="-18 305"/>
    <discard begin="2s"/>
  </ellipse>
  
  <rect x="182" y="-39" width="39" height="30" fill="red" stroke="black"
        transform="translate(30 301)">
    <animateTransform attributeName="transform" begin="1s" dur="2s" fill="remove"
                      calcMode="linear" type="translate" additive="sum"
                      from="0 0" to="-26 -304"/>
    <discard begin="3s"/>
  </rect>
  
  <polygon points="-66,83.5814 -43,123.419 -89,123.419" fill="green" stroke="black" 
           transform="matrix(1 0 0 1.1798 0 -18.6096)">
    <animateTransform attributeName="transform" begin="2s" dur="2s"
                      fill="remove" calcMode="linear" type="translate" additive="sum"
                      from="0 0" to="460 63.5699"/>
    <discard begin="4s"/>
  </polygon>

</svg>

5.5 The 'desc' 'title' and 'title' 'desc' elements

Each container element or graphics element in an SVG document may supply a contain one or more of each of the 'title' and 'desc' and may also supply a descriptive elements .The 'title' description. element must contain a short title for the container or graphics element containing it. This short title must provide information supplementary to the rendering of the element, but will normally not be sufficient to replace it. The 'desc' element contains a longer, more detailed description for the container or graphics element containing it. This description should must be usable as replacement content for cases when the user cannot see the rendering of the SVG element for some reason. The

Authors should always provide at least a 'title' element contains , and preferably a short title for 'desc' ,as an immediate child element to the container 'svg' or graphics element within an SVG document, and to every significant individual graphical composition within the document. The 'title' containing it. This short title provides information supplementary child element to an 'svg' element serves the rendering purposes of identifying the element, but is not sufficient to replace it. These are typically text, but can be content in other markup languages (see foreign namespaces ). When of the given current SVG document fragment is rendered . Since users often consult documents out of context, authors should provide context-rich titles. Thus, instead of a title such as SVG on visual media, "Introduction", which doesn't provide much contextual background, authors should supply a title such as "Introduction to Medieval Bee-Keeping" instead. For reasons of accessibility, 'desc' SVG user agents and should always make the content of the 'title' elements are not rendered as part of child element to the graphics. SVG User Agents 'svg' may, however, element available to users (See the User Agent Accessibility Guidelines 1.0 [ UAAG ]). The mechanism for example, display doing so depends on the 'title' SVG user agent element (e.g., as a tooltip, as the pointing device moves over particular elements. Alternate caption, spoken).

When descriptive elements are present, alternate presentations of the document are possible, both visual and aural, which display the 'desc' 'title' and 'title' 'desc' elements but do not display 'path' elements or other graphics elements .

For deep hierarchies, and for following both the use 'title' element references, it is sometimes desirable to allow and the user to control how deep they drill down into descriptive text. 'desc' Schema: desc element, the content must be plain text. To provide structured data in other markup languages, authors should use the <define name='desc'> <element name='desc'> <ref name='DTM.AT'/> <ref name='DTM.CM'/> </element> </define> 'metadata' <define name='DTM.AT' combine='interleave'> <ref name='svg.Core.attr'/> </define> or <define name='DTM.CM'> <text/> </define>   'foreignObject' Schema: title <define name='title'> <element name='title'> <ref name='DTM.AT'/> <ref name='DTM.CM'/> </element> </define>   The following elements instead, as appropriate. When markup is an example. In typical operation, included as a child of the SVG User Agent 'title' would not render or the 'desc' and , a user agent should present only the text content of the descriptive elements .

Note that the 'title' elements but would render element is distinct in purpose from the remaining contents 'xlink:title' attribute of the 'g' 'a' element. Example: 05_11.svg <?xml version="1.0"?> <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"> <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> The 'xlink:title' attribute content is intended not to describe the current resource, but the nature of the linked resource.

5.5.1 Applicable 'desc' 'title' and 'title' 'desc'

Normally, the descriptive elements that describe a container element or graphics element are direct children of that element. However, SVG documents can contain marked-up text from other namespaces. Here is an example: Example: 05_12.svg <?xml version="1.0"?> <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"> <desc xmlns:mydoc="http://example.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> Authors should always provide have a rich structure, with nested elements each potentially containing 'title' or 'desc' child element to the elements, as well as 'svg' 'use' element within a stand-alone SVG document. The elements with 'title' child element to an or 'svg' 'desc' in both the 'use' element serves itself and in the purposes referenced content. Because of identifying this complex structure, and because the content of descriptive elements may or may not be present at any level, the given applicable SVG document fragment descriptive elements . Since users often consult documents out of context, authors should provide context-rich titles. Thus, instead of a title such as "Introduction", which doesn't provide much contextual background, authors should supply a title such for any given content is determined by the structure, as "Introduction to Medieval Bee-Keeping" instead. described here.

For reasons of accessibility, each SVG User Agents container element should always make the content of or graphics element , the applicable descriptive elements shall be those that are most shallowly nested in that document fragment, without taking into account descriptive elements in any 'title' 'use' child element to shadow trees .If the document fragment has no descriptive elements ,and it is a 'svg' 'use' element available element, the applicable descriptive elements shall be those contained in the shadow tree .If no descriptive elements are found in the document fragment or any shadow tree ,the applicable descriptive elements shall be the nearest ancestor descriptive elements .This algorithm allows authors to users (See reuse descriptive elements defined in referenced resources when desired, or to override them as needed, as well as to describe whole groups of elements.

Note that the User Agent Accessibility Guidelines 1.0 [ UAAG applicable descriptive elements ]). The mechanism for doing so depends on the elements in a SVG User Agent container element does not necessarily entail a description of the individual graphical elements in question, but rather their membership in a more inclusive group (e.g., as if the image is of a caption, spoken). basket of fruit, with a title of "Fruit Basket" for the containing group and no other descriptive elements ,while no one piece of fruit is a fruit basket, the title would still be applicable through inclusion). Authors should take care to designate all important elements with their own descriptive elements to avoid misconstrued identities and entailments.

5.5.2 Multiple 'title' and 'desc' elements

It is strongly recommended that at most one 'desc' 'title' and at most one 'title' 'desc' element appear as a child of any particular element, and that these elements appear before any other child elements (except possibly 'metadata' elements) or character data content. If SVG User Agents user agents need to choose among multiple 'desc' 'title' or 'title' 'desc' elements for processing (e.g., to decide which string to use for a tooltip), the user agent shall choose the first one of each of the test available descriptive elements as the applicable elements or elements.

Authors may wish to deliberately provide multiple descriptive elements ,such as to provide alternate content for different languages. In this case, the author should use conditional processing attributes to allow the user agent to select the best choice according to the user's preferences. For example, the 'systemLanguage' attribute, with or without the 'switch' element, will determine the applicable descriptive elements .

5.5.3 User interface behavior for 'title' and 'desc'

When the current SVG document fragment is rendered as SVG on visual media, 'title' and 'desc' elements are not rendered as part of which resolve the canvas .Often, the intent of authors is for descriptive elements to true. remain hidden (e.g., for aesthetic reasons in pieces of art). However, other authors may wish for this content to be displayed, and providing tangible benefit to these authors encourages best practice in providing descriptive elements .In this case, authors are encouraged to use the 'role' attribute, with the value aria:tooltip (as described in ARIA ) to indicate their intent.

It is strongly recommended that when the appropriate 'role' attribute value is present, user agents display the text content of the applicable 'title' and 'desc' elements in a highly visible manner supported by the user agent, such as in a tooltip or status bar, when the pointing device is hovered over the described element or elements, or when the described element is given focus (e.g., through keyboard or pointer navigation). If a tooltip is provided, the user agent is recommended to display the applicable title and descriptions on separate lines, title first, with font styling that distinguishes the two. For long descriptions, the tooltip may wrap the text, and truncate longer passages to a reasonable length. A user agent may preserve spaces and line breaks in the text content in order to structure the presentation of the text.

When an element with descriptive elements is itself the child of an 'a' element with an 'xlink:title' attribute, the user agent should display as much of the available information as possible. The user agent is suggested to display the 'xlink:title' attribute value on a separate line, with a label to identify it, such as "link: ". Commonly, many user agents display the URI of the link (i.e., the value of the 'xlink:href' attribute) in the status bar or other display area. This information is important, and should not be overridden by any descriptive element content, but may be supplemented by such content.

The rootmost 'title' element should be used as the document title, and for stand-alone SVG documents, the title should not be displayed as a tooltip, but rather in the browser chrome (as appropriate for the user agent). For embedded SVG documents, such as an SVG image referenced in an HTML document, displaying the title and description as a tooltip is more appropriate, and the user agent should do so.

If a user agent is an accessibility tool, all available descriptions of the currently focused or hovered element should be exposed to the user in a categorical manner, such that the user may selectively access the various descriptions. The 'desc' element, in particular, may be given different semantic distinctions by use of values in the 'role' attribute, such as the ARIA ontology values aria:description for textual equivalents of the graphics, and aria:tooltip for giving instructions to the user.

    <define name='desc'>
      <element name='desc'>
        <ref name='DTM.AT'/>
        <ref name='DTM.CM'/>
      </element>
    </define>
    <define name='DTM.AT' combine='interleave'>
      <ref name='svg.Core.attr'/>
      <ref name='svg.Conditional.attr'/>
      <ref name='svg.Media.attr'/>
    </define>
    <define name='DTM.CM'>
      <text/>
    </define>

    <define name='title'>
      <element name='title'>
        <ref name='DTM.AT'/>
        <ref name='DTM.CM'/>
      </element>
    </define>

The following is an example in which an SVG user agent might present the 'title' and 'desc' elements as a tooltip.

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     version="1.1"
     width="100%" height="100%" viewBox="0 0 160 170">
  <title>Titles and Descriptions</title>
  <desc>An example of how the contents of the 'title' and 'desc' elements may be presented in a user agent.</desc>
  <defs>
    <polygon id="beeCell" points="-13.75,-22.75 13.75,-22.75 26.25,0 13.75,22.75 -13.75,22.75 -26.25,0" stroke="yellow" stroke-width="3" stroke-linejoin="round">
      <title role="aria:tooltip">Beehive cell</title>
      <desc role="aria:tooltip">A simple hexagon with a yellow outline and no fill.</desc>
      <metadata>cx="26.25" cy="22.75" width="52.5" height="45.5"</metadata>
    </polygon>
     
  </defs>
  <g fill="white">
    <use xlink:href="#beeCell" x="30" y="60" />
    <use xlink:href="#beeCell" x="75" y="35" />
    <use xlink:href="#beeCell" x="120" y="60" />
    <use xlink:href="#beeCell" x="120" y="110" />
    <use xlink:href="#beeCell" x="30" y="110" />
    <use xlink:href="#beeCell" x="75" y="135" />
    <a xlink:href="http://www.example.com/bees.html" xlink:title="Beekeeper's Hive: an apiary resource">
      <title role="aria:tooltip">Link to Beekeeper's Hive: an apiary resource</title>
      <use xlink:href="#beeCell" x="75" y="85" fill="#9900CC">
        <title role="aria:tooltip">Queen's Cell</title>
        <desc role="aria:tooltip">
          A hexagonal beehive cell.
          
          A purple hexagon in the middle of 6 other empty hexagons, symbolizing that it's filled with royal jelly.
        </desc>
      </use>
    </a>  
     
  </g>
</svg>

5.6 The 'use' element

Any 'g' or graphics element is potentially a template object that can be re-used (i.e. "instantiated") in the SVG Document document via a 'use' element, thus creating an instance tree. The 'use' element references another element and indicates that the graphical contents of that element is to be included and drawn at that given point in the document.

Unlike 'animation' , the 'use' element cannot reference entire files.

Besides what is described about the 'use' element in this section important restrictions for 'use' can be found in the Reference Section .

The 'use' element has optional attributes 'x' and 'y' which are used to place the referenced element and its contents into the current coordinate system.

The effect of a 'use' element is as if the SVG Element element contents of the referenced element were deeply cloned into a separate non-exposed DOM tree which had the 'use' element as its parent and all of the 'use' element's ancestors as its higher-level ancestors. Because the cloned DOM tree is non-exposed, the SVG Document Object Model (DOM) only contains the 'use' element and its attributes. The SVG DOM does not show the referenced element's contents as children of the 'use' element. The deeply-cloned tree, also referred to as the shadow tree, is then kept in synchronization with the contents of the referenced element, so that any animation, DOM manipulation, or non-DOM interactive state occurring on the referenced element are also applied to the 'use' element's deeply-cloned tree.

Relative IRIs on nodes a node in a shadow trees tree are resolved relative to any 'xml:base' on the node itself, then recursively on any 'xml:base' on their its parentNode , and finally any 'xml:base' on the ownerDocument if there is no parentNode .

Property inheritance works as if the referenced element had been textually included as a deeply cloned child of the 'use' element. The referenced element inherits properties from the 'use' element and the 'use' element's ancestors. An instance of a referenced element does not inherit properties from the referenced element's original parents.

The behavior of the 'visibility' property conforms to this model of property inheritance. Thus, a computed value of visibility='hidden' visibility="hidden" on a 'use' element does not guarantee that the referenced content will not be rendered. If the 'use' element has a computed value of visibility='hidden' visibility="hidden" and the element it references specifies visibility='hidden' visibility="hidden" or visibility='inherit' visibility="inherit" , then that element will be hidden. However, if the referenced element instead specifies visibility='visible' visibility="visible" , then that element will be visible even if the 'use' element specifies visibility='hidden' visibility="hidden" .

If an event listener is registered on a referenced element, then the actual target for the event will be the SVGElementInstance object within the "instance tree" corresponding to the given referenced element.

The event handling for the non-exposed tree works as if the referenced element had been textually included as a deeply cloned child of the 'use' element, except that events are dispatched to the SVGElementInstance objects. The event's target and currentTarget attributes are set to the SVGElementInstance that corresponds to the target and current target elements in the referenced subtree. An event propagates through the exposed and non-exposed portions of the tree in the same manner as it would in the regular document tree: first going to the target of the event, then bubbling back through non-exposed tree to the 'use' element and then back through regular tree to the rootmost svg 'svg' element in the bubbling phase.

An element and all its corresponding SVGElementInstance objects share an event listener list. The currentTarget attribute of the event can be used to determine through which object an event listener was invoked.

Animations on a referenced element will cause the instances to also be animated.

As listed in the Reference Section the 'use' element is not allowed to reference an 'svg' element element.

A 'use' element has the same visual effect as if the 'use' element were replaced by the following generated content:

• In the generated content, the 'use' will be replaced by 'g' , where all attributes from the 'use' element except for 'x' , 'y' , 'xml:base' and 'xlink:href' are transferred to the generated 'g' element. An additional transformation translate(x,y) translate( x ,y ) is appended to the end (i.e., right-side) of the 'transform' attribute on the generated 'g' , where 'x' x and 'y' y represent are the values of the 'x' and 'y' attributes of the 'use' element. The referenced object and its contents are deep-cloned into the generated tree.

except for resolution of relative IRI references as noted above and until the referenced elements are modified. Note also that any changes to the used element are immediately reflected in the generated content.

When a 'use' references another element which is another 'use' or whose content contains a 'use' element, then the deep cloning approach described above is recursive. However, a set of references that directly or indirectly reference a element to create a circular dependency is an error, as described in the References section.

    <define name='use'>
      <element name='use'>
        <ref name='use.AT'/>
        <ref name='use.CM'/>
      </element>
    </define>
    <define name='use.AT' combine='interleave'>
      <ref name='svg.Properties.attr'/>
      <ref name='svg.FocusHighlight.attr'/>
      <ref name='svg.Core.attr'/>
      <ref name='svg.Conditional.attr'/>
      <ref name='svg.Transform.attr'/>
      <ref name='svg.XLinkEmbed.attr'/>
      <ref name='svg.Focus.attr'/>
      <ref name='svg.External.attr'/>
      <ref name='svg.XY.attr'/>
    </define>
    <define name='use.CM'>
      <zeroOrMore>
        <choice>
          <ref name='svg.Desc.group'/>
          <ref name='svg.Animate.group'/>
          <ref name='svg.Handler.group'/>
        </choice>
      </zeroOrMore>
    </define>

Below are two examples of the 'use' element, for element. For another example see use and animation example .

Example 05_13 below has a simple 'use' on a 'rect' .

Example: 05_13.svg

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     version="1.2" baseProfile="tiny"
     width="10cm" height="3cm" viewBox="0 0 100 30">     
  <desc>Simple case of 'use' on a 'rect'</desc>

  <defs>
    <rect xml:id="MyRect" width="60" height="10"/>
  </defs>
  <rect x=".1" y=".1" width="99.8" height="29.8"
        fill="none" stroke="blue" stroke-width=".2" />

        fill="none" stroke="blue" stroke-width=".2"/>

  <use x="20" y="10" xlink:href="#MyRect" />
</svg>

The visual effect would be equivalent to the following document:

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
     version="1.2" baseProfile="tiny"
     width="10cm" height="10cm" viewBox="0 0 100 30">
  <desc>
    The equivalent rendering tree of example 05_13 once the
    'use' element's shadow tree has been created.
  </desc>

  <!-- 'defs' section left out -->
  <rect x=".1" y=".1" width="99.8" height="29.8"
        fill="none" stroke="blue" stroke-width=".2" />
  <!-- Start of generated content. Replaces 'use' -->

  <!-- begin shadow tree content that the <use> element in the original
       file would generate -->

  <g transform="translate(20,10)">
    <rect width="60" height="10"/>
  </g>
  <!-- End of generated content -->

  <!-- end of shadow tree content -->

</svg>

Example 05_17 illustrates what happens when a 'use' has a transform 'transform' attribute.

Example: 05_17.svg

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     version="1.2" baseProfile="tiny"
     width="10cm" height="3cm" viewBox="0 0 100 30">
  <desc>'use' with a 'transform' attribute</desc>

  <defs>
    <rect xml:id="MyRect" x="0" y="0" width="60" height="10"/>
  </defs>
  <rect x=".1" y=".1" width="99.8" height="29.8"
        fill="none" stroke="blue" stroke-width=".2" />
  <use xlink:href="#MyRect"
       transform="translate(20,2.5) rotate(10)" />

        fill="none" stroke="blue" stroke-width=".2"/>
  <use xlink:href="#MyRect" transform="translate(20,2.5) rotate(10)"/>

</svg>

The visual effect would be equivalent to the following document:

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     version="1.2" baseProfile="tiny"
     width="100%" height="100%" viewBox="0 0 100 30">
  <desc>'use' with a 'transform' attribute</desc>

  <!-- 'defs' section left out -->
  <rect x=".1" y=".1" width="99.8" height="29.8"
        fill="none" stroke="blue" stroke-width=".2" />
  <!-- Start of generated content. Replaces 'use' -->

        fill="none" stroke="blue" stroke-width=".2"/>
  <!-- begin shadow tree content that the <use> element in the original
       file would generate -->

  <g transform="translate(20,2.5) rotate(10)">
    <rect x="0" y="0" width="60" height="10"/>
  </g>
  <!-- End of generated content -->

  <!-- end of shadow tree content-->

</svg>

Example use-bubble-example-1.svg illustrates four cases of event bubbling with use elements. In case 1, all instances of the 'rect' element are filled blue on mouse over. For cases 2 and 3, in addition to the 'rect' elements being filled blue, a black stroke will also appear around the referencing rectangle on mouse over. In case 4, all the rectangles turn blue on mouse over, and a black stroke appears on mouse click.

Example: use-bubble-example-1.svg

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:ev="http://www.w3.org/2001/xml-events"
     version="1.2" baseProfile="tiny">

  <use fill="red" x="5" y="5" xlink:href="#rect"/>
              <text x="10" y="35">1</text>
        
        <use id="use2" fill="red" x="30" y="5" xlink:href="#rect"/>       
        <rect pointer-events="none" x="30" y="5" width="20" height="20" fill="none" stroke-width="3" stroke="none" >
                <set attributeName="stroke" begin="use2.mouseover" end="use2.mouseout" to="black"/>
        </rect>
        <text x="35" y="35">2</text>
        
        <g id="g1">
                <use fill="red" x="5" y="40" xlink:href="#rect"/> 
                <rect pointer-events="none" x="5" y="40" width="20" height="20" fill="none" stroke-width="3" stroke="none" >
                        <set attributeName="stroke" begin="g1.mouseover" end="g1.mouseout" to="black"/>
                </rect>
        </g>
        <text x="10" y="70">3</text>
        
        <use id="use3" fill="red" x="30" y="40" xlink:href="#rect"/>      
        <rect pointer-events="none" x="30" y="40" width="20" height="20" fill="none" stroke-width="3" stroke="none" >
                <set attributeName="stroke" begin="use3.click" dur="500ms" to="black"/>
        </rect>   
        <text x="35" y="70">4</text>

  <defs>
    <rect id="rect" width="20" height="20" fill="red">
      <set attributeName="fill" begin="mouseover" end="mouseout" to="blue"/>
    </rect>
  </defs>
  <use fill="red" x="5" y="5" xlink:href="#rect"/>
  <text x="10" y="35">1</text>
  
  <use id="use2" fill="red" x="30" y="5" xlink:href="#rect"/>  
  <rect pointer-events="none" x="30" y="5" width="20" height="20"
        fill="none" stroke-width="3" stroke="none">
    <set attributeName="stroke" begin="use2.mouseover" end="use2.mouseout" to="black"/>
  </rect>
  <text x="35" y="35">2</text>
  
  <g id="g1">
    <use fill="red" x="5" y="40" xlink:href="#rect"/>  
    <rect pointer-events="none" x="5" y="40" width="20" height="20"
          fill="none" stroke-width="3" stroke="none">
      <set attributeName="stroke" begin="g1.mouseover" end="g1.mouseout" to="black"/>
    </rect>
  </g>
  <text x="10" y="70">3</text>
  
  <use id="use3" fill="red" x="30" y="40" xlink:href="#rect"/>  
  <rect pointer-events="none" x="30" y="40" width="20" height="20"
        fill="none" stroke-width="3" stroke="none">
    <set attributeName="stroke" begin="use3.click" dur="500ms" to="black"/>
  </rect>  
  <text x="35" y="70">4</text>

</svg>

Example use-bubble-example-2.svg illustrates event bubbling with nested use 'use' elements. On mouse over, the 'rect' element is filled blue and displays a green and black ring.

Example: use-bubble-example-2.svg

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:ev="http://www.w3.org/2001/xml-events"
     version="1.2" baseProfile="tiny">
  <defs>
    <rect id="rect" width="20" height="20" fill="red">
      <set attributeName="fill" begin="mouseover" end="mouseout" to="blue"/>
    </rect>    
    <g id="use">
      <use fill="red" xlink:href="#rect"/>  
      <rect pointer-events="none" width="20" height="20"
            fill="none" stroke-width="8" stroke="none">
        <set attributeName="stroke" begin="use.mouseover" end="use.mouseout" to="green"/>
      </rect>
    </g>
  </defs>
  
  <use x="5" y="5" id="use2" fill="red" xlink:href="#use"/>  
  <rect pointer-events="none" x="5" y="5" width="20" height="20" fill="none" stroke-width="3" stroke="none">
    <set attributeName="stroke" begin="use2.mouseover" end="use2.mouseout" to="black"/>
  </rect>

</svg>

Example image-use-base.svg illustrates the handling of relative IRI references. All three use elements result in the same image being displayed, http://a.example.org/aaa/bbb/ddd/foo.jpg .

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     version="1.2" baseProfile="tiny" viewBox="00 100 100">

  <g xml:base="http://a.example.org/aaa/">
    <g xml:base="/bbb/ccc/">
      <g xml:base="../ddd/" xml:id="bar">
        <image xml:id="foo" xlink:href="foo.jpg" width="100" height="100"/>
      </g>
    </g>
  </g>
  <g xml:base="http://z.example.net/zzz/">
    <g xml:base="/yyy/xxx/">
      <g xml:base="../xxx/">
        <use xlink:href="#foo" width="90" height="90"/>
        <use xlink:href="#bar" width="60" height="60"/>
        <use xlink:href="#bar" xml:base="../ggg/" width="30" height="30"/>
      </g>
    </g>
  </g>
</svg>

5.7 The 'image' element

The 'image' element indicates that the contents of a complete document are to be rendered into a given rectangle within the current user coordinate system. In SVG Tiny 1.2, the 'image' must reference content that is a raster image format, such as PNG and JPG. or JPEG [ PNG ,JPEG ]. SVG Tiny 1.2 does not allow an SVG document to be referenced by the 'image' element; instead, authors should use the 'animation' element for referencing SVG Documents. documents. Conforming SVG viewers must support PNG and JPEG image file formats. Other image file formats may be supported.

For details of the required JPEG support see the JPEG Support Appendix appendix . PNG support is required as defined in the PNG specification Portable Network Graphics (PNG) Specification (Second Edition) [ PNG ].

The result of processing an 'image' is always a four-channel RGBA result. When an 'image' element references a raster image file such as PNG or JPEG files which only has three channels (RGB), then the effect is as if the object were converted into a 4-channel RGBA image with the alpha channel uniformly set to 1. For a single-channel raster image, the effect is as if the object were converted into a 4-channel RGBA image, where the single channel from the referenced object is used to compute the three color channels and the alpha channel is uniformly set to 1.

The 'image' element supports the 'opacity' property for controlling the image opacity. The 'fill-opacity' property does not affect the rendering of an image.

An 'image' element establishes a new viewport for the referenced file as described in Establishing a new viewport . The bounds for the new viewport are defined by attributes 'x' , 'y' , 'width' and 'height' . The placement and scaling of the referenced image are controlled by the 'preserveAspectRatio' attribute on the 'image' element.

The value of the 'viewBox' attribute to use when evaluating the 'preserveAspectRatio' attribute is defined by the referenced content. For content that clearly identifies a 'viewBox' that value should be used. For most raster content (PNG, (such as PNG and JPEG) the bounds of the image should be used (i.e. the 'image' element has an implicit 'viewBox' of "0 0 raster-image-width raster-image-height" raster-image-height " ). Where no value is readily available the 'preserveAspectRatio' attribute is ignored and only the translate due to the 'x' and 'y' attributes of the viewport is used to display the content.

For example, if the 'image' element referenced a PNG or JPEG and preserveAspectRatio="xMinYMin meet" , then the aspect ratio of the raster would be preserved (which means that the scale factor from the image's coordinates to the current user space coordinates would be the same for both X x and Y), y ), the raster would be sized as large as possible while ensuring that the entire raster fits within the viewport, and the top left of the raster would be aligned with the top left of the viewport as defined by the attributes 'x' , 'y' , 'width' and 'height' on the 'image' element.  element. If the value of 'preserveAspectRatio' was 'none' "none" then aspect ratio of the image would not be preserved. The image would be fitted positioned such that the top/left top-left corner of the raster exactly aligns with coordinate ( 'x' , ,  'y' ) and the bottom/right bottom-right corner of the raster exactly aligns with coordinate ( 'x' + 'width' , ,  'y' + 'height' ).

The SVG specification does not specify when an image that is not being displayed should be loaded. An SVG User Agent user agent is not required to load image data for an image that is not displayed (e.g. is is outside the initial document viewport ), except when that image is contained inside a subtree for which 'externalResourcesRequired' is set to true "true" . However, it should be noted that this may cause a delay when an image becomes visible for the first time. In the case where an author wants to suggest that the SVG User Agent user agent loads image data before it is displayed, they should use the 'prefetch' element.

Note that an SVG User Agent user agent may choose to incrementally render an image as it is loading but is not required to do so.

    <define name='image'>
      <element name='image'>
        <ref name='image.AT'/>
        <ref name='image.CM'/>
      </element>
    </define>
    <define name='image.AT' combine='interleave'>
      <ref name='svg.Core.attr'/>
      <ref name='svg.FocusHighlight.attr'/>
      <ref name='svg.Media.attr'/>
      <ref name='svg.XLinkEmbed.attr'/>
      <ref name='svg.Conditional.attr'/>
      <ref name='svg.External.attr'/>
      <ref name='svg.Focus.attr'/>
      <ref name='svg.Transform.attr'/>
      <ref name='svg.Opacity.attr'/>
      <ref name='svg.XYWH.attr'/>
      <ref name='svg.PAR.attr'/>
      <ref name='svg.ContentType.attr'/>
    </define>
    <define name='image.CM'>
      <zeroOrMore>
        <choice>
          <ref name='svg.Desc.group'/>
          <ref name='svg.Animate.group'/>
          <ref name='svg.Discard.group'/>
          <ref name='svg.Handler.group'/>
        </choice>
      </zeroOrMore>
    </define>

An example:

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     version="1.2" baseProfile="tiny">
  <desc>This document has a reference to an external image</desc>
  <image x="200" y="200" width="100" height="100" xlink:href="externalImage.png">

    <title>External image</title>
  </image>
</svg>

5.8 Conditional processing

5.8.1 Conditional processing overview

SVG contains provides a 'switch' element along with and five conditional processing attributes 'requiredFeatures' , — 'requiredExtensions' , 'systemLanguage' 'requiredFeatures' ,'requiredFonts' , 'requiredFormats' and 'requiredFonts' 'systemLanguage' to — which provide an the ability to specify alternate viewing content depending on the capabilities of a given SVG User Agent user agent or the user's language.

    <define name='svg.Conditional.attr' combine='interleave'>
      <optional>
        <attribute name='requiredFeatures' svg:animatable='false' svg:inheritable='false'>
          <ref name='ListOfXMLRI.datatype'/>

          <ref name='ListOfIRI.datatype'/>

        </attribute>
      </optional>
      <optional>
        <attribute name='requiredExtensions' svg:animatable='false' svg:inheritable='false'>
          <ref name='ListOfXMLRI.datatype'/>

          <ref name='ListOfIRI.datatype'/>

        </attribute>
      </optional>
      <optional>
        <attribute name='requiredFormats' svg:animatable='false' svg:inheritable='false'>
          <ref name='FormatList.datatype'/>
        </attribute>
      </optional>
      <optional>
        <attribute name='requiredFonts' svg:animatable='false' svg:inheritable='false'>
          <ref name='FontList.datatype'/>
        </attribute>
      </optional>
      <optional>
        <attribute name='systemLanguage' svg:animatable='false' svg:inheritable='false'>
          <ref name='LanguageIDs.datatype'/>
        </attribute>
      </optional>
    </define>

Attributes 'requiredFeatures' Conditional processing attributes do not affect the processing of all elements. They can be specified only on graphics elements , 'requiredExtensions' container elements , 'systemLanguage' text content elements , 'requiredFormats' descriptive elements ,timed elements and the 'foreignObject' and 'discard' elements. A conditional processing attribute on any other element does not affect whether that element will be processed. For example, a 'requiredFonts' 'requiredExtensions' attribute on a 'script' element will not control whether the script is executed.

The conditional processing attributes act as boolean tests and return evaluate to either true or false results. false. If one is not specified, then it is assumed to evaluate to true. The 'switch' renders attributes can be used in two ways, depending on the first context of its direct children for the element on which all of these the attributes test true. are specified. If the given attribute element's parent node is not specified, then a true value is assumed. Example systemLanguage 'switch' below displays element, then at most one of three text strings (in Welsh, Greek, or Spanish) if those are the users preferred languages. Otherwise, in this example, it displays nothing. Example: systemLanguage.svg <?xml version="1.0" encoding="UTF-8"?> <svg version="1.2" baseProfile="tiny" xml:id="svg-root" width="100%" height="100%" viewBox="0 0 170 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>systemLanguage example</title> <switch> <g systemLanguage="cy"> <text x="20" y="220" xml:lang="cy" font-size="20">Pam dydyn nhw ddim yn siarad Cymraeg?</text> </g> <g systemLanguage="el"> <text x="20" y="220" xml:lang="el-GR" font-size="22">Μα γιατί δεν μπορούν να μιλήσουν Ελληνικά ;</text> </g> <g systemLanguage="es"> <text x="20" y="220" xml:lang="es-ES" font-size="18">¿Por qué no pueden simplemente hablar en castellano ?</text> </g> </switch> </svg> Similar to the 'display' 'switch' property, element's children that conditional processing attributes only affect apply to will be processed. (See the direct rendering description of elements and do the 'switch' element for details.) Otherwise, if the element's parent node is not prevent elements from being successfully referenced by other elements (such as via a 'use' 'switch' ). The element, and conditional processing attributes in the shadow tree are processed normally. Conditional properties do apply to the element, then the attributes determine whether that element will be processed.

What it means for an element not effect evaluation to be processed because of 'script' conditional processing attributes elements, whose logic specified on it, or because it is run independently of conditional properties a child of any ancestor a 'switch' elements. Furthermore, that has selected a different child for processing, depends on the following rules must be applied: type of element:

• If the element is a 'requiredFeatures' graphics element , 'requiredExtensions' , 'systemLanguage' container element , 'requiredFormats' text content element and 'requiredFonts' or a 'foreignObject' attributes do element, then the element is not apply to elements that are rendered and is not a part of the rendering tree such as 'defs' or 'linearGradient' elements but do apply to the 'audio' element. .

• If the element is a 'requiredFeatures' , 'requiredExtensions' , 'systemLanguage' timed element , 'requiredFormats' then the element will never begin, regardless of its timing attributes and any invocations of methods on the SVGTimedElement and 'requiredFonts' ElementTimeControl attributes affect 'animate' , 'animateColor' , interfaces. If the element serves as a syncbase for any other 'animateMotion' timed elements , in the document, then those syncbase references will never resolve to a concrete time. Thus, for example, if the element is an 'animateTransform' animation element , the animation will never have an effect, and if the element is an 'set' 'audio' elements. If the conditional statement on these animation elements fails, the animation element, then it will never be triggered. generate any sound.

• If the element is a 'requiredFeatures' , 'requiredExtensions' 'discard' , 'systemLanguage' element, then it will never trigger the removal of its target element, nor will it remove itself.

Similar to the , 'requiredFormats' 'display' and 'requiredFonts' property, conditional processing attributes attributes only affect the direct rendering and processing of applicable elements and do not prevent elements from being successfully referenced by other elements (such as via a 'discard' 'use' element. If the conditional statement on ). 'discard' Conditional processing attributes fails, in a shadow tree are processed normally.

Example systemLanguage below displays one of three text strings (in Welsh, Greek, or Spanish) if one of those is the element referred to will not be discarded. user's preferred language. Otherwise, in this example, it displays nothing.

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     version="1.2" baseProfile="tiny" viewBox="0 0 170 200">
  <title>systemLanguage example</title>
  <switch>
    <g systemLanguage="cy">
      <text x="20" y="220" xml:lang="cy" font-size="20">Pam dydyn nhw ddim yn
        siarad Cymraeg?</text>
    </g>
    <g systemLanguage="el">
      <text x="20" y="220" xml:lang="el-GR" font-size="22">Μα γιατί δεν μπορούν
        να μιλήσουν Ελληνικά ;</text>
    </g>
    <g systemLanguage="es">
      <text x="20" y="220" xml:lang="es-ES" font-size="18">¿Por qué no pueden
        simplemente hablar en castellano?</text>
    </g>
  </switch>
</svg>

5.8.2 The 'switch' element

The 'switch' element evaluates the 'requiredFeatures' is a , 'requiredExtensions' container element , 'systemLanguage' that can be used to select one of its child elements to process based on their conditional processing attributes , 'requiredFormats' . The first direct child element of a 'switch' and 'requiredFonts' whose conditional processing attributes attributes on its direct child elements in document order, and then renders the first child for which all of these attributes evaluate to true. true will be processed as normal. All other direct child elements of the 'switch' element will therefore not be rendered. If the first child element which evaluates to true is a that support container element conditional processing attributes then the entire subtree is rendered. will not be processed. The elements that support conditional processing of the 'switch' attributes element applies only to the rendering tree; non-rendering child elements, such as are listed in the Conditional processing overview section, above.

While 'script' conditional processing attributes element, are not affected by supported only on certain elements, those attributes on all direct child elements of a 'switch' . are used to determine which children to disable processing for.

Note that the The values of properties the 'display' and 'visibility' properties have no effect on 'switch' element processing. In particular, setting 'display' to none on a child of a 'switch' element has no effect on the testing associated with 'switch' element processing.

Note also that regardless of their rendering status, whether they are processed or disabled, child elements of the 'switch' element are still part of the DOM, and rules applying to the uniqueness of the 'id' attribute and 'xml:id' attributes still apply. Additionally, elements which would not otherwise be rendered due to conditional processing can still be referenced by 'id' (e.g. in referenced, for example as the target of a 'use' element or as the <XMLRI> of a paint server), and will be rendered server reference in that instantiation. a 'fill' property.

The element definition schema and content model for 'switch' are not defined here. It is defined in all the places it can occur.

    <define name='switch.AT' combine='interleave'>
      <ref name='svg.Core.attr'/>
      <ref name='svg.Conditional.attr'/>
      <ref name='svg.Properties.attr'/>
      <ref name='svg.FocusHighlight.attr'/>
      <ref name='svg.External.attr'/>
      <ref name='svg.Transform.attr'/>
      <ref name='svg.Focus.attr'/>
    </define>

For more information and an example, see Embedding foreign object types .

5.8.3 The 'requiredFeatures' attribute

5.8.4 The 'requiredExtensions' attribute

The 'requiredExtensions' attribute defines specifies a list of required language extensions. Language extensions are capabilities within an SVG User Agent user agent that go beyond the feature set defined in this specification. Each extension is identified by a an IRI Reference reference .

Since white space is often used to separate values in conjunction with the 'switch' element. If attribute, any white space characters in the 'requiredExtensions' IRI reference is used in other situations, then it represents a simple switch on the given element whether to render the element or not. must be escaped.

5.8.5 The 'systemLanguage' attribute

Note: This Note that the use of a prefix matching rule to determine whether the attribute evaluates to true or false does not imply that language tags are assigned to languages in such a way that it is always true that if a user understands a language with a certain tag, then this user will also understand all languages with tags for which this tag is a prefix. The prefix rule simply allows the use of prefix tags if this is the case.

Implementation note: When making the choice of linguistic preference available to the user, implementers should take into account the fact that users are not familiar with the details of language matching as described above, and should provide appropriate guidance. As an example, users may assume that on selecting "en-gb" "en-GB" , they will be served any kind of English document if British English is not available. The user interface for setting user preferences should guide the user to add "en" to get the best matching behavior.

Multiple languages may be listed for content that is intended for multiple audiences. For example, content that is presented simultaneously in the original Maori and English versions, would call for:

However, just because multiple languages are present within the object element on which the 'systemLanguage' test conditional processing attribute is placed, this does not mean that it is intended for multiple linguistic audiences. An example would be a beginner's language primer, such as "A First Lesson in Latin," which is clearly intended to be used by an English-literate audience. In this case, the 'systemLanguage' test conditional processing attribute should only include "en" .

Authoring note: Authors should realize that if several alternative language objects are enclosed in a 'switch' , and none of them matches, this may lead to situations where no content is displayed. It is thus recommended to include a "catch-all" choice at the end of such a 'switch' which is acceptable in all cases.

5.8.6 The 'requiredFormats' attribute

Many resources, especially media such as audio and video, have a wide range of formats. As it is often not possible to require support for a particular format, due to legal or platform restrictions, it is often necessary for content to provide alternatives so that SVG User Agents user agents can choose the format they support. The 'requiredFormats' attribute is a generic conditional processing attribute that can be used to enable or disable particular branches in the SVG document. It defines control conditional processing based on whether a list of resource formats. The SVG User Agent must support all of the resource types for particular format is supported by the attribute to evaluate to "true". user agent.

The following formats must always evaluate to "true" true in compliant conforming SVG viewers:

• image/png
• image/jpeg
• image/svg+xml

5.8.7 The 'requiredFonts' attribute

If the author wishes to have complete control over the appearance and location of text in the document then they must ensure that the correct font is used when rendering the text. This can be achieved by using SVG Fonts fonts and embedding the font in the document. However, this is not practical in all cases, especially when the number of glyphs used is very large or if the licensing of the font forbids such embedding.

5.9 External Resources resources

5.9.1 The 'externalResourcesRequired' attribute

Documents often reference and use the contents of other document and other web resources as part of their rendering or processing. In some cases, authors want to specify that particular resources are required for a document to be considered correct.

Attribute The 'externalResourcesRequired' attribute is available on all container elements except 'defs' and on all elements which potentially can reference external resources. It specifies whether referenced resources that are not part of the current document are required for proper rendering of the given element.

Attribute 'externalResourcesRequired' is not inheritable (from a sense of attribute value inheritance), but if set on a container element , its value will apply to all elements within the container.

Because setting externalResourcesRequired="true" on a container element can will have the effect of disabling progressive display of the contents of that container, if that container includes elements that reference external resources, tools that generate SVG content should normally not just set externalResourcesRequired="true" on the 'svg' element on a universal basis. Instead, it is better to specify externalResourcesRequired="true" on those particular elements which specifically need the availability of external resources in order to render properly.

5.9.2 Progressive Rendering rendering

When progressively downloading a document, an SVG User Agent user agent conceptually builds a tree of nodes in various states. The possible states for these nodes are unresolved, unresolved ,resolved and error. error .

This description uses two conceptual parsing events to simplify the prose in explaining the intended behaviour of progressive rendering. The events referred to in the following prose are the 'start element' start element and 'end element' end element events. The 'start element' start element event is considered to be triggered when the Start-Tag a start-tag or an Empty-Element Tag empty-element tag is read. The 'end element' end element event occurs either immediately following the 'start element' start element event in the case of an Empty-Element Tag empty-element tag , or when the End-Tag an end-tag is read. The terms Start-Tag , End-Tag start-tag, end-tag and Empty-Element Tag empty-element tag are as defined in the XML specification (either XML Extensible Markup Language (XML) 1.0 [ ([ XML10 ] or XML ], section 3.1) and Extensible Markup Language (XML) 1.1 [ ([ XML11 ]). ], section 3.1).

When loading a document following the 'start element' start element event on a node, that node becomes part of the document tree in the unresolved state. It is appended as the last child of the most recently opened element that is still open (that is, the most recent element for which a start element event has occurred with no corresponding end element event). If the node's dependencies are successfully resolved, then the node enters the resolved state or if the node's dependencies are found to be in error, then the node enters the error state.

When an end element event occurs for a 'script' element, that element is processed according to the Script processing section of the Scripting chapter. Further parsing of the document will be blocked until processing of the 'script' is complete.

Node dependencies include both children content (like the child elements on a 'g' ) and resources (e.g. images referenced by an 'image' ) referenced from that node or from its children. Empty elements (elements without children) become resolved when the 'end element' end element event occurs on the element; elements with child nodes become resolved when all their children are resolved and when the 'end element' end element event occurs on the element. Resources become resolved (or found in error) by an SVG User Agent user agent specific mechanism.

SVG User Agents user agents must implement progressive rendering although there is no minimum rendering update frequency required for conformance. Implementations should find their own balance between processing the changes in the document tree and rendering the tree to produce a smooth rendering avoiding significant pauses. The following rules apply to progressive rendering:

• The SVG User Agent user agent has the opportunity to update the rendering following each 'start element' start element and/or 'end element' end element event, i.e. each time the SVG User Agent user agent parses a Start-Tag, Empty-Element Tag start-tag, empty-element tag or End-Tag. end-tag.

• The SVG User Agent user agent renders the conceptual document tree nodes in document order up to, and not including the first node in the 'unresolved' unresolved state which has 'externalResourcesRequired' set to true "true" . Nodes in the 'resolved' resolved state are always rendered. Nodes in the unresolved state but with 'externalResourcesRequired' set to false "false" are rendered in their current state. If the node has no rendering (e.g, an 'image' pending a resource), then nothing is rendered for that node.

• If a node enters the error state then the document enters the error state and progressive rendering stops.

Note that even if the SVG User Agent user agent has the opportunity to update the rendering after each start/end element event there are situations where such an update shouldn't be done. E.g. For example, 'font' element children ( 'font-face' , 'hkern' , 'missing-glyph' , 'glyph' ) should not cause an update of the document rendering, only the 'end element' end element event on the 'font' element should cause a document rendering as for other node types.

Note that forward referencing from a 'discard' element should be avoided when using progressive rendering. If it fails to find (and thus discard) an element, it will not later discard the element when it has finally loaded.

Example Example: progRend01.svg <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.2" baseProfile="tiny" xml:id="svg-root" width="100%" height="100%" viewBox="0 0 480 360"> <desc>externalResourcesRequired example.</desc> <g externalResourcesRequired="true"> <rect xml:id="rect_1" width="5" height="7"/> ... <rect xml:id="rect_1000" width="5" height="7"/> <image xlink:href="myImage.png" width="5" height="7" externalResourcesRequired="true"/> <rect xml:id="rect_1001" width="5" height="7"/> </g> </svg> In this example, Example progRend01 below, the 'g' element rendering may start when the 'g' End-Tag end-tag has been parsed and processed and when all the resources needed by its children have been resolved. This means that the group's rendering may start when the group has been fully parsed and myImage.png has been successfully retrieved.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     version="1.2" baseProfile="tiny" viewBox="0 0 480 360">
  <desc>externalResourcesRequired example.</desc>
  <g externalResourcesRequired="true">
    <rect xml:id="rect_1" width="5" height="7"/>
     ...
    <rect xml:id="rect_1000" width="5" height="7"/>
    <image xlink:href="myImage.png" width="5" height="7" externalResourcesRequired="true"/>
    <rect xml:id="rect_1001" width="5" height="7"/>
  </g>
</svg>

Forward reference of Example progRend02 demonstrates how progressive rendering is performed when there is a use 'use' element with a forward reference.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     version="1.2" baseProfile="tiny" viewBox="0 0 480 360">

      <g fill="red">
         <rect xml:id="myRect" width="100" height="100" />
      </g>

  <desc>Forward reference of use element</desc>
  <use xlink:href="#myRect" x="200" fill="green"/>
  <circle cx="450" cy="50" r="50" fill="yellow"/>
  <g fill="red">
    <rect xml:id="myRect" width="100" height="100"/>
  </g>

</svg>

In this example, The following list shows the various possible renderings may be of the document as it is parsed (the rendering state follows the colon):

1. 'use' .'start element' : → start element : empty
2. 'circle' .'start element': → start element : yellow circle
3. 'g' .'start element': → start element : no update
4. 'rect' .'start element' → start element (use reference becomes resolved): green rect, yellow circle, red rect

Forward reference on Example progRend03 demonstrates how progressive rendering is performed when there is a 'use' element with a forward reference and which has externalResourcesRequired="true" .

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     version="1.2" baseProfile="tiny" viewBox="0 0 480 360">

        <g fill="red">
            <g xml:id="myGroup">
                <rect xml:id="myRect" width="100" height="100" />
                <use xlink:href="#myRect" x="50" fill="purple"/>
            </g>
        </g>

  <desc>Forward reference on use with eRR=true</desc>

  <use xlink:href="#myGroup" x="200" fill="green" externalResourcesRequired="true"/>
  <circle cx="450" cy="50" r="50" fill="yellow"/>
  <g fill="red">
    <g xml:id="myGroup">
      <rect xml:id="myRect" width="100" height="100"/>
      <use xlink:href="#myRect" x="50" fill="purple"/>
    </g>
  </g>

</svg>

The possible rendering states are as follows:

1. 'use' .'start element' : → start element : empty
2. 'circle' .'start element': → start element : empty 'use' is unresolved, externalResourcesRequired="true" , rendering is stopped at the 'use' )
3. Outer 'g' .'start element': → start element : no update
4. Inner g.myGroup .'start element': 'g' → start element : no update (use is resolved but externalResourcesRequired="true" so rendering may not proceed until that reference enters the resolved state)
5. 'rect' .'start element': → start element : no update
6. 'use' .'start element': → start element : no update
7. Inner g.myGroup .'end element' 'g' → end element (#myGroup reference becomes resolved, rendering can proceed): green rect, purple rect, yellow circle, red rect, purple rect. rect

Forward reference with Example progRend04 shows a 'use' element with a reference to an element under that is in a container with externalResourcesRequired="true" .

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     version="1.2" baseProfile="tiny" viewBox="0 0 480 360">

        </g>

  <desc>Forward reference to a use under a container with eRR=true</desc>
  <use xlink:href="#myRect" x="200" fill="green"/>
  <circle cx="250" cy="50" r="50" fill="pink"/>
  <g fill="red" externalResourcesRequired="true">
    <circle cx="450" cy="50" r="50" fill="yellow"/>
    <rect xml:id="myRect" width="100" height="100"/>
  </g>

</svg>

The possible rendering states as the document is parsed are as follows:

1. 'use' .'start element' : → start element : empty
2. Pink pink.circle .'start element': 'circle' → start element : pink circle
3. 'g' .'start element': → start element : no update (rendering is suspended because of externalResourcesRequired="true" on the 'g' element, i.e. because the children of 'g' are not resolved at the time of parsing of the start tag of the 'g' ).
4. Yellow yellow.circle .'start element': 'circle' → start element : no update (rendering suspended because of 'g' )
5. myRect.rect .'start element': 'rect' → start element : no update
6. 'g' .'end element'. Resources → end element (resources referenced by 'use' become resolved and can be rendered. Rendering rendered, so rendering can proceed: proceed): green rect, pink circle, yellow circle, red rect

Font Resolution Example Example: progRend05.svg <?xml version="1.0"?> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.2" baseProfile="tiny" xml:id="svg-root" width="100%" height="100%" viewBox="0 0 480 360"> <desc>Font Resolution Example</desc> <text x="240" y="230" text-anchor="middle" font-size="120" font-family="fontC, fontB, fontA">A</text> progRend05 shows an example of progressive rendering with a forward reference to an SVG font. Rendering updates do not occur mid-way through parsing a <defs> <font xml:id="fontA" horiz-adv-x="224" > <font-face font-family="fontA" units-per-em="1000" panose-1="0 0 0 0 0 0 0 0 0 0" ascent="917" descent="-250" alphabetic="0" /> <missing-glyph horiz-adv-x="800" d="..." /> <glyph unicode="A" glyph-name="A" d="..."/> </font> 'font' <font xml:id="fontB" horiz-adv-x="224"> <font-face font-family="fontB" units-per-em="1000" panose-1="0 0 0 0 0 0 0 0 0 0" ascent="917" descent="-250" alphabetic="0" /> element.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     version="1.2" baseProfile="tiny" viewBox="0 0 480 360">

       <missing-glyph horiz-adv-x="800" d="..."/>
       <glyph unicode="A" glyph-name="B" d="..." />

  <desc>Font Resolution Example</desc>

     </font>

  <text x="240" y="230" text-anchor="middle" font-size="120"
        font-family="fontC, fontB, fontA">A</text>

     <font xml:id="fontC" horiz-adv-x="224" >
       <font-face
           font-family="fontC"
           units-per-em="1000"
           panose-1="0 0 0 0 0 0 0 0 0 0"
           ascent="917"
           descent="-250"
           alphabetic="0" />
       <missing-glyph d="..." />
       <glyph unicode="A" glyph-name="C" d="..."/>
       </font>
     </defs>

  <defs>
    <font xml:id="fontA" horiz-adv-x="224" >
      <font-face
        font-family="fontA"
        units-per-em="1000"
        panose-1="0 0 0 0 0 0 0 0 0 0"
        ascent="917"
        descent="-250"
        alphabetic="0"/>
      <missing-glyph horiz-adv-x="800" d="..." />
      <glyph unicode="A" glyph-name="A"  d="..."/>
    </font>
    <font xml:id="fontB" horiz-adv-x="224">
      <font-face
        font-family="fontB"
        units-per-em="1000"
        panose-1="0 0 0 0 0 0 0 0 0 0"
        ascent="917"
        descent="-250"
        alphabetic="0"/>
      <missing-glyph horiz-adv-x="800" d="..."/>
      <glyph unicode="A" glyph-name="B" d="..." />
    </font>

    <font xml:id="fontC" horiz-adv-x="224" >
      <font-face
        font-family="fontC"
        units-per-em="1000"
        panose-1="0 0 0 0 0 0 0 0 0 0"
        ascent="917"
        descent="-250"
        alphabetic="0"/>
      <missing-glyph d="..."/>
      <glyph unicode="A" glyph-name="C" d="..."/>
    </font>
  </defs>

</svg>

Progressive rendering: Rendering update possibilities as the document is parsed are as follows:

1. 'text' .'start element': 'A' → start element :"A" rendered with the default font
2. 'defs' .'start element': → start element : no update
3. fontA.font .'start element': #fontA → start element : no update
4. #fontA / fontA.font-face .'start element': 'font-face' → start element : no update
5. #fontA / fontA.missingGlyph .'start element': 'missingGlyph' → start element : no update
6. #fontA / fontA.glyphA .'start element': 'glyph' → start element : no update
7. fontA.font .'end element': 'A' #fontA → end element :"A" rendered with fontA (represents current document state rendering)
8. fontB.font .'start element': #fontB → start element : no update
9. #fontB / fontB.font-face .'start element': 'font-face' → start element : no update
10. #fontB / fontB.missingGlyph .'start element': 'missingGlyph' → start element : no update
11. #fontB / fontB.glyphA .'start element': 'glyph' → start element : no update
12. fontB.font .'end element': 'A' #fontB → end element :"A" rendered with fontB (represents current document state rendering)
13. fontC.font .'start element': #fontC → start element : no update
14. #fontC / fontC.font-face .'start element': 'font-face' → start element : no update
15. #fontC / fontC.missingGlyph .'start element': 'missingGlyph' → start element : no update
16. #fontC / fontC.glyphA .'start element': 'glyph' → start element :no update
17. fontC.font .'end element': 'A' #fontC → end element :"A" rendered with fontC (represents current document state rendering)

5.9.3 The 'prefetch' element

SVG 1.1 did not specify when an SVG User Agent user agent should begin download downloading referenced media. This lead to implementation differences particularly when the media was not used in the initial document state (e.g. it was offscreen or hidden). SVG Tiny 1.2 does not require SVG User Agents user agents to download referenced media that is not visual visible at the time the document is loaded, unless those media are contained inside a subtree for which 'externalResourcesRequired' is set to true "true" . This means there may be a pause to download the file the first time a piece of media is displayed. More advanced SVG User Agents user agents may wish to predict that particular media streams will be needed and therefore download them in anticipation.

SVG Tiny 1.2 therefore adds functionality to allow content developers to suggest prefetching content from the server before it is needed to improve the rendering performance of the document. The SMIL 2.1 'prefetch' element ([ SMIL21 ], section 4.4) has been incorporated into SVG as the 'prefetch' element has been reused from Section 4.4 of SMIL 2.1 ( The PrefetchControl Module ) element, with the following modifications:

• no percent-value is allowed

  Attributes cannot be given <percent-value> values.

• the

  The 'xlink:href' attribute is permitted to point into the document in which the 'prefetch' element appears so that this feature can be used as a hint indicating how much of the document is required before play-back playback can start start.

• in

  In order to adequately enable support non-local IRI references , the 'mediaCharacterEncoding' and 'mediaContentEncodings' attributes have been added added.

The 'prefetch' element will give provides a suggestion or hint to a the SVG User Agent user agent that media will be used in the future and the author would like part or all of it fetched ahead of time to make the document playback smoother. As it is a hint, user-agents user agents may ignore 'prefetch' elements, though although doing so may cause an interruption in the document playback when the resource is needed. It gives authoring tools and authors the ability to schedule retrieval of resources when they think that there is available bandwidth or time to do it.

When instead of referring to external media, 'prefetch' refers to the same document it occurs in, then it can only reference a top level 'g' element. A 'top level' top level 'g' element is a 'g' element that is a direct child of the rootmost 'svg' element element. .

To enable smooth playback during progressive downloading in this scenario, it is recommended that each adjacent top level 'g' element elements contain adjacent chronological scenes in the animation. In this case the 'prefetch' element must appear in a 'defs' block before all defined 'g' 'g' elements in the document. In such cases, 'prefetch' is used to tell the SVG User Agent user agent how much it needs to buffer in order to be able to play content back in a smooth and predictable manner.

    <define name='prefetch'>
      <element name='prefetch'>
        <ref name='prefetch.AT'/>
        <ref name='prefetch.CM'/>
      </element>
    </define>
    <define name='prefetch.AT' combine='interleave'>
      <ref name='svg.Core.attr'/>
      <ref name='svg.XLinkRequired.attr'/>
      <optional>
        <attribute name='mediaSize' svg:animatable='false' svg:inheritable='false'>
          <ref name='Number.datatype'/>
        </attribute>
      </optional>
      <optional>
        <attribute name='mediaTime' svg:animatable='false' svg:inheritable='false'><text/></attribute>
      </optional>
      <optional>
        <attribute name='mediaCharacterEncoding' svg:animatable='false' svg:inheritable='false'><text/></attribute>
      </optional>
      <optional>
        <attribute name='mediaContentEncodings' svg:animatable='false' svg:inheritable='false'><text/></attribute>
      </optional>
      <optional>
        <attribute name='bandwidth' svg:animatable='false' svg:inheritable='false'>
          <choice>
            <ref name='Number.datatype'/>
            <value>auto</value>
          </choice>
        </attribute>
      </optional>
    </define>
    <define name='prefetch.CM'>
      <zeroOrMore>
        <ref name='svg.Desc.group'/>
      </zeroOrMore>
    </define>

When 'prefetch' refers to external media, if both 'mediaSize' and 'mediaTime' are specified, then 'mediaSize' shall be used and 'mediaTime' is ignored. If neither 'mediaSize' nor 'mediaTime' is specified, the behavior is that the entire media resource should be fetched.

When 'prefetch' refers to a resource in the same document (i.e. a top level 'g' element), both the 'mediaSize' and 'mediaTime' attributes can be used together by a more advanced SVG User Agent user agent to determine how much it needs to buffer in order to be able to play content back in a smooth manner.

Below is an example Example prefetch01 demonstrates the use of the 'prefetch' element when it refers to external media:

<svg width="400" height="300" version="1.2"
        xmlns="http://www.w3.org/2000/svg" baseProfile="tiny"
        xmlns:xlink="http://www.w3.org/1999/xlink">
     <desc>
        Prefetch the large images before starting the animation
        if possible.
     </desc>
     <defs>
       <prefetch xlink:href="http://www.example.com/images/huge1.png"/>
       <prefetch xlink:href="http://www.example.com/images/huge2.png"/>
       <prefetch xlink:href="http://www.example.com/images/huge3.png"/>
     </defs>
     <image x="0" y="0" width="400" height="300"
        xlink:href="http://www.example.com/images/huge1.png"
        display="none">
        <set attributeName="display" to="inline" begin="10s"/>
 
        <animate attributeName="xlink:href" values="
               http://www.example.com/images/huge1.png;
               http://www.example.com/images/huge2.png;
               http://www.example.com/images/huge3.png"
            begin="15s" dur="30s"/>
     </image>
</svg>

Below Example prefetch02 is an example of the 'prefetch' element when it refers referring to a resource in the same document (i.e. a top level 'g' element in the same document): element):

<?xml version="1.0" encoding="utf-8"?>
<svg width="400" height="300" version="1.2"
        xmlns="http://www.w3.org/2000/svg" baseProfile="tiny"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        timelineBegin="onStart"
        playbackOrder="forwardOnly">
     <desc>
        Example of using SVGT 1.2 features for smooth playback
        during progressive downloading.
     </desc>
     <defs>
       <prefetch xlink:href="#scene1"
                 mediaCharacterEncoding="UTF-16"
                 mediaTime="5s" mediaSize="94230" />
       <prefetch xlink:href="#scene2"
                 mediaCharacterEncoding="UTF-16"
                 mediaTime="10s" mediaSize="283474" />
       <prefetch xlink:href="#scene3"
                 mediaCharacterEncoding="UTF-16"
                 mediaTime="15s" mediaSize="627638" />
     </defs>
     <g xml:id="scene1">
       <discard begin="6s"/>
       <!-- graphics for scene 1 go here -->
     </g>
     <g xml:id="scene2">
       <discard begin="16s"/>
       <!-- graphics for scene 2 go here -->
     </g>
     <g xml:id="scene3">
       <discard begin="21s"/>
       <!-- graphics for scene 3 go here -->
     </g>
</svg>

5.10 Common attributes

5.10.1 Attributes common to all elements: 'id' ,'xml:id' ,'xml:base' ,'class' , 'id' 'role' , 'xml:id' 'rel' ,'rev' ,'about' ,'content' ,'datatype' ,'property' ,'resource' , and 'xml:base' 'typeof'

The 'id' ,'xml:id' ,'xml:base' , 'class' , 'id' 'role' , 'xml:id' 'rel' , 'rev' ,'about' ,'content' ,'datatype' ,'property' ,'resource' , and 'xml:base' 'typeof' attributes are available on all elements required defined by SVG Tiny 1.2: Attribute definitions: 1.2. Some of these elements, such as 'xml:id' , class 'id' = <XML-NMTOKENS> , and 'xml:base' This attribute indicates membership in one may have a direct effect on the structure and rendering of SVG, while others may only affect SVG indirectly, or more sets. Multiple set names must may be separated by white space characters. Animatable : yes. used only for auxiliary processing of SVG content. See extensible metadata attributes for more details.

The 'id' and 'xml:id' attributes

Both the 'xml:id' and 'id' attributes specify a unique identifier for the element. 'xml:id' is intended to represent type <ID> universally across all document types.

It is strongly recommended that SVG Generators generators only use 'xml:id' to assign identity to elements. For backwards compatibility purposes, one may also specify the 'id' attribute but such an approach is not without issues:

• it is expected that the

  The 'id' attribute will may be deprecated in a future version of this specification, and therefore that SVG Generators generators should transition to using 'xml:id' only as early as possible; possible.

• there

  There remains only one single id field on the SVGElement interface, therefore when it is updated both attributes must be updated too as a consequence; correspondingly.

• consequently,

  Consequently, since SVGElement :: the id attribute of the SVGElement interface is updated when one of the attribute values is modified (e.g. using by the setAttributeNS() , setTraitNS() , or setTrait() methods), the other attribute must be set to the same value; value.

• when

  When both 'id' and 'xml:id' are specified on the same element but with different values, the SVGElement :: id field must return either of the values but should give precedence to value of the 'xml:id' attribute.

• when

  When both 'id' and 'xml:id' are specified on the same element, implementation implementations should not consider the 'id' attribute to be of type ID.

The 'xml:base' attribute

This attribute specifies a base IRI other than the base IRI of the document or external entity. Refer to XML Base [ XML-BASE ].

The 'class' attribute

The 'class' attribute assigns one or more class names to an element. The element may be said to belong to these classes. A class name may be shared by several element instances. The class attribute has several roles:

• As a style sheet selector (when an author wishes to assign style information to a set of elements). Note: SVG Tiny 1.2 does not mandate the support of style sheets.
• For general purpose processing by user agents.

The 'role' attribute

The 'role' attribute assigns one or more role values to an element. The element may be said to have these roles. A role value may be shared by several element instances. Unlike the 'class' attribute, 'role' attribute values are intended to be selected from a predefined set of values with specific semantic aspects that are assigned to the element, such as those defined in the ARIA ontology and with future SVG specifications.

The 'role' attribute is intended to functionally align with the XHTML Role Attribute Module .

The 'rel' attribute

The 'rel' attribute assigns one or more relationship values to an element. The value of the 'rel' attribute expresses the relationships between two resources. For 'a' elements in particular, the 'rel' attribute indicates the relationship that the linked resource holds for the element's children or the element's containing document.

The 'rev' attribute

The 'rev' attribute assigns one or more relationship values to an element. The value of the 'rev' attribute expresses the reverse relationships between two resources. For 'a' elements in particular, the 'rev' attribute indicates the relationship that the element's children or the element's containing document holds for the linked resource.

The 'about' attribute

The 'about' attribute assigns one or more relationship values to an element. The value of the 'about' attribute is intended to be used for stating the subject of the element's data.

The 'content' attribute

The 'content' attribute provides a plain text value that may be suitable for humans, or may be machine-readable, depending on the context. In general, this should only be used to supplement textual child content, or to be used on elements which do not normally take text as child content.

The 'datatype' attribute

The 'datatype' attribute associates a datatype for another attribute with an attribute with a plain text string.

The 'property' attribute

The 'property' attribute is used for expressing relationships between a subject and some literal text.

The 'resource' attribute

The 'resource' attribute associates a resource, normally expressed with an IRI reference ,to the element, in a manner that does not normally resolve the IRI reference .

The 'typeof' attribute

The 'typeof' attribute associates one or more datatypes with the element.

5.10.2 The Attributes for character-content elements: 'xml:lang' and 'xml:space' attributes

Elements that might contain character data content have attributes 'xml:lang' and 'xml:space' : to specify the natural language and whitespace processing of the content.

<attribute name='xml:space' svg:animatable='false' svg:inheritable='false'>
   <choice>
      <value>default</value>
      <value>preserve</value>
   </choice>
</attribute>
<attribute name='xml:lang' svg:animatable='false' svg:inheritable='false'>
  <choice>
     <ref name='LanguageCode.datatype'/>
     <empty/>
  </choice>
</attribute>