SVG optimieren und zugänglich machen

Teil 5: Scripting und Praxis · Kapitel 12 von 12 · Aktualisiert am 10. Oktober 2026 · 4 Minuten Lesezeit

Eine SVG-Datei aus einem Zeichenprogramm ist oft doppelt oder dreimal so groß wie nötig. Mit wenigen Handgriffen wird sie kleiner, schneller und für alle Besucher verständlich.

Was Zeichenprogramme mitschreiben

Programme wie Inkscape oder Illustrator speichern neben der eigentlichen Grafik viele Zusatzinformationen: Metadaten über Autor und Programm, eigene Namespaces für Ebenen und Hilfslinien, leere Gruppen, versteckte Elemente und Koordinaten mit sechs oder mehr Nachkommastellen. Für die Bearbeitung ist das nützlich, im Browser ist es Ballast. Inkscape bietet deshalb beim Speichern die Wahl zwischen „Inkscape-SVG“ mit allen Zusatzdaten und „Normales SVG“ ohne sie. Für die Website ist das normale Format die richtige Wahl, als Arbeitsdatei behältst du die Inkscape-Fassung.

Automatisch optimieren mit SVGO

Das verbreitetste Werkzeug zum Verkleinern ist SVGO, ein Open-Source-Programm für Node.js. Es entfernt Metadaten und Kommentare, fasst Gruppen zusammen, kürzt Pfaddaten und rundet Zahlen auf eine einstellbare Genauigkeit. Viele Build-Werkzeuge haben es eingebaut, und es gibt Weboberflächen, in die man eine Datei einfach hineinzieht.

npx svgo logo.svg -o logo.min.svg

Ein paar Optionen sollte man im Blick behalten. Entfernt SVGO die viewBox, lässt sich die Grafik nicht mehr frei skalieren. In neueren Versionen bleibt sie standardmäßig erhalten, bei älteren Konfigurationen lohnt sich ein Blick. Ebenso kann das Zusammenlegen von IDs Verweise brechen, wenn Skripte oder CSS von außen auf bestimmte IDs zugreifen. Nach dem Optimieren gehört die Grafik deshalb immer einmal in den Browser.

Von Hand nachhelfen

• Genauigkeit: Bei einer viewBox von 0 bis 24 reichen eine oder zwei Nachkommastellen. Drei Nachkommastellen bei einer 1000 Einheiten großen Fläche sind unsichtbar.
• Relative Pfadbefehle: Kleinbuchstaben ergeben oft kürzere Zahlen als absolute Koordinaten.
• Wiederholungen: Gleiche Teile einmal definieren und mit use einsetzen, wie im Kapitel use und symbol gezeigt.
• Kompression: SVG ist Text und lässt sich gut komprimieren. Webserver liefern es mit gzip oder Brotli meist auf einen Bruchteil verkleinert aus. Die Variante .svgz ist eine gzip-komprimierte Datei, braucht aber passende Serverangaben und ist im Web heute selten nötig.

Grafiken beschreiben

Für Menschen, die eine Seite mit einem Screenreader nutzen, ist eine Grafik ohne Beschreibung ein schwarzes Loch. Wie du die Beschreibung lieferst, hängt von der Einbindung ab.

Als Bild über <img>: Das Attribut alt enthält die Beschreibung, wie bei jedem anderen Bild. Ist die Grafik rein dekorativ, bekommt sie ein leeres alt="". Manche Screenreader erkennen SVG in img nicht zuverlässig als Bild, ein zusätzliches role="img" am img hilft.

Inline im HTML: Hier gehört ein <title> als erstes Kind ins SVG, bei Bedarf ergänzt durch ein längeres <desc>. Das SVG bekommt role="img", damit es als ein Bild gelesen wird und nicht als Sammlung vieler Einzelteile, und mit aria-labelledby verweist du auf die IDs von title und desc.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 230 110" width="230" height="110" role="img" aria-labelledby="op-titel op-text">
  <title id="op-titel">Besucher pro Monat</title>
  <desc id="op-text">Balkendiagramm für Januar bis März: 1200, 1800 und 2600 Besucher.</desc>
  <line x1="10" y1="100.5" x2="220" y2="100.5" stroke="#9aa3b2"/>
  <rect x="30" y="64" width="44" height="36" fill="#7fa6ef"/>
  <rect x="95" y="46" width="44" height="54" fill="#3b7be8"/>
  <rect x="160" y="22" width="44" height="78" fill="#1f5fd1"/>
</svg>

Dekorative Inline-Icons, die neben einem sichtbaren Wort stehen, versteckst du mit aria-hidden="true", damit der Screenreader nicht „Bild“ und dann das Wort vorliest. Ein weiterer Punkt ist der Kontrast: Linien und Beschriftungen in Diagrammen müssen sich ausreichend vom Hintergrund abheben, und Informationen sollten nicht allein über Farbe unterschieden werden.

Sicherheit bei hochgeladenen SVG-Dateien

Weil SVG Skripte, Links und eingebettete Inhalte enthalten kann, sind fremde SVG-Dateien nicht so harmlos wie ein JPEG. Wird eine hochgeladene Datei direkt im Browser geöffnet, kann ein darin versteckter <script>-Block im Kontext der eigenen Domain laufen. Plattformen, auf denen Nutzer Bilder hochladen, erlauben SVG deshalb oft gar nicht oder bereinigen die Dateien mit einem Sanitizer, der Skripte, Ereignis-Attribute wie onload und externe Verweise entfernt. Für die eigene Website gilt: SVG aus unbekannten Quellen nie ungeprüft inline einbetten.

Damit ist das Tutorial einmal durchlaufen. Eine Sammlung nützlicher Programme und Nachschlagewerke findest du unter Werkzeuge und Weblinks.