Videos eBook Forum Kontakt

jetzt Videos kaufen
zum Lernen von HTML,
CSS und Webdesign

Jetzt das HTML-Seminar bestellen als
Video-Tutorial mit über 210 Videos:
von den Grundlagen bis zur fertigen Website
Video-Kurs HTML5, CSS & Webdesign

Video-Kurs bestellen HTML5, CSS & Webdesign
Video-Kurs bestellen HTML5, CSS & Webdesign

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 bzw. bearbeitet man mit Vektorprogrammen wie Adobe Illustrator, Affinity Designer oder dem Open-Source-Programm Inkscape. Einen nette Online-Variante findet sich unter https://svg-edit.github.io/svgedit/releases/svg-edit-2.8.1/svg-editor.html

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:

Pfeil nach oben Pfeil um an den Anfang der Webseite zu springen

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 Fensterfülleng 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 bzw. 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

weitere eigene Projekte: