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.

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.