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.

Kategorien

  Devblog

Hat dir der Artikel gefallen?

Werkraum News:

Such­ser­ver für TYPO3 im Ver­gleich

Folgendes Problem: Der Kunde möchte eine Suche auf der Firmenwebseite haben und als TYPO3-Entwickler steht man vor der Frage, welche Suche man dem Kunden empfiehlt. Für alle,...