Code Example

SVG Image

<?xml version="1.0" standalone="no"?>

Right-click on the image to open the SVG viewer pop-up menu.
Click 'view SVG' to display the image in a new, full window to zoom & pan the image.  (SVG Viewer Tips)

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="500" height="500">

<!-- Links 1 -->
<a xlink:href="http://www.ilstu.edu/">
<rect x="10" y="10" width="100" height="30" rx="10" ry="10" style="fill:pink"/>
<text x="30" y="30" font-size="12">Click here</text>
</a>

<!-- Links 2 -->
<a xlink:href="http://www.acs.ilstu.edu/">
<text x="10" y="100" style="font-family:serif; stroke:green; fill:green;
font-size:25;">Or here</text>
</a>

<!-- Links 3 -->
<a xlink:href="http://www.itk.ilstu.edu/faculty/javila/ITK352/index.htm" target="new">
<polygon points="10 160,65 172,80 160,150 190,172 250,72 255,150 235" style="fill:lightblue"/>
<text x="81" y="200" font-size="12">Or even here</text>
</a>

</svg>

In the above examples, the text, rectangle, and polygon elements all provide links to different web pages. Any SVG element can act as a link. If you move your mouse over these elements, notice that the pointer changes accordingly, indicating this is a link.

We use the target=new attribute in the polygon's xlink to instruct the viewer to open up a new browser window when it is clicked.