Was ist SVG? Nutzen von Grafiken im Format SVG bei Websites

Bevor man SVG einsetzen kann, hilft es zu wissen, was SVG ist und welche Vorteile man dadurch hat.

Bedeutung SVG

SVG steht für „Scaleable Vector Graphic“ und ist ein Grafikformat, das auf Vektorangaben basiert. Wir haben also bei der Grafik keine Pixel, sondern Vektoren. Vektoren sind Größen und Richtungsangaben von Pfeilen im Raum, sprich es werden Pfade und Koordinaten festgelegt. Hängt man mehrere dieser Pfade aneinander, sind so schnell Dreiecke, Rechtecke und Kreise gezeichnet. Durch Vektoren können Grafiken definiert („aufgebaut“) werden und haben den riesigen Vorteil, dass die Qualität unabhängig von der Ausgabengröße ist. Zusätzlich sind sehr oft Vektorgrafiken von der benötigten Dateigröße deutlich kleiner als Pixelgrafiken.

SVG-Dateien erstellt und bearbeitet man mit Vektorprogrammen wie Adobe Illustrator, Affinity Designer oder dem Open-Source-Programm Inkscape.

Beispielgrafik für den Einsatz in HTML

Wir erstellen uns einen einfachen Pfeil, der nach oben zeigt. Dieser soll dann auf unserer Website immer am Seitenende angezeigt werden und durch Klick kann dann der Besucher wieder an den Anfang der Seite springen.

Folgende Grafik erstellen wir:

Wenn wir uns den dafür benötigten SVG-Code ansehen, ist dieser übersichtlich:

<svg width="100%" height="100%" viewBox="0 0 640 480"  xmlns="http://www.w3.org/2000/svg">
  <title>Pfeil nach oben</title>
  <desc>Pfeil um an den Anfang der Webseite zu springen</desc>
  <polygon strokeWidth="5" strokecolor="#000000" fill="#000000" edge="0" orient="x" sides="3" shape="regularPoly" id="svg_3" cy="-3" cx="436"/>
  <polygon strokeWidth="5" strokecolor="#000000" fill="#000000" edge="0" orient="x" sides="3" shape="regularPoly" id="svg_7" cy="51" cx="36.5"/>
  <polygon strokeWidth="5" strokecolor="none" fill="#000000" edge="0" orient="x" sides="5" shape="regularPoly" id="svg_9" cy="138.5" cx="36.5"/>
  <path stroke="#000000" transform="rotate(-90 327.82476806640625,234.04496765136716) " id="svg_17" d="m137.00475,119.79969l208.1673,0l173.47273,114.24526l-173.47273,114.24525l-208.1673,0l0,-228.49051z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" fill="#000000"/>
</svg>

Der Syntax von SVG muss unbedingt korrekt sein! SVG verzeiht keine Fehler – wobei man SVG-Grafiken meistens in entsprechenden Vektorgrafikprogramm erstellt und dann einen validen SVG-Code als Output bekommt.

Schauen wir uns den bisherigen Code der SVG-Grafik genauer an:

Für eine flexible Größenausgabe sind die Angaben von „width“ und „height“ mit 100% und die viewBox in der ersten Zeile unseres Beispiels wichtig.

Der <title>-TAG muss als Erstes in unserem SVG-Container erscheinen. Dieser wird nicht angezeigt. Für Screenreader sollte man noch eine Beschreibung des dargestellten Inhalts erstellen – diese Beschreibung steckt im <desc>-TAG

Danach erfolgen die Angaben der einzelnen Vektoren, die über die Attribute „id“ und „class“ angesprochen werden können.

Diese SVG-Grafik wollen wir nun für unsere Website nutzen

SVG-Grafiken in Webseiten einbauen

Es gibt mehrere Möglichkeiten SVG-Grafiken in eine HTML-Seite einzubauen:

Einbau direkt als SVG-TAG
Einbinden von SVG als Grafikdatei
Einbinden von SVG über CSS als background-image
Einbau in CSS direkt als Inline-SVG

Schauen wir uns die einzelnen Möglichkeiten im Detail an.

Einbau direkt als SVG-TAG

Wir können direkt in unsere HTML-Seite den SVG-TAG einsetzen.

<!DOCTYPE html>
<html lang="de">
<head>
	<meta charset="UTF-8">
	<title>Beispiel SVG nutzen</title>
</head>
<body>
	<svg width="100%" height="100%" viewBox="0 0 640 480"  xmlns="http://www.w3.org/2000/svg">
	  <title>Pfeil nach oben</title>
	  <desc>Pfeil um an den Anfang der Webseite zu springen</desc>
	  <polygon strokeWidth="5" strokecolor="#000000" fill="#000000" edge="0" orient="x" sides="3" shape="regularPoly" id="svg_3" cy="-3" cx="436"/>
	  <polygon strokeWidth="5" strokecolor="#000000" fill="#000000" edge="0" orient="x" sides="3" shape="regularPoly" id="svg_7" cy="51" cx="36.5"/>
	  <polygon strokeWidth="5" strokecolor="none" fill="#000000" edge="0" orient="x" sides="5" shape="regularPoly" id="svg_9" cy="138.5" cx="36.5"/>
	  <path stroke="#000000" transform="rotate(-90 327.82476806640625,234.04496765136716) " id="svg_17" d="m137.00475,119.79969l208.1673,0l173.47273,114.24526l-173.47273,114.24525l-208.1673,0l0,-228.49051z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" fill="#000000"/>
	</svg>
</body>
</html>

Unsere Grafik wird annähernd Fenster füllend angezeigt. Die Größe richtet sich nach dem Objekt, in dem unsere Vektorgrafik steckt. Packen wir nun die Grafik in einen DIV-Bereich, können wir die Größe sehr einfach beeinflussen:

<div style="border:1px solid red; width: 150px;">
	<svg width="100%" height="100%" viewBox="0 0 640 480"  xmlns="http://www.w3.org/2000/svg">
	  <title>Pfeil nach oben</title>
	  <desc>Pfeil um an den Anfang der Webseite zu springen</desc>
	  <polygon strokeWidth="5" strokecolor="#000000" fill="#000000" edge="0" orient="x" sides="3" shape="regularPoly" id="svg_3" cy="-3" cx="436"/>
	  <polygon strokeWidth="5" strokecolor="#000000" fill="#000000" edge="0" orient="x" sides="3" shape="regularPoly" id="svg_7" cy="51" cx="36.5"/>
	  <polygon strokeWidth="5" strokecolor="none" fill="#000000" edge="0" orient="x" sides="5" shape="regularPoly" id="svg_9" cy="138.5" cx="36.5"/>
	  <path stroke="#000000" transform="rotate(-90 327.82476806640625,234.04496765136716) " id="svg_17" d="m137.00475,119.79969l208.1673,0l173.47273,114.24526l-173.47273,114.24525l-208.1673,0l0,-228.49051z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" fill="#000000"/>
	</svg>
</div>

Vorteile der Variante:

keine zusätzliche externe Datei
Verlinkung innerhalb SVG möglich
Zugriff mittels CSS und JavaScript problemlos möglich für Nutzerfeedback und Animationen

Nachteile der Variante:

HTML-Code wird aufgebläht

Einbinden von SVG als Grafikdatei

Wir können unsere Vektordaten auch in einer Datei abspeichern und diese über den üblichen <img-TAG in HTML laden:

<img src="pfeil.svg" width="200" height="150" alt="SVG-Pfeil über HTML-img-Tag integriert">

Vorteile der Variante:

gewohnte Vorgehensweise beim Einbinden von Grafiken

Nachteile der Variante:

weitere Datei (wie schon bei anderen Grafikformaten)
Animationen klappen nicht in allen Browsern
JavaScript und Links funktionieren nicht

Einbinden von SVG über CSS als background-image

Eine weitere schöne Möglichkeit ist das Einbinden über CSS als background-image. Im ersten Schritt wird unserer SVG-Grafik als Datei gespeichert. Diese Datei mit dem Dateinamen „pfeil.svg“ hat folgenden Inhalt:

<svg width="100%" height="100%" viewBox="0 0 640 480" xmlns="http://www.w3.org/2000/svg">
  <title>Pfeil nach oben</title>
  <desc>Pfeil um an den Anfang der Webseite zu springen</desc>
  <polygon strokeWidth="5" strokecolor="#ff0000" fill="#ff0000" edge="0" orient="x" sides="3" shape="regularPoly" id="svg_3" cy="-3" cx="436"/>
  <polygon strokeWidth="5" strokecolor="#ff0000" fill="#ff0000" edge="0" orient="x" sides="3" shape="regularPoly" id="svg_7" cy="51" cx="36.5"/>
  <polygon strokeWidth="5" strokecolor="none" fill="#ff0000" edge="0" orient="x" sides="5" shape="regularPoly" id="svg_9" cy="138.5" cx="36.5"/>
  <path stroke="#000000" transform="rotate(-90 327.82476806640625,234.04496765136716) " id="svg_17" d="m137.00475,119.79969l208.1673,0l173.47273,114.24526l-173.47273,114.24525l-208.1673,0l0,-228.49051z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" fill="#ff0000"/>
</svg>

Die Datei muss sich im gleichen Verzeichnis wie unsere HTML und CSS-Datei befinden. Nun können wir über CSS auf die Grafik zugreifen und diese einbinden.

.svguebercss {
  height: 100px;
  width: 100px;
  background: url(pfeil.svg) 100% 100% no-repeat;
  background-color: yellow;
}

Und in unserem HTML wird ein Bereich dafür vorgesehen und mit der entsprechenden Klasse als Attribut eingebaut:

<div class="svguebercss">
    Über CSS
</div>

Vorteile der Variante:

gewohnte Vorgehensweise beim Einbinden von Grafiken über CSS

Nachteile der Variante:

weitere Datei (wie schon bei anderen Grafikformaten)
Animationen klappen nicht in allen Browsern
JavaScript und Links funktionieren nicht

Einbau in CSS direkt als Inline-SVG

Um die SVG-Grafik direkt Inline einzubauen, müssen folgende 2 Angaben gemacht werden:

MIME-Type
Zeichensatz

Wichtig ist, dass unser Inhalt in Base 64 Code vorliegt. Dafür gibt es nette Online-Tools z.B. unter http://b64.io/

Und dann sieht unser vorheriges Beispiel wie folgt aus:

.svgInlineuebercss {
  height: 100px;
  width: 100px;
  background-image: url(data:image/svg xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgNjQwIDQ4MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gIDx0aXRsZT5QZmVpbCBuYWNoIG9iZW48L3RpdGxlPiAgPGRlc2M UGZlaWwgdW0gYW4gZGVuIEFuZmFuZyBkZXIgV2Vic2VpdGUgenUgc3ByaW5nZW48L2Rlc2M ICA8cG9seWdvbiBzdHJva2VXaWR0aD0iNSIgc3Ryb2tlY29sb3I9IiNmZjAwMDAiIGZpbGw9IiNmZjAwMDAiIGVkZ2U9IjAiIG9yaWVudD0ieCIgc2lkZXM9IjMiIHNoYXBlPSJyZWd1bGFyUG9seSIgaWQ9InN2Z18zIiBjeT0iLTMiIGN4PSI0MzYiLz4gIDxwb2x5Z29uIHN0cm9rZVdpZHRoPSI1IiBzdHJva2Vjb2xvcj0iI2ZmMDAwMCIgZmlsbD0iI2ZmMDAwMCIgZWRnZT0iMCIgb3JpZW50PSJ4IiBzaWRlcz0iMyIgc2hhcGU9InJlZ3VsYXJQb2x5IiBpZD0ic3ZnXzciIGN5PSI1MSIgY3g9IjM2LjUiLz4gIDxwb2x5Z29uIHN0cm9rZVdpZHRoPSI1IiBzdHJva2Vjb2xvcj0ibm9uZSIgZmlsbD0iI2ZmMDAwMCIgZWRnZT0iMCIgb3JpZW50PSJ4IiBzaWRlcz0iNSIgc2hhcGU9InJlZ3VsYXJQb2x5IiBpZD0ic3ZnXzkiIGN5PSIxMzguNSIgY3g9IjM2LjUiLz4gIDxwYXRoIHN0cm9rZT0iIzAwMDAwMCIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDMyNy44MjQ3NjgwNjY0MDYyNSwyMzQuMDQ0OTY3NjUxMzY3MTYpICIgaWQ9InN2Z18xNyIgZD0ibTEzNy4wMDQ3NSwxMTkuNzk5NjlsMjA4LjE2NzMsMGwxNzMuNDcyNzMsMTE0LjI0NTI2bC0xNzMuNDcyNzMsMTE0LjI0NTI1bC0yMDguMTY3MywwbDAsLTIyOC40OTA1MXoiIHN0cm9rZS1saW5lY2FwPSJudWxsIiBzdHJva2UtbGluZWpvaW49Im51bGwiIHN0cm9rZS1kYXNoYXJyYXk9Im51bGwiIHN0cm9rZS13aWR0aD0iNSIgZmlsbD0iI2ZmMDAwMCIvPjwvc3ZnPg==);
  background-repeat: no-repeat;
  background-position: 100% 100%;
  background-color: orange;
}

Und in unserem HTML wird ein Bereich dafür vorgesehen und mit der entsprechenden Klasse als Attribut eingebaut:

<div class="svgInlineuebercss">
	Über CSS Inline
</div>

Vorteile der Variante:

gewohnte Vorgehensweise beim Einbinden von Grafiken über CSS
keine zusätzliche Datei (wird schneller geladen)

Nachteile der Variante:

Animationen klappen nicht in allen Browsern
JavaScript und Links funktionieren nicht

Und nun viel Spaß beim Einsatz von SVG in der eigenen Website

Weiterempfehlen • Social Bookmarks • Vielen Dank

Bilder bei Responsive Design externe Videos einbinden

Bitte unterstützen

Bitte unterstützen Sie dieses Projekt

Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).

unsere Videos bestellen

Unsere Videos und eBooks bestellen.

Spenden

Sie können uns eine Spende über PayPal zukommen lassen.

Weiterempfehlungen

Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.

Bücher über Amazon

Bestellen Sie Bücher über folgende Links bei Amazon:

Vielen Dank für Ihre Hilfe

E-Books zum Kurs
von HTML-Seminar.de
E-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.

Mehr Details

Was ist SVG? Nutzen von Grafiken im Format SVG bei Websites

Bedeutung SVG

Beispielgrafik für den Einsatz in HTML

SVG-Grafiken in Webseiten einbauen

Einbau direkt als SVG-TAG

Vorteile der Variante:

Nachteile der Variante:

Einbinden von SVG als Grafikdatei

Vorteile der Variante:

Nachteile der Variante:

Einbinden von SVG über CSS als background-image

Vorteile der Variante:

Nachteile der Variante:

Einbau in CSS direkt als Inline-SVG

Vorteile der Variante:

Nachteile der Variante:

Weiterempfehlen • Social Bookmarks • Vielen Dank

Bitte unterstützen Sie dieses Projekt

E-Books zum Kurs