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:

Toller Podcast zu Künstliche Intelligenz von Sascha Lobo
Wir von werkraum träumen ja schon seit langem vom eigenen Podcast, wäre das nicht immer so viel spannende Projekte, die es zu erledigen gibt. Solange hören wir einfach andere…
Matomo im DDEV installieren
Ich zeige euch wie man eine lokale Matomo Instanz im DDEV nutzen kann.
Strukturierte Daten - schema.org
Suchmaschinen mit den richtigen Daten füttern ist einfacher als man denkt.