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 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 20000302 Stylable//EN"
      "http://www.w3.org/TR/WD-SVG-20000302/DTD/svg-20000302-stylable.dtd">
    <svg width="4in" height="3in">
      <desc>This valid svg document draws a triangle which is a hyperlink
      </desc>
      <a xlink:href="http://www.w3.org">
        <path d="M 0 0 L 200 0 L 100 200 z"/>
      </a>
    </svg>

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/2000/svg-20000302-stylable'>
      <desc>This well formed svg document draws a triangle which is a hyperlink
      </desc>
      <a xmlns:xlink="http://www.w3.org/2000/xlink/namespace/"
         xlink:type="simple" xlink:show="replace" xlink:actuate="onRequest"
         xlink:href="http://www.w3.org">
        <path d="M 0 0 L 200 0 L 100 200 z"/>
      </a>
    </svg>

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.

    <!ENTITY % aExt "" >
    <!ELEMENT a       (#PCDATA|desc|title|defs|
                       path|text|rect|circle|ellipse|line|polyline|polygon|
                       use|image|svg|g|switch|a|
                       tspan|tref|textPath|altGlyph
                       %ceExt;%aExt;)* >
    <!ATTLIST a
      %stdAttrs;
      %langSpaceAttrs;
      class %ClassList; #IMPLIED
      transform %TransformList; #IMPLIED
      %graphicsElementEvents;
      %testAttrs;
      externalResourcesRequired %Boolean; #IMPLIED
      xmlns:xlink CDATA #FIXED "http://www.w3.org/2000/xlink/namespace/"
      xlink:type (simple|extended|locator|arc) #FIXED "simple"
      xlink:role CDATA #IMPLIED
      xlink:title CDATA #IMPLIED
      xlink:show (new|embed|replace) 'replace'
      xlink:actuate (onRequest|onLoad) #FIXED 'onRequest'
      xlink:href %URI; #REQUIRED
      target %LinkTarget; #IMPLIED
      %StylableSVG-StyleAttribute;
      %FinalFormSVG-ContainerAttrs;
      %FinalFormSVG-FillStrokeAttrs;
      %FinalFormSVG-GradientAttrs;
      %FinalFormSVG-GraphicsAttrs;
      %FinalFormSVG-MarkerAttrs;
      %FinalFormSVG-TextContainerAttrs;
      %FinalFormSVG-TextElementAttrs; >

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 = '<string>'
  A generic string used to describe the function of the link's content. 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 = 'replace'
  Indicates that upon activation of the link the referenced document will. replace the entire contents of the current document. Refer to the "XML Linking Language (XLink)" [XLink].
  Animatable: no.
xlink:actuate = 'onRequest'
  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].
  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.

The DTD definition of an 'a' element allows for any number of 'desc', 'title' or 'defs' elements as children, with no restrictions on the placement of these elements within the 'a' element. This flexibility is only present due to the mixed content rules for XML [XML-MIXED]. Representations of future versions of the SVG language might use more expressive representations than DTDs which allow for more restrictive mixed content rules. It is strongly recommended that at most one 'desc', at most one 'title' and at most one 'defs' element appear, and that these elements appear before any other child elements or character data content to match the restrictions on 'desc', 'title' and 'defs' that appear in the rest of the SVG DTD. If user agents need to choose among multiple 'desc' or 'title' elements for processing (e.g., to decide which string to use for a tooltip), the user agent shall choose the first one. All of the 'defs' elements shall be available for processing.

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

    http://www.MyCompany.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://www.MyCompany.com/MyDrawing.svg#Lamppost

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

### 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, 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:

- 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(...), enableZoomAndPanControls(...) 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 ::= 'enableZoomAndPanControls(' 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 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 to the parameter values for the preserveAspectRatio attribute on the 'svg' element. For example, preserveAspectRatio(xMidYMid).
- The parameter values for transformSpec corresponds to 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 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 to the parameter values for the enableZoomAndPanControls attribute on the 'svg' element. For example, enableZoomAndPanControls(false).
- The parameter values for viewTargetSpec corresponds to 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] 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:

- 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 (%descTitle;%viewExt;) >
    <!ATTLIST view
      %stdAttrs;
      viewBox %ViewBoxSpec; #IMPLIED
      preserveAspectRatio %PreserveAspectRatioSpec; 'xMidYMid meet'
      enableZoomAndPanControls (true | false) "true"
      viewTarget CDATA #IMPLIED
      externalResourcesRequired %Boolean; #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, enableZoomAndPanControls.

## 17.3 DOM interfaces

The following interfaces are defined below: SVGAElement, SVGViewSpec, SVGViewElement.

### Interface SVGAElement

The SVGAElement interface corresponds to the 'a' element.

IDL Definition

      interface SVGAElement : SVGElement, SVGLangSpace, SVGTransformable, SVGTests, SVGURIReference, EventTarget, SVGURIReference {
                 attribute DOMString className;
                 attribute DOMString target;

      #ifdef STYLABLESVG
                 // The following pre-defined attribute collections are only
                 // available in the DOM for Stylable SVG.
                 STYLABLESVGStyleAttribute;
      #endif STYLABLESVG

      #ifdef FINALFORMSVG
                 // The following pre-defined attribute collections are only
                 // available in the DOM for Final Form SVG.
                 FINALFORMSVGContainerAttrs;
                 FINALFORMSVGFillStrokeAttrs;
                 FINALFORMSVGGradientAttrs;
                 FINALFORMSVGGraphicsAttrs;
                 FINALFORMSVGMarkerAttrs;
                 FINALFORMSVGTextContainerAttrs;
                 FINALFORMSVGTextElementAttrs;
      #endif FINALFORMSVG
          };

Attributes
  DOMString className
    Corresponds to attribute class on the given element.
  DOMString target
    Corresponds to attribute target on the given 'a' element.

### Interface SVGViewSpec

The interface corresponds to an SVG View Specification.

IDL Definition

      interface SVGViewSpec : SVGFitToViewBox {
                 attribute SVGTransformList transform;
                 attribute boolean          enableZoomAndPanControls;
                 attribute SVGElement       viewTarget;
        readonly attribute DOMString        viewBoxString;
        readonly attribute DOMString        preserveAspectRatioString;
        readonly attribute DOMString        transformString;
        readonly attribute DOMString        enableZoomAndPanControlsString;
        readonly attribute DOMString        viewTargetString;
      };

Attributes
  SVGTransformList transform
    Corresponds to the transform setting on the SVG View Specification.
  boolean enableZoomAndPanControls
    Corresponds to the enableZoomAndPanControls setting on the SVG View Specification.
  SVGElement viewTarget
    Corresponds to the viewTarget setting on the SVG View Specification.
  readonly DOMString viewBoxString
    Corresponds to the viewBox setting on the SVG View Specification.
  readonly DOMString preserveAspectRatioString
    Corresponds to the preserveAspectRatio setting on the SVG View Specification.
  readonly DOMString transformString
    Corresponds to the transform setting on the SVG View Specification.
  readonly DOMString enableZoomAndPanControlsString
    Corresponds to the enableZoomAndPanControls setting on the SVG View Specification.
  readonly DOMString viewTargetString
    Corresponds to the viewTarget setting on the SVG View Specification.

### Interface SVGViewElement

The SVGViewElement interface corresponds to the 'view' element.

IDL Definition

      interface SVGViewElement : SVGElement, SVGFitToViewBox {
                 attribute boolean    enableZoomAndPanControls;
                 attribute SVGElement viewTarget;
      };

Attributes
  boolean enableZoomAndPanControls
    Corresponds to attribute enableZoomAndPanControls on the given 'view' element.
  SVGElement viewTarget
    Corresponds to attribute viewTarget on the given 'view' element.

previous next contents properties index