16 Linking



16.1 Links out of SVG documents: the <a> element

SVG provides an <a> element, analogous to like HTML's <a> element, to indicate hyperlinks; those parts of the drawing which when clicked on will cause the current browser frame to be replaced by the contents of the URL specified in the href attribute.

The <a> element uses Xlink. (Note that the XLink specification is currently under development and is subject to change. The SVG working group will track and rationalize with XLink as it evolves.)

The following is a valid example of a hyperlink attached to a path (which in this case draws a triangle):

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG August 1999//EN" 
<svg width="4in" height="3in">
  <desc>This valid svg document draws a triangle which is a hyperlink
  <a xlink:href="http://www.w3.org">
    <path d="M 0 0 L 200 0 L 100 200 z"/>

Download this example

This is the well-formed equivalent example:

<?xml version="1.0" standalone="yes"?>
<svg width="4in" height="3in"
 xmlns = 'http://www.w3.org/Graphics/SVG/SVG-19990812.dtd'>
  <desc>This well formed svg document draws a triangle which is a hyperlink
  <a xmlns:xlink="http://www.w3.org/XML/XLink/0.9" 
     xlink:type="simple" xlink:show="replace" xlink:actuate="user" 
    <path d="M 0 0 L 200 0 L 100 200 z"/>

Download this example

In both examples, if the path is clicked on, then the current browser frame will be replaced by the W3C home page.
<!ELEMENT a (defs?,desc?,title?,
  xmlns:xlink CDATA #FIXED "http://www.w3.org/XML/XLink/0.9"
  xlink:type (simple|extended|locator|arc) #FIXED "simple" 
  xlink:role CDATA #IMPLIED
  xlink:title CDATA #IMPLIED
  xlink:show (new|parsed|replace) #FIXED 'replace'
  xlink:actuate (user|auto) #FIXED 'user'
  xlink:href CDATA #REQUIRED >

xmlns [:prefix] = "resource-name"
Standard XML attribute for identifying an XML namespace. This attribute makes the XLink [XLink] namespace available to the current element. Refer to the "Namespaces in XML" Recommendation [XML-NS].
xlink:type = 'simple'
Identifies the type of XLink being used. For hyperlinks in SVG, only simple links are available. Refer to the "XML Linking Language (XLink)" [XLink].
xlink:role = '<string>'
A generic string used to describe the function of the link's content. Refer to the "XML Linking Language (XLink)" [XLink].
xlink:title = '<string>'
Human-readable text describing the link. Refer to the "XML Linking Language (XLink)" [XLink].
xlink:show = 'replace'
Indicates that upon activation of the link the referenced document should replace the entire contents of the current document. Refer to the "XML Linking Language (XLink)" [XLink].
xlink:actuate = 'user'
Indicates that the contents of the referenced object are incorporated into the current document upon user action. Refer to the "XML Linking Language (XLink)" [XLink].
xlink:href = "<URI-reference>"
The location of the referenced object, expressed as a <URI-reference>. Refer to the "XML Linking Language (XLink)" [XLink].

16.2 Linking into SVG documents: URI fragments and SVG views

16.2.1 Introduction: URI fragments and SVG views

On the Internet, resources are identified using URIs (Uniform Resource Identifiers) [URI]. For example, an SVG file called MyDrawing.svg located at http://www.MyCompany.com might have the following URI:


A URI can also address a particular element within an XML document by including a URI fragment identifier as part of the URI. A URI which includes a URI fragment identifier consists of an optional base URI, followed by a "#" character, followed by the URI fragment identifier. For example, the following URI can be used to specify the element whose ID is "Lamppost" within file MyDrawing.svg:


Because SVG documents often represent a picture or drawing of something, a common need is to link into a particular view of the document, where a view indicates the initial transformations so as to present a closeup of a particular section of the document.

16.2.2 SVG fragment identifiers

To link into a particular view of an SVG document, the URI fragment identifier needs to be a correctly formed SVG fragment identifier. An SVG fragment identifier, which defines the meaning of the "selector" or "fragment identifier" portion of URIs that locate resources of MIME media type "image/svg".

An SVG fragment identifier can come in three forms:

An SVG fragment identifier is defined as follows:

SVGFragmentIdentifier ::= BareName |
                          XPointerIDRef |
BareName ::= XML_Name

XPointerIDRef ::= 'xptr(id(' XML_Name '))'

SVGViewSpec ::= 'svgView(' SVGViewAttributes ')'

SVGViewAttributes ::= SVGViewAttribute |
                      SVGViewAttribute ';' SVGViewAttributes
SVGViewAttribute ::= viewBoxSpec |
                     preserveAspectRatioSpec |
                     transformSpec |
                     allowZoomAndPanSpec |

viewBoxSpec ::= 'viewBox(' X ',' Y ',' Width ',' Height ')'

X ::= Number

Y ::= Number

Width ::= Number

Height ::= Number

preserveAspectRatioSpec = 'preserveAspectRatio(' AspectParams ')'

AspectParams ::= AspectValue |
                 AspectValue ',' MeetOrSlice

AspectValue ::= 'none' | 'xMinYMin' | 'xMinYMid' | 'xMinYMax' |
                'xMidYMin' | 'xMidYMid' | 'xMidYMax' |
                'xMaxYMin' | 'xMaxYMid' | 'xMaxYMax'

MeetOrSlice ::= 'meet' | 'slice'

Height ::= Number

transformSpec ::= 'transform(' TransformParams ')'

transformSpec ::= 'allowZoomAndPanSpec(' TrueOrFalse ')'

TrueOrFalse ::= 'true' | 'false'

viewTargetSpec ::= 'viewTarget(' XML_Name ')'


Spaces are not allowed in fragment specifications; thus, commas should be used to separate numeric values within an SVG view specification (e.g., #svgView(viewBox(0,0,200,200))) and semicolons should be used to separate attributes (e.g., #svgView(viewBox(0,0,200,200);preserveAspectRatio(none))).

When a source document performs a hyperlink into an SVG document via an HTML [HTML40] linking element (i.e., <a href=...> element in HTML) or an XLink specification [XLINK], then the SVG fragment identifier specifies the initial view into the SVG document, as follows:

16.2.3 Predefined views: the <view> element

The <view> element is defined as follows:
<!ELEMENT view (desc?,title?)
<!ATTLIST view
  preserveAspectRatio CDATA 'xMidYMid meet'
  allowZoomAndPan (true | false) "true" 
  viewTarget CDATA #IMPLIED >

Attribute definitions:

viewTarget = "XML_Name [XML_NAME]*"
Indicates the target object associated with the view. If provided, then the target element(s) should be highlighted.

Attributes defined elsewhere:
class, viewBox, preserveAspectRatio, allowZoomAndPan.