SVG Links
SVG Links - <a>
The <a> element is used to create a link.
The <a> element can be used with both
text and graphics.
The <a> element has seven basic attributes:
| Attribute | Description |
|---|---|
| href | The URL to go to |
| download | Tells the browser to download the URL instead of go to it |
| hreflang | The language of the page the link points to |
| referrerpolicy | The referrer to send when fetching the URL |
| rel | The relationship of the target object to the link object |
| target | Where to open the link. Can be _self, _parent, _top, _blank, or a name |
| type | The MIME type for the linked URL |
Text as a Hyperlink
Text as a link (with the <a> element):
Here is the SVG code:
Example
<svg height="30" width="200" xmlns="http://www.w3.org/2000/svg">
<a href="https://w3.p2hp.com/graphics/"
target="_blank">
<text x="5" y="15" fill="red">I love SVG!</text>
</a>
</svg>
Try it Yourself »
Code explanation:
- The
hrefattribute defines the URL to go to - The
targetattribute defines where to open the link (here the link will open in a new window/tab)
Graphic as a Hyperlink
A circle as a link (with the <a> element):
Here is the SVG code:
Example
<svg height="100" width="200" xmlns="http://www.w3.org/2000/svg">
<a
href="https://w3.p2hp.com/graphics/" target="_blank">
<circle r="45" cx="50" cy="50" fill="red" />
</a>
</svg>
Try it Yourself »
