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
].
<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>
Attribute definitions:
Indicates the SVG language version to which this document fragment conforms.
In SVG 1.0 and SVG 1.1 this attribute had the value '1.0' or '1.1' respectively, and SVG 1.2 adds the value '1.2' . See rules for version processing for further instructions, notably on handling of unsupported values.
Modifying the 'version' attribute using the DOM does not cause any change in behavior. In this case, the original value of the attribute is the one used for document processing.
Animatable : no.
Describes the minimum SVG language profile that the author believes is necessary to correctly render the content. See rules for baseProfile processing for further instructions.
This specification defines the values 'none' and 'tiny' . The value 'full' corresponds to all features in the SVG
language; for SVG 1.1, this corresponds to the language features
defined in the SVG 1.1
specification . Specification [ SVG11 ]. The value
'basic' was defined in the SVG
Mobile 1.1 specification .
SVG Profiles: SVG Tiny and SVG
Basic [ SVGM11
]. This specification corresponds to
baseProfile="tiny" and version="1.2" . . A
value of 'none' provides no
information about the minimum language profile that is necessary to
render the content.
The If the attribute
is not specified, the effect is as if a lacuna value of 'none' were
specified. is 'none' .
Modifying the 'baseProfile' attribute using the DOM does not cause any change in behavior. In this case, the original value of the attribute is the one used for document processing.
Animatable : no.
The intrinsic width of the SVG document fragment. Together with
the 'height' , 'viewBox' and 'preserveAspectRatio' attributes it defines
the intrinsic aspect ratio and (unless both width and height are
percentages) the intrinsic size of the svg element. See the
The initial viewport .
A negative value is an error (see Error
processing ). unsupported. A
value of zero disables rendering of the element.
The If the attribute
is not specified, the effect is as if a lacuna value of "100%" were specified. is '100%' .
Animatable : yes.
The intrinsic height of the SVG document fragment.
A negative value is an error (see Error
processing ). unsupported. A
value of zero disables rendering of the element.
The If the attribute
is not specified, the effect is as if a lacuna value of "100%" were
specified. is '100%' .
Animatable : yes.
See attribute definition for description.
Animatable : yes.
See attribute definition for description.
Animatable : yes.
Indicates a moment in time which is most relevant for a
still-image of the animated SVG content. This time may be used as a
hint to the SVG User Agent user agent for rendering a still-image
of an animated SVG Document,
document, such as a preview. A value of
'none' means that no 'snapshotTime' is available. See an example 05_22 for an
example of using the 'snapshotTime' attribute.
The If the attribute
is not specified, the effect is as if a lacuna value of is
'none' was
specified. .
Animatable : no.
Indicates whether it is possible to seek backwards. backwards in the
document. In earlier versions of SVG there was no need to put
restrictions on the direction of seeking but with the newly
introduced facilities for long-running documents (e.g. the 'discard'
element) there is sometimes a need to restrict this.
If 'playbackOrder' is set to 'forwardOnly' , the content will probably contain 'discard' elements or scripts that destroy resources, thus seeking back in the document's timeline may result in missing content. If 'playbackOrder' is 'forwardOnly' , the content should not provide a way, through hyperlinking or script, of seeking backwards in the timeline. Similarly the UA should disable any controls it may provide in the user interface for seeking backwards. Content with 'playbackOrder' = 'forwardOnly' that provides a mechanism for seeking backwards in time may result in undefined behavior or a document that is in error.
The default lacuna value is 'all' .
Animatable : no.
Controls the initialization of the timeline for the document.
The 'svg' element controls the
Document Timeline document timeline , which is the timeline of
the 'svg' element's time container. For
progressively loaded animations, the author would typically set
this attribute to 'onStart' , thus
allowing the timeline to begin as the document loads, rather than
waiting until the complete document is loaded.
load
event for the
rootmost The default lacuna value is 'onLoad' .
Animatable : no.
Identifies the default scripting language for the given
document. This attribute sets the default scripting language for
all the instances of script in the document fragment. This language
must be used for all scripts that do not specify their own
scripting language. The <content-type> value content-type specifies a media type, per Multipurpose Multipart Internet Mail Extensions Extensions:
(MIME) PartTwo Part Two: Media Types [ RFC2046 ]. The default lacuna
value is "application/ecmascript" .
Animatable : no.
See attribute definition for description.
Animatable : No no.
See attribute definition for description.
Animatable : Yes yes.
See definition .
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>
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.
<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>
Attribute definitions:
See attribute definition for description.
Animatable : Yes yes.
See definition .
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.
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>
Attribute definitions:
An IRI reference to
that identifies the target
element to discard. See the definition of target element . If
'xlink:href' on
animation elements for details on identifying a target
element.
Note that if the target element is
not part of the current SVG document fragment , then whether the
discard target element will be
removed or not is ignored.
defined by the host language .
If the 'xlink:href' attribute is not provided, then the target element will be the immediate parent element of the discard element.
Animatable : no.
Indicates when the target element will be discarded. See the definition of 'begin' on animation elements for details.
The lacuna value is '0s' .This indicates that the target element should be discarded immediately once the document begins.
Animatable :no.
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:
<?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>
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.
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.
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 .
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>
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:
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>
Attribute definitions:
The x-axis coordinate of one corner of the rectangular region into which the referenced element is placed.
The If the attribute
is not specified, the effect is as if a lacuna value of "0" were
specified. is '0' .
Animatable : yes.
The y-axis coordinate of one corner of the rectangular region into which the referenced element is placed.
The If the attribute
is not specified, the effect is as if a lacuna value of "0" were
specified. is '0' .
Animatable : yes.
An IRI Reference reference to an element/fragment within
an SVG document. An invalid IRI
reference is an
unsupported value
.An empty attribute value (
xlink:href="" ) disables rendering
of the element. If the attribute is not
specified, the effect is as if an empty The lacuna value (
"" ) was specified.
is the empty string.
Animatable : yes.
See attribute definition for description.
Animatable : Yes yes.
See definition .
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' .
<?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.
<?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.
<?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.
<?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>
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>
Attribute definitions:
The x-axis coordinate of one corner of the rectangular region.
If the attribute is not specified, the effect is as if a value of "0" were specified.
Animatable : yes.
The y-axis coordinate of one corner of the rectangular region.
If the attribute is not specified, the effect is as if a value of "0" were specified.
Animatable : yes.
The width of the rectangular region.
A negative value is an error (see Error
processing ). unsupported. A
value of zero disables rendering of the element. If the attribute
is not specified, the effect is as if a value of "0" were specified.
Animatable : yes.
The height of the rectangular region.
A negative value is an error (see Error
processing ). unsupported. A
value of zero disables rendering of the element. If the attribute
is not specified, the effect is as if a value of "0" were specified.
Animatable : yes.
See attribute definition for description.
Animatable :yes.
An IRI Reference .
to the image. An invalid IRI
reference is an
unsupported value
. An empty attribute value ( xlink:href="" ) disables rendering of the
element. If the attribute is not specified,
the effect is as if an empty The
lacuna value ( "" ) was
specified. is the empty
string.
Animatable : yes.
A hint about the expected Internet Media Type of the raster
image. Implementations may choose to not fetch images of formats
that they do not support. Note that if an Internet Media type
returned by the server, the server metadata is authoritative over
the type attribute. See TAG finding
Metadata hints in specifications in
the Authoritative
Metadata , TAG finding ([ MIME-RESPECT ],
section 5 Metadata Hints in
Specifications. 5). For optimizing
download time by requiring a particular content format authors are
encouraged to use 'requiredFormats' , instead of 'type' .
Animatable : no.
See attribute definition for description.
Animatable : Yes
See definition .
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>
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>
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 .
Attribute definitions:
See attribute definition for description.
Animatable : no.
See attribute definition for description.
Animatable : no.
See attribute definition for description.
Animatable : no.
See attribute definition for description.
Animatable : no.
See attribute definition for description.
Animatable : no.
See attribute definition for description.
Animatable : Yes yes.
See definition .
Definition of 'requiredFeatures' :
A conditional processing
attribute that controls
conditional processing based on whether the specified features are
supported by the SVG user agent . The value is a list of
feature strings, with the individual values separated by white
space. Determines whether all of the named
features are supported by the SVG User Agent . Only feature
strings defined in an existing version of the SVG specification at
the time the document is authored (such as the current those listed in
this document's Feature String
appendix) should be used, while third party extension features that
are not part of an SVG standard should be indicated using the
'requiredExtensions' attribute instead.
If all of the given features are supported,
then the
This attribute evaluates to
"true"; otherwise, true for the current
element purpose of conditional
processing if and its children
only if all of the specified features
are skipped and thus will not be
rendered. supported. As with all
conditional processing
attributes Animatable :
no. , if 'requiredFeatures' If
the attribute is not present,
specified, then its implicit return value is "true". If a null string or
empty string value is given it
implicitly evaluates to attribute
requiredFeatures , true. However,
if the attribute returns "false".
'requiredFeatures' is often used in
conjunction with the specified, but has
an empty string value, it evaluates to false. See Conditional
processing overview for details on
how 'switch' conditional processing attributes
element. If the 'requiredFeatures' is used in
other situations, then it represents a simple switch on the given
element whether to render the element or not. influence document processing.
Animatable :no.
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 .
Definition of requiredExtensions : 'requiredExtensions' :
A conditional processing
attribute that controls
conditional processing based on whether the specified extensions
are supported by the SVG user agent . The value is a list of
IRI
References references which identify the required
extensions, with the individual values separated by white space.
Determines whether all of the named
extensions are supported by the user agent. If all of the given
extensions are supported, then the
This attribute evaluates to
"true"; otherwise, true for the current
element purpose of conditional
processing if and its children
only if all of the specified extensions
are skipped and thus will not be
rendered. supported. As with all
Animatable : no. conditional processing
attributes If a given
, if IRI
Reference 'requiredExtensions' contains white space within itself, that white space
must be escaped. If the attribute is not present, specified,
then its implicit return value
it implicitly evaluates to true. However, if
the attribute is "true". If a null
string or specified, but has an
empty string value is given value, it evaluates to attribute 'requiredExtensions' false. See Conditional
processing overview for details on
how , the conditional processing attribute returns "false". 'requiredExtensions'
influence document processing.
Animatable :no.
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.
Definition of 'systemLanguage' :
A conditional processing
attribute that controls
conditional processing based on the system language. The
value is a comma-separated list of language names tags as defined
in [ RFC3066 ] Animatable : no. BCP
47 ([ BCP 47
], section 2).
Evaluates This
attribute evaluates to "true"
true for the purpose of conditional
processing if one of the languages indicated by user
preferences exactly equals one of the
languages given in the value of this parameter, attribute,
or if one of the languages indicated by user preferences exactly
equals a prefix of one of the languages given in the value of this
parameter attribute such that the first tag character
following the prefix is "-". Evaluates
U+002D HYPHEN-MINUS ("-"). As with all
conditional processing
attributes ,if
'systemLanguage'
is not specified, then it implicitly
evaluates to "false" otherwise.
true. However, if the attribute is specified,
but has an empty string value, it evaluates to false. See
Conditional processing overview for details on how conditional processing
attribute influence document
processing.
Animatable :no.
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:
<text systemLanguage="mi, en"><!-- content
goes here --></text>
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.
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.
Definition of 'requiredFormats' :
A conditional processing
attribute that controls
conditional processing based on whether the specified formats are
supported by the SVG user agent .The value is a list of Internet media types, with the
individual values separated by white space. For a list of
registered Internet Media media types
(formerly called MIME types), see the IANA Media Type
registry [ MIMETYPES
]. For a list of MIME Internet media
types types for audio/video
audio and video codecs, see the
IANA
codec registry and WAVE and AVI Codec Registries
[ CODECS
,RFC2361 . ].
The following As with all conditional processing
attributes ,if
'requiredFormats' is
not specified, then it implicitly evaluates to true. However, if
the attribute is specified, but has an empty string value, it
evaluates to false. See Conditional
processing overview for details on
how conditional processing
attribute influence document
processing.
Animatable :no.
The following formats must always
evaluate to "true" true in compliant
conforming SVG viewers:
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.
Definition of 'requiredFonts' :
A 'requiredFonts' conditional processing attribute
attribute is a generic that controls conditional processing attribute that can be used to enable or disable
particular branches in based on
whether the SVG document. It
defines specified fonts are available.
The value is a list of fonts, separated
by commas. The SVG User Agent must have access to all of the fonts,
either installed on the system or as an SVG font defined or embedded within the document, for
family names, using the attribute to evaluate to "true". 'requiredFonts'
uses same syntax as the 'font-family' property, for example when
processing quoted strings, multiple, leading and trailing spaces,
and case sensitivity. Animatable : no.
Generic family names may not be used,
however.
If the This attribute is not
present, then its implicit return value is "true". If a null string
or empty string value is given evaluates to attribute
true for the purpose of conditional
processing if and only if all of the specified fonts are available,
either installed on the system or as an SVG font defined or
embedded within the document. As with all 'requiredFonts' conditional processing attributes ,
the attribute returns "false".
if 'requiredFonts' is often used in conjunction with not specified, then it implicitly evaluates to true.
However, if the 'switch'
attribute is specified, but has an empty
string value, it evaluates to false. See Conditional
processing overview element. If
the for details on how 'requiredFonts' conditional processing attribute
is used in other situations, then it
represents a simple switch on the given element whether to render
the element or not. influence document
processing.
Animatable :no.
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 definition:
An attribute that specifies whether external resources are required for correct rendering of this element and its descendants.
load
event is not fired
for the element, and the document goes into an error state (see
Error processing ). The
document remains in an error state until all required resources
become available.Animatable :no.
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.
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):
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:
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:
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:
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:
Attributes cannot be given <percent-value> values.
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 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>
Attribute definitions:
Defines how much of the media to fetch in bytes as a function of the file size of the media.
When 'prefetch' refers to a resource in the
same document (i.e. a top level 'g' 'g' element),
the mediaSize 'mediaSize' attribute indicates the
size in bytes of the 'g' element and its children. That size
corresponds to the encodings used when transmitting the document.
If the document is encoded in UTF-8 [ RFC 3629
RFC3629 ]and
gzipped, ] and gzipped [ RFC1952
], then the size of the gzipped UTF-8
fragment applies. If that same document were decompressed and
transcoded to UTF-16 [ RFC 2781 RFC2781 ]
the hints will become stale. Since streaming hints are to be used
primarily in streaming scenarios, it is not expected that hint
staleness will occur frequently.
Animatable : no.
Defines how much of the media to fetch as a function of the
duration of the media. For discrete media (non-time based media
like image/png) such as PNG) using this attribute causes the
entire resource to be fetched.
prefetched.
When 'prefetch' refers to a resource in the
same document (i.e. a top level 'g'
element), this is the active duration of the referenced element. In
cases where the exact active duration can not be calculated
before hand beforehand (e.g. if
the end of an animation depends on user interaction), it is
suggested that the content author estimate the minimum active
duration for the referenced element. This estimate, even if zero,
will allow the SVG User Agent user agent to calculate how much of the
overall document to download before beginning playback in a
streaming scenario.
Animatable : no.
Defines how much network bandwidth, in bits per second, the
SVG
User Agent user
agent should use when doing performing the
prefetch. If the attribute is not specified, all available
bandwidth should be used.
Animatable : no.
Indicates the XML character set encoding (UTF-8, ISO-8859-1, etc.) that the 'mediaSize' attribute applies to. Tools that produce SVG should include this attribute if they specify the 'mediaSize' attribute. The main use of this attribute is to know what character encoding was used when measuring 'mediaSize' so that staleness of the hints may be easily detected. If the attribute is not specified, the encoding that was used to calculate the size is that which is returned by the server.
Animatable : no.
The 'mediaContentEncodings' attribute is a white
space separated list of the content encodings as defined in section
3.5 of HTTP/1.1 [ HTTP/1.1
RFC2616 ] (gzip, compress, etc.)
that the 'mediaSize' attribute applies to. The order
of the list is the order in which the content encodings were
applied to encode the data. Note that while situations in which
multiple content codings are applied are currently rare, they are
allowed by HTTP/1.1 and thus that functionality is supported by
SVG. Tools that produce SVG must include this attribute if
they specify the 'mediaSize' attribute and the
Content-Encoding is other than the identity encoding. The main use
of this attribute is to know what parameters were used when
measuring 'mediaSize' so that staleness of the hints
may be easily detected. If the 'mediaContentEncodings' attribute is not
specified it is as if the 'identity'
identity encoding value from HTTP/1.1
has had
been specified. This indicates that no transformation (i.e.
encodings) at all has been used.
Animatable : no.
An IRI reference to the resource to prefetch. An
invalid IRI
reference is an
unsupported value
.An empty attribute value (
xlink:href="" ) means that no
prefetching will occur. If the attribute is
not specified, the effect is as if an empty The lacuna value (
"" ) was specified.
is the empty string.
Animatable : no.
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>
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.
Attribute definitions:
This attribute for assigning specifies a unique name to
an identifier for the element.
Refer to the "xml:id xml:id Version 1.0"
Recommendation 1.0 [
XMLID ]. It is recommended that
new content should use 'xml:id'
instead.
Animatable : no.
This attribute for assigning specifies a unique name to
an identifier for the element.
Refer to the "xml:id xml:id Version 1.0"
1.0 [ xml:id XMLID ]. Recommended for new content.
Animatable : no.
This attribute specifies a base IRI .
Animatable :no.
This attribute indicates membership in one
or more sets. Any number of elements may be assigned to the
base same set.
Multiple set names must be separated by white space
characters.
IRI Animatable :yes.
This attribute indicates membership in one or more sets. Any number of elements may be assigned to the same set. Multiple set names must be separated by white space characters.
Animatable :yes.
This attribute indicates membership in one
or more sets. Any number of elements
may be assigned to the document
same set. Multiple set names must be
separated by white space characters.
Animatable :yes.
This attribute indicates membership in
one or external entity. Refer
more sets. Any number of elements may be
assigned to the "XML Base"
specification [ XML-BASE same set.
Multiple set names must be separated by white space
characters.
Animatable :yes.
This attribute indicates membership in one or more sets. Any number of elements may be assigned to the same set. Multiple set names must be separated by white space characters.
Animatable :yes.
This attribute contains plain text strings to be interpreted as appropriate.
Animatable : no. yes.
This attribute denotes a datatype for an attribute with a plain text string.
Animatable :yes.
This attribute indicates membership in one or more sets. Any number of elements may be assigned to the same set. Multiple set names must be separated by white space characters.
Animatable :yes.
This attribute contains a reference to a resource, normally expressed with an IRI reference
Animatable :yes.
This attribute indicates membership in one or more sets. Any number of elements may be assigned to the same set. Multiple set names must be separated by white space characters.
Animatable :yes.
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:
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 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, 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 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 both 'id'
and 'xml:id' are specified on the same element,
implementation implementations should not consider the 'id'
attribute to be of type ID.
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 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:
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 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 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 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 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 associates a datatype for another attribute with an attribute with a plain text string.
The 'property' attribute is used for expressing relationships between a subject and some literal text.
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 associates one or more datatypes with the element.
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>
Attribute definitions:
This is a standard XML attribute used to specify the language (e.g., English) used in the child text content and attribute values of the element it occurs on. The value is either a language tag as defined in IETF BCP 47 [ BCP 47 ] or the empty string, "" .Refer to Extensible Markup Language (XML) 1.0 ([ XML10 ], section 2.12) and Extensible Markup Language (XML) 1.1 ([ XML11 ], section 2.12) for the definition of this attribute.
Animatable :no.
This is a standard XML attribute used to
specify whether white space is preserved in character data. The
only possible values are "default" and
"preserve" .Refer
to < Extensible Markup
Language (XML) 1.0 ([
XML10
], section 2.10) and Extensible Markup Language (XML) 1.1
([ XML11
], section 2.10) for the definition of this
attribute. See also the discussion of white
space handling for text content
elements in SVG.