17 Linking

Contents

• 17.1 Links out of SVG content: the 'a' element
• 17.2 Linking into SVG content: URI fragments and SVG views
  • 17.2.1 Introduction: URI fragments and SVG views
  • 17.2.2 SVG fragment identifiers
  • 17.2.3 Predefined views: the 'view' element
• 17.3 DOM interfaces
  • 17.3.1 Interface SVGAElement
  • 17.3.2 Interface SVGViewSpec

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 December 1999//EN" 
  "http://www.w3.org/Graphics/SVG/SVG-19991203.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/Graphics/SVG/SVG-19991203.dtd'>
  <desc>This well formed svg document draws a triangle which is a hyperlink
  </desc>
  <a xmlns:xlink="http://www.w3.org/XML/XLink/0.9" 
     xlink:type="simple" xlink:show="replace" xlink:actuate="user" 
     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 (%descTitleDefs;, (path|text|rect|circle|ellipse|line|polyline|polygon| use|image|svg|g|switch|a %ceExt;%aExt;)*) > <!ATTLIST a id ID #IMPLIED 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|embed|replace) 'replace' xlink:actuate (user|auto) #FIXED 'user' xlink:href CDATA #REQUIRED target CDATA #IMPLIED >

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 #xptr(id('MyView')).)
• XPointer-compatible ID reference (e.g., MyDrawing.svg#xptr(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 ::= 'xptr(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 [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:

• 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#xptr(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 id ID #IMPLIED viewBox CDATA #IMPLIED preserveAspectRatio CDATA 'xMidYMid meet' enableZoomAndPanControls (true | false) "true" viewTarget CDATA #IMPLIED >

17.3 DOM interfaces

17.3.1 Interface SVGAElement

The SVGAElement interface corresponds to the 'a' element.

interface SVGAElement : SVGElement {
  attribute DOMString role;
  attribute DOMString title;
  attribute DOMString show;
  attribute DOMString actuate;
  attribute DOMString href;
  attribute DOMString target;
};

17.3.2 Interface SVGViewSpec

This interface corresponds to an SVG View Specification.

interface SVGViewSpec {
  // Object-oriented access
  SVGRect viewBox;
  SVGPreserveAspectRatio preserveAspectRatio;
  SVGTransformList transform;
  boolean enableZoomAndPanControls;
  SVGElement viewTarget;

  // String-oriented access.
  // (Necessary because this information is part
  // of the original document and thus not available
  // in XML DOM.)
  DOMString viewBoxString;
  DOMString preserveAspectRatioString;
  DOMString transformString;
  DOMString enableZoomAndPanControlsString;
  DOMString viewTargetString;
};