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 20000303 Stylable//EN"
"http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-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>
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-20000303-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>
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; %ExchangeSVG-ContainerAttrs; %ExchangeSVG-FillStrokeAttrs; %ExchangeSVG-GradientAttrs; %ExchangeSVG-GraphicsAttrs; %ExchangeSVG-MarkerAttrs; %ExchangeSVG-TextContainerAttrs; %ExchangeSVG-TextElementAttrs; > |
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.
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.
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 |
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:
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:
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:
The following interfaces are defined below: SVGAElement, SVGViewSpec, SVGViewElement.
The SVGAElement interface corresponds to the 'a' element.
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 EXCHANGESVG
// The following pre-defined attribute collections are only
// available in the DOM for Exchange SVG.
EXCHANGESVGContainerAttrs;
EXCHANGESVGFillStrokeAttrs;
EXCHANGESVGGradientAttrs;
EXCHANGESVGGraphicsAttrs;
EXCHANGESVGMarkerAttrs;
EXCHANGESVGTextContainerAttrs;
EXCHANGESVGTextElementAttrs;
#endif EXCHANGESVG
};
The interface corresponds to an SVG View Specification.
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;
};
The SVGViewElement interface corresponds to the 'view' element.
interface SVGViewElement : SVGElement, SVGFitToViewBox {
attribute boolean enableZoomAndPanControls;
attribute SVGElement viewTarget;
};