Adding Links

A link connects resources. In the traditional HTML framework, these resources would be things like web pages and images that have URLs. The SVG specification uses XLinks, which are more powerful but also more complicated than the original HTML links. We'll cover only the most simple use of XLinks here and refer you to the XLink specification from the W3C consortium for more details.

To add a link to an object, Right-Mouse Click on the object. Select Add link from the pop-up menu. Although nothing will seem to have happened, this will put an <svg:a> wrapper around the object (viewable with the Edit icon XML Editor... (Shift+Ctrl+X) dialog).

[Note]Note

The link wrapper <svg:a> acts as a group. To edit a wrapped object, you must double-click on the object to enter the wrapper. It is also possible to create a wrapper within a wrapper by accident. Pay attention to the Notification Region or use the Edit icon XML Editor... (Shift+Ctrl+X) dialog to keep track of what level you are at.

The attributes of an object's links can be modified through the Link attributes dialog that can be opened by selecting the Link Properties entry from the menu that pops up from a second Right-Mouse Click on the object (this time, you are clicking on the wrapper).

Link Dialog.
The Link attributes dialog.

To link an object to another web page, only the Href attribute must be supplied. An example reference is "http://www.w3.org/" (without the quotes) which is a link to the World Wide Web consortium.

Linked square example.
A simple SVG with link.

The following listing shows an SVG file with a link from the blue square. It can be directly displayed in a web browser or included via the <object> tag in an HTML or XHTML file.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"     1
   version="1.1"
   width="150"
   height="150">
  <a xlink:href="http://www.w3.org/">     2
    <rect     3
     width="90"
     height="90"
     x="30"
     y="30"
     style="fill:#0000ff;fill-opacity:0.75;stroke:#000000"/>
  </a>
</svg>
  

1

The XLink name space declaration.

2

Start of XLink object with target of XLink.

3

Source object of XLink.

Although the Link attributes dialog contains many entries, only a few are of great use. A couple have only one allowed value.

Href

The location of the referenced object. Clicking on the object will go to the specified link.

Target

If there are multiple targets (frames) in the referenced object, this attribute specifies which to use.

Type

Specifies the type of link. Only the simple link can be used in SVG.

Role

Specifies the role the resource is intended to have. Must be a valid URL.

Arcrole

Further specifies the role the resource is intended to have. Must be a valid URL.

Title

A human-readable description of the resource. Must be a character string. Browsers may show this as a tool tip when the mouse is over the object. (It is recommended to use the attribute title instead.)

Show

Specifies how the resource linked to should be displayed. Valid values are: new (open a new browser window), replace (replace current browser content), and embed (replace the content of the object). It appears that Firefox's behavior for replace follows that expected for embed.

Actuate

Specifies if the resource linked to should be traversed immediately. Valid values are: 'onRequest' (require input, e.g., a mouse click, loading target resource).