Wie macht man einen Link von aussen um eine SVG?

[draupnir]

Hallo zusammen,

ich möchte eine SVG mit einem Fallback (PNG) in meine Website einbauen. Da es das Logo sein soll, soll es anklickbar sein.

<a href="http://www.MyWebsite.tld" target="_blank" title="Link zu Homepage">
    <object type="image/svg+xml" data="logo.svg">
        <img src="logo.png" alt="Logo as png" />
    </object>
</a>

Leider musste ich feststellen, dass unter macOS in jedem Browser der Link gar nicht geht. Unter Windows ist nur ein schmaler Streifen unten auf der SVG anklickbar. Wenn ich die SVG ins <img> packe, dann klappt es, aber dann habe ich den Fallback nicht mehr.

Wie kann ich das Problem über <a> lösen?

Einen schöne Abend, J.

[JürgenB]

Hallo,

ich möchte eine SVG mit einem Fallback (PNG) in meine Website einbauen.

für welchen Browser benötigst du denn den Fallback?

https://caniuse.com/#search=svg

https://caniuse.com/#feat=svg-img

Gruß
Jürgen

[Gunnar Bittersmann]

@@draupnir

Leider musste ich feststellen, dass unter macOS in jedem Browser der Link gar nicht geht.

Doch, geht bei mir. Das object (gepunktete Linie im Codepen) sitzt auf der Grundlinie; die Unterlänge darunter ist clickbar – wie unter Windows:

Unter Windows ist nur ein schmaler Streifen unten auf der SVG anklickbar.

Keine Ahnung, warum das so ist.

Wie kann ich das Problem über <a> lösen?

a { display: inline-block }
object { pointer-events: none }

☞ Codepen 1

Browser-Support siehe Can I Use (bspw. nicht in IE ≤ 10).

Wie sich Browser, die kein SVG nicht unterstützen, bei der Verlinkung verhalten, musst du selbst testen; ich habe keinen solchen.

Die Frage bleibt – Jürgen stellte sie schon: Wozu braucht Gott ein Raumschiff?

Äh, wozu brauchst du ein Rastergrafik-Fallback?

Und wenn du einen brauchen solltest, dann ist das picture-Element dein Freund:

☞ Codepen 2

Hier greift der Fallback, wenn der Browser den Medientypen image/svg+xml nicht kennt; nicht aber, wenn die SVG-Ressource nicht geladen werden kann.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[JürgenB]

Hallo Gunnar,

Die Frage bleibt – Jürgen stellte sie schon: Wozu braucht Gott ein Raumschiff?

hat da noch einer Star Trek geguckt?

Gruß
Jürgen

[draupnir]

Guten Morgen und danke für Eure Hilfe. <picture> ist die Lösung. Allerdings musste ich dieses Element noch in die Javscript-Liste aufnehmen, die IE6 und Co sonst nicht verstehen würden. document.createElement("picture"); Jetzt klappt es überall mit dem Link und der Fallback kommt auch auf den alten Browsern.

Die Frage bleibt – Jürgen stellte sie schon: Wozu braucht Gott ein Raumschiff? Äh, wozu brauchst du ein Rastergrafik-Fallback?

Weil ich ein höflicher Mensch bin und jedem Browser seine Change geben will, soweit es technisch machbar ist. Keine Diskrimierung alter Browser, sie haben damals ihr Bestes für uns gegeben. ;-)

\//_ LLAP Jens.

[JürgenB]

Hallo Jens,

gegen die Berücksichtigung alter Browser spricht erst mal nichts. Aber dazu zwei Fragen:

Wie testest du mit alten Browsern? Ich habe irgendwann mal den Fall gehabt, das der IE8-Emulator im IE11 sich anders verhielt, als ein echter IE8. Ich habe daraufhin den Cut beim IE11 gesetzt. Und du darfst nicht vergessen, dass du den ganzen Fallback-Code, zu mindestens aber die Weichen, allen Besuchern vorwirfst.

Investierst du den gleichen Aufwand, um deine Seiten allen Besuchern zugänglich zu machen? Also alle Screen-Formate, alle Eingabegeräte, assistive Technologien (z.B. Screen-Reader, Lupen-Software), ...?

Gruß
Jürgen

[draupnir]

Hallo Jürgen,

ich arbeite auf einem MacBookPro (macOS 10.14) und habe aus alten Zeiten noch viele Browser-Programme. Ab macOS 10.15 werden diese nicht mehr laufen, weil die alten 32-Bit sind und dies nicht mit unterstützt wird. Aber dann weiche ich auch auf eine virtuelle Maschine mit macOS 10.14 aus.

Für Windows-Test nutze ich Parallels Desktop, eine virtuelle Maschine. Für diese habe ich ein XP mit IE6, ein XP mit IE7, ect bis Windows 10 mit Edge. Ich versuche meine Seiten auch barrierefrei zu machen, soweit es der Aufwand und Tests es ergeben.

Ich nutze folgende Websites zum Testen:

• https://validator.w3.org/unicorn/
• [https://validator.w3.org/checklink](Links prüfen)
• https://wave.webaim.org
• https://www.seoworkers.com/tools/analyzer.html

Für Linux mache ich aktuelle keine Tests, weil meine Website sich nur an Mac und Win-User wendet. Unter Win 10 habe ich trotzdem K-Melon installiert. ;-)

Dann bleiben nur noch Teste unter iOS und Android, am besten mit echter Hardware, statt mit Simulatoren.

Über das Testen von Website könnte man ein Buch schreiben. Soll ich?

Schönes Wochenende, Jens.

[Matthias Apsel]

Hallo draupnir,

Über das Testen von Website könnte man ein Buch schreiben. Soll ich?

Sehr gern. Du könntest mit einer Artikelserie in unserem Blog beginnen.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@draupnir

<picture> ist die Lösung. Allerdings musste ich dieses Element noch in die Javscript-Liste aufnehmen, die IE6 und Co sonst nicht verstehen würden. document.createElement("picture");

Das verstehe ich nicht. Wozu? Hast du am picture-Element irgentwelche Stile zu hängen?

Ansonsten musst du dem IE 6 da nichts bekanntmachen. Der tut doch genau das, was er soll: die ihm unbekannten Elemente picture und source ignorieren und img anwenden.

Genau das, was bei img innerhalb von object ja auch der Fall ist: Browser, die object nicht verstehen, ignorieren das einfach und zeigen das img an.

HTML ist progressive enhancement schon in die Wiege gelegt worden.

Äh, wozu brauchst du ein Rastergrafik-Fallback?

Weil ich ein höflicher Mensch bin und jedem Browser seine Change geben will, soweit es technisch machbar ist. Keine Diskrimierung alter Browser, sie haben damals ihr Bestes für uns gegeben. ;-)

„Ich unterstütze jeden Browser, ich optimiere für keinen.“ —Jeremy Keith

Völlig richtig. Die Unterstützung von IE 6 kann aber auch so aussehen, dass man auf die Grafik verzichtet und den Alternativtext ausgibt, der ja sowieso da sein muss, auch für die modernsten Browser.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[draupnir]

Das Javascript stammt noch aus alter Zeit. Vermutlich geht es ohne. <Javascript html5>

Das Logo einer Website sollte schon in allen Browsern zu sehen sein. Für die modernen ist SVG halt viel schöner. Und die alten müssen dann mit png leben.

[Gunnar Bittersmann]

@@draupnir

Das Javascript stammt noch aus alter Zeit. Vermutlich geht es ohne.

document.createElement("picture") bräuchtest du, wenn du das picture-Element stylen wolltest. Alte IEs ignorieren nämlich ihnen unbekannte Elemente völlig, d.h. sie wenden auch kein für diese angegebenes CSS auf sie an. Deshalb der Trick mit dem Bekanntmachen per JavaScript.

Du willst aber wohl das picture-Element nicht stylen. Wenn du dem Bild bspw. eine Größe geben wolltest, tust du das fürs img. Das wirkt dann auch auf das SVG aus dem source-Element – im Codepen ergänzt.

Das Logo einer Website sollte schon in allen Browsern zu sehen sein. Für die modernen ist SVG halt viel schöner. Und die alten müssen dann mit png leben.

Der Anwendungsfall ist nachvollziehbar.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!