previous next contents properties index

# 17 Linking

### Contents

## 17.1 Links out of SVG content: the 'a' element

SVG provides an 'a' element, analogous to 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.

Example link01 assigns a hyperlink to an ellipse.

    <?xml version="1.0" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000802//EN"
      "http://www.w3.org/TR/2000/CR-SVG-20000802/DTD/svg-20000802.dtd">
    <svg width="5cm" height="3cm">
      <desc>Example link01 - a hyperlink on an ellipse
      </desc>
      <rect x=".01cm" y=".01cm" width="4.98cm" height="2.98cm"
            style="fill:none; stroke:blue"/>
      <a xlink:href="http://www.w3.org">
        <ellipse cx="2.5cm" cy="1.5cm" rx="2cm" ry="1cm"
                 style="fill:red"/>
      </a>
    </svg>

Example link01

View this example as SVG (SVG-enabled browsers only)

If the above SVG file is viewed by a user agent that supports both SVG and HTML, then clicking on the ellipse will cause the current window or frame to be replaced by the W3C home page.

    <!ENTITY % aExt "" >
    <!ELEMENT a       (#PCDATA|desc|title|metadata|defs|
                       path|text|rect|circle|ellipse|line|polyline|polygon|
                       use|image|svg|g|view|switch|a|altGlyphDef|
                       script|style|symbol|marker|clipPath|mask|
                       linearGradient|radialGradient|pattern|filter|cursor|font|
                       animate|set|animateMotion|animateColor|animateTransform|
                       color-profile|font-face
                       %ceExt;%aExt;)* >
    <!ATTLIST a
      %stdAttrs;
      xmlns:xlink CDATA #FIXED "http://www.w3.org/1999/xlink"
      xlink:type (simple|extended|locator|arc) #FIXED "simple"
      xlink:role CDATA #IMPLIED
      xlink:arcrole CDATA #IMPLIED
      xlink:title CDATA #IMPLIED
      xlink:show (new|replace) 'replace'
      xlink:actuate (onRequest|onLoad) #FIXED 'onRequest'
      xlink:href %URI; #REQUIRED
      %testAttrs;
      %langSpaceAttrs;
      externalResourcesRequired %Boolean; #IMPLIED
      class %ClassList; #IMPLIED
      style %StyleSheet; #IMPLIED
      %PresentationAttributes-All;
      transform %TransformList; #IMPLIED
      %graphicsElementEvents;
      target %LinkTarget; #IMPLIED >

Attribute definitions:

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].
  Animatable: no.
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].
  Animatable: no.
xlink:role = '<uri>'
  A URI reference that identifies some resource that describes the intended property. When no value is supplied, no particular role value is to be inferred. Refer to the "XML Linking Language (XLink)" [XLink].
  Animatable: no.
xlink:arcrole = '<uri>'
  A URI reference that identifies some resource that describes the intended property. The arcrole attribute corresponds to the [RDF] notion of a property, where the role can be interpreted as stating that "starting-resource HAS arc-role ending-resource." This contextual role can differ from the meaning of an ending resource when taken outside the context of this particular arc. For example, a resource might generically represent a "person," but in the context of a particular arc it might have the role of "mother" and in the context of a different arc it might have the role of "daughter." When no value is supplied, no particular role value is to be inferred. Refer to the "XML Linking Language (XLink)" [XLink].
  Animatable: no.
xlink:title = '<string>'
  Human-readable text describing the link. Refer to the "XML Linking Language (XLink)" [XLink].
  Animatable: no.
xlink:show = 'new | replace'
  Indicates whether, upon activation of the link, a new view is created for the target of the link or whether the contents of the view are replaced by the target of the link. Refer to the "XML Linking Language (XLink)" [XLink].
  Animatable: no.
xlink:actuate = 'onRequest'
  Indicates whether the contents of the referenced object are incorporated upon user action or automatically (i.e., without user action). Refer to the "XML Linking Language (XLink)" [XLink].
  Animatable: no.
xlink:href = "<uri>"
  The location of the referenced object, expressed as a URI reference. Refer to the "XML Linking Language (XLink)" [XLink].
  Animatable: yes.
target = "<frame-target>"
  This attribute has applicability when the current SVG document is used as part of an HTML [HTML4] or XHTML [XHTML] parent document which defines multiple frames. This attribute specifies the name of an HTML or XHTML frame into which a document is to be opened when the hyperlink is activated. For more information, refer to the appropriate HTML or XHTML specifications.
  Animatable: yes.

Attributes defined elsewhere:
  %stdAttrs; %langSpaceAttrs;, class, transform, %graphicsElementEvents;, %testAttrs;, externalResourcesRequired style, %PresentationAttributes-All;.

## 17.2 Linking into SVG content: URI fragments and SVG views

### 17.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://example.com might have the following URI:

    http://example.com/MyDrawing.svg

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:

    http://example.com/MyDrawing.svg#Lamppost

Because SVG content often represents 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.

### 17.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 defines the meaning of the "selector" or "fragment identifier" portion of URIs that locate resources of MIME media type "image/svg-xml".

An SVG fragment identifier can come in three forms:

- Shorthand bare name form of addressing (e.g., MyDrawing.svg#MyView). This form of addressing, which allows addressing an SVG element by its ID, is compatible with the fragment addressing mechanism for older versions of HTML and the shorthand bare name formulation in "XML Pointer Language (XPointer)" [XPTR]. (The bare name form of addressing #MyElement is equivalent to the XPointer formulation #xpointer(id('MyView')).)
- XPointer-compatible ID reference (e.g., MyDrawing.svg#xpointer(id('MyView'))). This form of addressing, which also allows addressing an SVG element by its ID, is compatible with the syntax for referencing IDs in "XML Pointer Language (XPointer)" [XPTR].
- SVG view specification (e.g., MyDrawing.svg#svgView(viewBox(0,200,1000,1000))). This form of addressing specifies the desired view of the document (e.g., the region of the document to view, the initial zoom level) completely within the SVG fragment specification. The contents of the SVG view specification are the five parameter specifications, viewBox(...), preserveAspectRatio(...), transform(...), zoomAndPan(...) and viewTarget(...), whose parameters have the same meaning as the corresponding attributes on a 'view' element.

An SVG fragment identifier is defined as follows:

    SVGFragmentIdentifier ::= BareName |
                              XPointerIDRef |
                              SVGViewSpec

    BareName ::= XML_Name

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

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

    SVGViewAttributes ::= SVGViewAttribute |
                          SVGViewAttribute ';' SVGViewAttributes

    SVGViewAttribute ::= viewBoxSpec |
                         preserveAspectRatioSpec |
                         transformSpec |
                         enableZoomAndPanControlsSpec |
                         viewTargetSpec

    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 ::= 'zoomAndPan(' TrueOrFalse ')'

    TrueOrFalse ::= 'true' | 'false'

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

where:

- XML_Name is an XML name (i.e., matches the name formulation rules in XML 1.0).
- Number is a real number.
- The parameter values for viewBoxSpec corresponds to the parameter values for the viewBox attribute on the 'svg' element. For example, viewBox(0,0,200,200).
- The parameter values for preserveAspectRatioSpec corresponds to the parameter values for the preserveAspectRatio attribute on the 'svg' element. For example, preserveAspectRatio(xMidYMid).
- The parameter values for transformSpec corresponds to the parameter values for the transform attribute that is available on many SVG elements. For example, transform(matrix(2 0 0 2 10 15)).
- The parameter values for transformSpec corresponds to the parameter values for the transform attribute that is available on many SVG elements. For example, transform(matrix(2 0 0 2 10 15)).
- The parameter values for enableZoomAndPanControlsSpec corresponds to the parameter values for the zoomAndPan attribute on the 'svg' element. For example, zoomAndPan(false).
- The parameter values for viewTargetSpec corresponds to the parameter values for the viewTarget attribute on the 'view' element. For example, viewTarget(MyElementID).

Spaces are not allowed in fragment specifications; thus, commas are used to separate numeric values within an SVG view specification (e.g., #svgView(viewBox(0,0,200,200))) and semicolons are 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 [HTML4] anchor 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:

- If no SVG fragment identifier is provided (e.g, the specified URI did not contain a "#" character, such as MyDrawing.svg), then the initial view into the SVG document is established using the view specification attributes (i.e., viewBox, etc.) on the outermost 'svg' element.
- If the SVG fragment identifier addresses a 'view' element within an SVG document (e.g., MyDrawing.svg#MyView or MyDrawing.svg#xpointer(id('MyView'))) then the closest ancestor 'svg' element is displayed in the viewport. Any view specification attributes included on the given 'view' element override the corresponding view specification attributes on the closest ancestor 'svg' element.
- If the SVG fragment identifier addresses any element other than a 'view' element, then the document defined by the closest ancestor 'svg' element is displayed in the viewport using the view specification attributes on that 'svg' element.

### 17.2.3 Predefined views: the 'view' element

The 'view' element is defined as follows:

    <!ENTITY % viewExt "" >
    <!ELEMENT view (%descTitleMetadata;%viewExt;) >
    <!ATTLIST view
      %stdAttrs;
      externalResourcesRequired %Boolean; #IMPLIED
      viewBox %ViewBoxSpec; #IMPLIED
      preserveAspectRatio %PreserveAspectRatioSpec; 'xMidYMid meet'
      zoomAndPan (disable | magnify | zoom) 'magnify'
      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) will be highlighted.
  Animatable: no.

Attributes defined elsewhere:
  %stdAttrs;, viewBox, preserveAspectRatio, zoomAndPan externalResourcesRequired.

## 17.3 DOM interfaces

The following interfaces are defined below: SVGAElement, SVGViewElement.

### Interface SVGAElement

The SVGAElement interface corresponds to the 'a' element.

IDL Definition

      interface SVGAElement :
                      SVGElement,
                      SVGURIReference,
                      SVGTests,
                      SVGLangSpace,
                      SVGExternalResourcesRequired,
                      SVGStylable,
                      SVGTransformable,
                      events::EventTarget {

        readonly attribute SVGAnimatedString target;
      };

Attributes
  readonly SVGAnimatedString target
    Corresponds to attribute target on the given 'a' element.

### Interface SVGViewElement

The SVGViewElement interface corresponds to the 'view' element.

IDL Definition

      interface SVGViewElement :
                      SVGElement,
                      SVGExternalResourcesRequired,
                      SVGFitToViewBox,
                      SVGZoomAndPan {

                 attribute SVGElement viewTarget;
                             // raises DOMException on setting
      };

Attributes
  SVGElement viewTarget
    Corresponds to attribute viewTarget on the given 'view' element.
    Exceptions on setting

      DOMException |  | NO_MODIFICATION_ALLOWED_ERR: Raised when the node is readonly.

previous next contents properties index