Scalable Vektor Graphics – Grafik für Webseiten

Grundlagen SVG in Webseiten

SVG (Scalable Vector Graphics) ist Vektorgrafik mit Elementen für Rechtecke, Kreise, Linien, Polygone, hat Elemente für Pfade, Text und Animationen und kann Rastergrafik (Bitmap- oder Pixel-Bilder) enthalten.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

SVG mit Grafikprogrammen erstellen

SVG ist Klartext wie HTML, lässt sich mit Anwendungen wie Inkscape und Adobe Illustrator oder programmatisch mit PHP erzeugen, mit CSS formatieren und mit Javascript dynamisch ändern. Weil SVG mit XML als Klartext geschrieben wird, sind SVG-Grafiken durchsuchbar und können indexiert werden.

1999 hat Adobe SVG dem W3C als Standard für Vektorgrafik auf Webseiten vorgeschlagen. 2001 wurde SVG 1.0 vom W3C verabschiedet und heute rendern alle Browser SVG ohne Plugin in HTML-Seiten.

SVG kann mit Adobe Illustrator, mit CorelDRAW und online mit SVG-edit erzeugt werden.

inkscape-450 Inkscape ist Open-Source mit grafischer Oberfläche für Mac, PC und Unix. Wer SVG »von Hand« schreibt oder ändern möchte, kann die Änderungen live in der Vorschau von Barebone BBEdit sehen. SVG ist Klartext wie HTML und basiert auf Tags wie HTML.

SVG-Anwendungen

Statistik mit SVG
Statistik, Infografik, Karten mit SVG

SVG wird in der Kartografie eingesetzt, zur Visualisierung von Statistik und Graphen sowie für Illustrationen aller Art: von der technischen Zeichnung mit hoher Exaktheit bis zum Logo und zum Icon.

Icons und Grafiken mit SVG
SVG-Icons und Icon-Fonts

Gegenüber Icons, die aufwändig in Icon-Fonts umgesetzt werden, ist der direkte Einsatz von SVG-Icons einfacher und effektiver. Größe, Farben und Filter wie Schatten der Icons lassen sich bei SVG-Icons genauso steuern wie Schriften, title- und desc-Tag in SVG-Grafiken verbessern die Zugreifbarkeit gegenüber Icon-Fonts.

Überhaupt: SVG ist in einem hohen Maß barrierefrei: Screenreader können title, description und text-Elemente von Inline-SVG vorlesen, die Sprachausgabe von iPad und iPhone auch von SVG-Dateien, die mit einem img-Element eingebunden sind.

SVG Syntax und CSS

SVG-Tags werden wie HTML in spitzen Klammern geschrieben, müssen geschlossen werden und können Attribute wie id und class, width und fill enthalten.

Anders als HTML legt SVG Wert auf korrekte Schreibweise und verzeiht keinen Fehler.

              viewBox-Attribut -----+
                                    |
                                    |
<svg width="100%" height="100%" viewBox="0 0 500 241" xmlns="http://www.w3.org/2000/svg">
   <title>SVG für Grafik, Icons und UI-Elemente</title>
   <desc>Eine ausführliche Beschreibung des Aufbaus von SVG-Grafiken</desc>

   <circle cx="" cy="" r="" fill="" style="" id="" />
      |                 |             |       |
      +-- Element Name  |             +--     +-- style- und id-Attribut 
                        |
                        +-- individuelle Attribute
   …
</svg>

Anstelle des alt-Tags bei Bildern beschreiben ein title-Tag und eine Kurzbeschreibung in einem desc-Element das Bild oder die Grafik für Screenreader. Das title-Tag muss das erste Kind in einem SVG-Container (svg, g, a, pattern, … ) sein. Sein Inhalt wird nicht angezeigt. Neben dem title-Element verbessert ein desc-Element mit einer ausführlichen Beschreibung die Wiedergabe des SVG-Elements in Screenreadern.

SVG-Attribute steuern die Darstellung von SVG-Elementen (fill, stroke, font-family, … ) ähnlich wie in HTML, aber bei allen Optionen für die Präsentation oder Darstellung wirkt CSS in SVG in einem style-Attribut. SVG kennt class und id und kann CSS aus einem style-Tag und selbst aus einer externen CSS-Datei auswerten.

SVG inline oder als img-Element in HTML-Dokumenten

Grafiken können direkt in das HTML-Markup eingesetzt werden: Ein SVG-Element kann an jeder beliebigen Stelle im HTML-Dokument innerhalb des body-Tags sitzen.

Wenn SVG inline ins HTML gesetzt, und nicht als img-Tag geladen wird, braucht das öffnende SVG-Tag keinen XML-Namensraum (XML namespace). xmlns="http://www.w3.org/2000/svg" kann weggelassen werden.

SVG-Tag in HTML

SVG inline in HTML-Seiten
SVG inline in HTML-Seiten
<!DOCTYPE html>
<html lang="de">
…
<body>
<svg width="100%" height="100%" viewBox="0 0 560 110">
   <circle cx="200" cy="50" r="40" … />
   <rect x="100" y="10" width="80" height="60" … />
</svg>
</body>

Externe SVG-Datei laden

Für die externe SVG-Datei chart.svg wiederum ist der XML-Namensraum xmlns gefordert, und die Datei braucht eine xml-Direktive. Zwar zeigen die Browser das SVG auch ohne die xml-Direktive korrekt an, aber ohne Direktive verweigern Anwendungen wie WordPress den Upload.

<?xml version="1.0" encoding="utf-8"?>
<svg viewBox="0 0 144 75" xmlns="http://www.w3.org/2000/svg">
…
</svg>

version 1.0 und UTF-8 sind Standard, könnte man sich also sparen, aber wie schon erwähnt: Viele Anwendungen bestehen auf der XML-Direktive.

SVG Datei mit img-Tag laden – funktioniert genauso wie das Einbinden eines JPGs oder PNG-Bilds.

Bilder in SVG-Grafik laden
<img src="chart.svg" width="171" height="162" alt="SVG-Statistik mit HTML-img laden" />

SVG image-Element

SVG selber kann – ähnlich wie EPS und TIFF – sowohl externe Vektorgrafik als auch Bitmap- oder Pixelbilder enthalten.

Bilder (.png, .gif, .jpg, .svg) werden mit SVG image eingebunden oder eingebettet. Das SVG image-Element ähnelt dem HTML-img, allerding gilt es, eine Reihe von Besonderheiten zu beachten:

  • Das SVG-image-Element muss einen abschließenden Schrägstrich enthalten, sonst werden Elemente, die auf das image-Tag folgen, nicht angezeigt.
  • width- und height-Attribute müssen gesetzt werden, sonst wird der Browser das Bild nicht laden.
<image width="100" height="100" x="100" y="5" xlink:href="bild.png" />

Aus Sicherheitsgründen werden heute externe Ressourcen nicht geladen, wenn das SVG mit einem img-Element geladen wird. Das gilt sowohl für CSS als auch Bilder / Grafiken. Bitmaps wie JPEG und PNG allerdings dürfen als data-url eingebunden werden.

Mehr zum SVG-image-Element: Bitmaps in SVG

SVG Sicherheit

Social Media sträubt sich mit Händen und Füßen gegen SVG und führt Sicherheitsgründe als Argument für die Verweigerung an. WordPress verweigert den Upload, wenn der XML-Präfix nicht als erste Zeile in der SVG-Datei sitzt, Drupal braucht eine Erweiterung.

<svg width="100%" height="100%" viewBox="0 0 1920 1450" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <path id="star" d="m753.7 1211l-93.5-53-94.51 52 21.3-106-78.4-73 106.7-12 45.8-97.4 44.2 97.4 106.8 14-79.4 72z" fill="#F1D85A"/>
    <use transform="translate(305 0)" xlink:href="#star"/>
    <use transform="translate(610 0)" xlink:href="#star"/>
    <use transform="translate(152,213)" xlink:href="#star"/>
    <use transform="translate(457,213)" xlink:href="#star"/>
    <image x="200" y="0" width="1512" height="887" xlink:href="polarbear.png"/>
</svg>

Der Sicherheit zuliebe dürfen extern gespeicherte SVG-Grafiken keine externen Bitmap-Bilder, CSS- und Script-Resourcen laden, nicht einmal aus derselben Domain.

SVG mit Bild als data-url
SVG mit Bild als data-url
<img loading="lazy" src="fivestars.svg" width="1920" height="1450" alt="SVG mit Bild als data-url">

Nochmal: Die Browser verweigern das Ausführen von Scripten und eingebundenen Bitmap-Bilder in SVG-Dateien, die per HTML-img-Tag geladen werden. Inline-SVG hingegen darf alles: externe Ressourcen laden und Scripte ausführen.

SVG für mobile Geräte

Mit den mobilen Geräten wächst der Anspruch an die Grafik. Auf der einen Seite sollen die Bilder für die mobilen Geräte weniger Last mitbringen, auf der anderen Seite sind die Monitore hochauflösende Retina-Displays.

Statt eine Grafik als PNG in verschiedenen Auflösungen auszuliefern, bringt SVG optimale Grafik für jede Monitorgröße zum kleinen Preis. SVG-Grafiken sind fast immer kleiner als die PNG-Bitmaps, die aus der Grafik erzeugt werden.

Area Map mit SVG: Die Karte hat gerade mal 50KB, und bleibt exakt, auch wenn sie auf DIN A1 Größe aufgezogen wird.

Als Vektorgrafik lässt sich SVG an die Größe des Viewports für responsive Webseiten anpassen. Das wichtigste Attribut für die flexible Größe von SVG ist das viewBox-Attribut zusammen mit width="100%" und height="100%".

<svg width="100%" height="100%" viewBox="0 0 500 110" xmlns="http://www.w3.org/2000/svg">
</svg>

Das würde im Grunde genommen schon reichen, um eine SVG-Grafik in eine responsive Webseite zu setzen:

<style>
.svgbox { width: 100%; }
.svgbox svg { width: 100%; height: auto; }
</style>

<div class="svgbox">
   <svg width="100%" height="100%" viewBox="0 0 300 300">
      …
   </svg>
</div>

Die modernen Browser können die Höhe der Grafik aus dem Seitenverhältnis im viewBox-Attribut berechnen und die SVG-Grafik an den umfassenden Block anpassen.

Dem stehen die älteren Version von Internet Explorer entgegen: Erst Microsoft Edge beherrscht diesen Rechentrick. IE11 hingegen setzt eine Vorgabe. Wer den alten IE mitziehen will, muss die CSS-Regeln für Inline-SVG anpassen.

Einschränkungen

Die sozialen Medien unterstützen SVG bis heute so gut wie gar nicht. WordPress akzeptiert SVG direkt, für Drupal muss eine Erweiterung installiert werden.

Bilddatenbanken und Programme wie Adobe Lightroom oder Darktable unterstützen SVG ebenfalls nicht.

Adobe Bridge (CC 2018) unterstützt seit Mitte 2018 SVG-Dateien.