SVG in HTML einbinden geht nicht?
Guten Tag Gutefrage-Community,
wie im Titel schon steht, habe ich das Problem, dass ich eine SVG-Datei nicht in meine HTML-Datei einbinden kann. Dies geht in keiner von mir erstellen HTML-Datei. Ich versuche es wie folgt einzubinden:
<img src="value.svg">
Die SVG-Datei sieht wie folgt aus:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 400 400">
<image id="v" x="5" y="5" width="390" height="390" xlink:href="..."/>
</svg>
5 Antworten
Viele Browser führen bei der Einbindung über das <img> Tag Links und Scripts in SVG Dateien nicht aus. Mit z.B. <object> eingebunden hingegen schon.
Die paar Zeilen kannst du doch einfach in die HTML-Datei selbst einfügen, oder? <svg> ist ja ein HTML-Tag, der von Browsern verstanden wird.
Ja gut, wenn sie umfangreicher sind, dann ist es eine andere Geschichte.
und man die SVG evtl sogar mehrmals im Quellcode hat.
Dafür gäbe es zumindest eine Lösung: Funktionen (z.B. JavaScript).
Die SVG-Datei sieht wie folgt aus:
Validiere mal Dein SVG. Zum Beispiel hier: https://validator.nu/
Alex
Validiere dein SVG und stelle sicher, dass der Wert für das href-Attribut stimmt. Ebenso kann es sein, dass die von dir genutzte Grafik beschädigt ist / der Browser den richtigen MIME-Typ nicht ermitteln kann.
Du kannst SVG-Grafiken übrigens noch über andere Wege einbinden. Entweder den SVG-Knoten direkt im HTML-Dokument platzieren oder einen object-Tag nutzen.
<object data="value.svg" height="..." type="image/svg+xml" width="..."></object>
Schau mal ob das dir helfen kann:
https://www.mediaevent.de/svg-in-html-seiten/
Ich würde mit CSS arbeiten, ist übersichtlicher, lies es dir selbst mal durch.
Naja schon, aber ist unschön wenn die SVG aus mehreren Hundert Zeilen besteht und man die SVG evtl sogar mehrmals im Quellcode hat. Für mich würde das manuelle einfügen pro SVG 24 vollgeschriebene Texteditor Zeilen bedeuten. Ist leider zu lang die ganze SVG-Datei hier rein zu schreiben.