Best Practice: SVG in HTML einsetzen
Wenn es darum geht animierte SVG schnell und einfach einzubinden, dann ist unser Tipp, die SVG im IMG-Tag einzubinden. Alle Browser können gut mit IMG-Tag umgehen und behandeln es wie eine Image-Bild-Datei. Einziger Nachteil ist, dass einige Browser aus Sicherheitsgründen die Animation über IMG-Tag ausgeschaltet haben.
(Hier ein Beispiel mit unserem Werkraum Logo)
Deshalb gibt es für SVG mit Animationen andere Möglichkeiten wie das Objekt-Tag oder auch das direkte SVG Einbinden. Diese können aber von einigen Browsern nicht angezeigt werden und führen meist zu Darstellungsfehlern.
Iframe ist da eine bessere Methode. Schwachpunkt ist die responsive Darstellung, sie lässt sich nur mit viel Aufwand realisieren.
Darum zum Schluss unsere Geheimtipp:
Dieser Code hat seine Vorteile. Da Browser, die nicht mit SVG anfangen können den SVG-Tag ignorieren. Der IMAGE-Tag wird als Tippfehler in IMG-Tag interpretiert und damit wie die oben genannten IMG-Tag angewendet. Browser die SVG können, nehmen es als SVG wahr und bindet den SVG im IMAGE-Tag ein.
Also viel Spaß beim Ausprobieren.
Hat dir der Artikel gefallen?
Werkraum News:
SVGs interaktiv gestalten
Erfahre hier, wie diese leistungsstarke Lösung die User Experience verbessert.
Besuche auf meiner Homepage simulieren
Du hast eine Website oder ein Projekt mit einem tollen Backend erstellt? Aber du bist dir nicht sicher, ob es auch vielen Besuchern standhalten wird?
Den TYPO3 Seitenbaum erweitern
TYPO3 bietet einige offene Schnittstellen in Form von Hooks oder Events, um das Backend an die eigenen Bedürfnisse anzupassen. Ich zeige hier eine Möglichkeit, den Seitenbaum…