HTML-Tipps für Webentwickler

SVG in HTML

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Unabhängig davon, ob es sich bei Ihrem Projekt um eine "große" Website handelt oder eine "kleine", Sie einen Webshop aufsetzen wollen oder einen privaten Blog betreuen – eines haben alle Webseiten gemeinsam: die Basis ist HTML. Profitieren Sie in dieser praktischen Tipps&Tricks-Sammlung von der jahrelangen Erfahrung der Trainerin Florence Maurice, die Ihnen unbekannte Features nahe bringt, zur Übersicht über die einzelnen Versionen verhilft oder oftmals nur mit kleinen, pfiffigen Hinweisen Ihren Alltag als Webdesigner und -programmierer erleichtert.
04:41
  Lesezeichen setzen

Transkript

Es gibt eine ganze Reihe an Möglichkeiten, SVG mit HTML zu verknüpfen, und dank HTML5 können wir SVG auch direkt ins HTML-Dokument einfügen und auch einfach per CSS teilen. SVG steht für "skalierbare Vektorgrafiken" und hat eben den großen Vorteil der Skalierbarkeit, was heutzutage bei den äußerst unterschiedlichen Viewport-Größen und bei hochauflösenden Displays ungeheuer praktisch ist. Wenn ich so eine SVG-Datei habe, dann kann ich diese auf verschiedene Arten in mein HTML-Dokument einfügen. Ich kann zuerst einmal diese SVG-Datei genauso behandeln wie ein Bild in einem anderen Format und diese Datei mit dem "img"-Element und Source einbinden. Dann wird das angezeigt. Diese Methode hat ein paar Einschränkungen, so werden beispielsweise keine externen Dateien geladen im SVG-Bild, wenn man beispielsweise da ein Foto verwenden würde, und ein weiterer Nachteil ist, dass diese so eingebundenen Bilder nicht einfach per CSS modifiziert oder per JavaScript gescriptet werden können von diesem Dokument aus. Ein bisschen weniger Einschränkungen hat das "object"-Element. Da können beispielsweise auch externe Dateien geladen werden in dem SVG-Bild, und Sie können außerdem ein Fallback-Bild angeben zwischen "object Anfang", "object Ende". Andererseits würde man da heute vielleicht auch eher auf das "picture"-Element aus HTML5 zurückgreifen. Eine Alternative zu diesen beiden Techniken besteht darin, dass Sie den "svg"-Code einfach direkt in das HTML-Dokument schreiben. Und der große Vorteil davon ist, dass Sie nun auf die einzelnen Bestandteile Ihrer SVG-Grafik per CSS zugreifen können. Im Beispiel habe ich ein Haus, was aus mehreren Polygonen besteht, die ich jeweils mit Klassen benannt habe, und dann kann ich per CSS beispielsweise andere Farben für den "hover"-Zustand definieren. Und ich spreche diese einzelnen Polygone genauso an, wie ich sonst Elemente im HTML-Code anspreche. Sehen wir uns das einmal an. Und dann ändert es immer die Farbe. Ich kann alles machen, was ich auch sonst per CSS machen kann, Beispielswiese könnte ich sagen, mein Bild soll unterschiedlich angezeigt werden je nach Viewport-Größe. Ich habe eine ganz einfachere Variante bei kleinem Viewport ohne "tuer" und "schornstein" und je nach Viewport-Größe lasse ich die anderen dann einzeln einblenden und ich arbeite dabei mit "display: none" zum Ausblenden und "display: block" zum Anzeigen. Im Firefox kann man ja schön die Bildschirmgrößen testen und da sieht man dann auch, wie das funktioniert also derzeit ist noch der Schornstein da und die Tür. Und jetzt ist der Schornstein verschwunden. Und wenn es noch kleiner wird, wird das Bild noch einmal einfacher. Das heißt, ich kann mit den Bestandteilen des SVG-Bildes alles machen, was ich auch sonst machen kann. Ich kann aber natürlich auch svg-spezifische Sachen machen, im Beispiel habe ich einen Filter definiert und den wende ich auf meine Tür an. Wenn ich da mit der Maus drüberfahre, dann wird der Filter wirksam. Es gibt also verschiedene Möglichkeiten, in ein HTML-Dokument ein SVG-Bild einzufügen. Die einfachste Methode ist, dass Sie das "img"-Element nutzen. Wenn Sie allerdings die einzelnen Bestandteile des SVG-Bildes direkt per CSS in Ihrem Dokument beeinflussen wollen, dann fügen Sie das SVG-Bild am besten direkt ein und dann können Sie alles machen, was Sie auch sonst machen können, Sie können verschiedene "hover"-Zustände definieren für einzelne Bestandteile des Bildes. Sie können über MIDI Accuracy unterschiedliche Anzeigen bestimmen oder natürlich auch so etwas wie SVG-Filter einsetzen.