[Warning] Warning

This section not yet updated for Inkscape v0.92.

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).


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"?>
   xmlns:xlink="http://www.w3.org/1999/xlink"     1
  <a xlink:href="http://www.w3.org/">     2
    <rect     3


The XLink name space declaration.


Start of XLink object with target of XLink.


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.


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


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


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


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


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


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.)


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.


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