SVG g-Tag, symbol- und link-Tag

SVG 1.1 xmlns:xlink

In SVG 1.1 musste noch xmlns:xlink="http://www.w3.org/1999/xlink" angeben und xlink:href benutzt werden. xlink ist heute deprecated (veraltet), und stattdessen reicht ein einfaches href für alle modernen Browser. Mit SVG 2.0 wird das veraltete xlink:href-Attribut zu einem einfach href.

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="50">
	<a href="https://example.com" target="_blank">
		<text x="10" y="30" font-size="20" fill="blue">Klick mal wieder</text>
	</a>
</svg>

Links in externen SVG-Dateien

Klick- bzw. touchbare Links funktionieren allerdings nicht, wenn eine externe SVG-Datei mit HTML img eingebunden wird. Die Grafik muss entweder als object, iframe oder inline in die HTML-Seite eingebettet sein.

Dabei werden Textlinks nicht wie in HTML automatisch unterstrichen, sondern zeigen sich nur beim Hovern mit der Maus durch den Hand-Cursor. Erst ein text-decoration: underline, farbliches Herausstellen mit style-Attributen des a-Tags bringt den Link optisch zum Vorschein.

<a xlink:href=""> … </a>

<svg>
…
   <a href="/tutorial/svg.html">
      <text font-size="61" y="225" x="28" fill="#ffb380">LINK</text>
   </a>
   
   oder
   
   <text font-size="61px" y="225" x="28" fill="#ffb380">
      <a href="/tutorial/svg.html">LINK</a>
   </text>
   
…
</svg>

Links auf SVG-Formen und Gruppen

Genauso wieder wie bei HTML funktionieren klickbare Links in SVG nicht nur auf Text, sondern auf allen Elementen: rect, circle, path und group.

Fast immer es sogar besser, Links nicht auf SVG-Text zu setzen, denn der Text bildet keinen geschlossenen Block wie Text in HTML, sondern ein Klick muss schon den Strich der Zeichen treffen.

<a href="/tutorial/svg.html">
<g id="leafe" style="cursor:pointer">
  <path style="fill:hsl(190,30%,50%);stroke:hsla(190,60%,50%,0.2);stroke-width:14" d="…" />
  <path style="fill:hsl(190,30%,80%)" d="…" />
  <path id="overlay" style="fill:hsla(0,0%,100%,0.2)" d="…" />
</g>
</a>
<a href="/tutorial/svg-viewbox-koordinaten.html">
  <use transform="translate(6,580) rotate(-90)" href="#leafe" />
</a>

Das gilt auch für die Klick- und Touchziele in animierten SVGs:

<text y="46" x="29" fill="#f36841">Hosting</text>
<text fill="#95ba4c" x="29" y="84">Themes</text>
<text fill="#00a2c4" x="29" y="122">Plugins</text>
<rect id="hosting" fill-opacity="0" style="cursor:pointer" x="29" y="18" width="100" height="35"  />
<rect id="themes" fill-opacity="0" style="cursor:pointer" x="29" y="58" width="100" height="35"  />
<rect id="plugins" fill-opacity="0" style="cursor:pointer"x="29" y="98" width="100" height="35"  />

Darum liegen hier Rechtecke mit fill-opacity="0" über dem Text. Sie vergrößern die klick-sensitive Fläche für die Javascript-Animation.

Links in externen SVG-Dateien

Links können zwar auch in externen SVG-Dateien stehen, aber wenn die SVG-Grafik mit einem HTML img-Tag eingebunden wird, rendert der Browser zwar die Grafik, aber der Link ist nicht klickbar. Um eine Grafik mit klickbaren Links in die Webseite zu setzen, muss die Grafik inline ins Dokument oder wird mit einem iframe, object oder embed (einfachste Lösung) eingesetzt.

<embed src="grafik.svg" type="image/svg+xml" width="100%" height="100%">

In embed (genauso wie in iframe und object) bleibt die Interaktivität der SVG-Datei erhalten, Links, Skripte funktionieren. Man sagt auch: »SVG läuft in einem eigenen Dokumentenkontext«.