Werkzeuge und Weblinks

Eine kleine, kommentierte Auswahl. Keine endlose Linkliste, sondern die Adressen, die beim Arbeiten mit SVG immer wieder gebraucht werden.

Nachschlagen

SVG 2 beim W3C: die aktuelle Fassung der Spezifikation. Verbindlich, ausführlich und eher zum gezielten Nachlesen als zum Lernen gedacht. Die ältere, in allen Browsern umgesetzte Fassung ist SVG 1.1 (Second Edition).
SVG bei MDN: die Referenz der Mozilla-Entwicklerdokumentation mit einer Seite für jedes Element und jedes Attribut, inklusive Übersicht, welcher Browser was unterstützt.
SVG bei Wikibooks: ein freies, deutschsprachiges Lehrbuch, das sehr in die Tiefe geht, besonders bei Text, Animation und Filtern.
Scalable Vector Graphics in der Wikipedia: Geschichte, Versionen und Einordnung des Formats.

Zeichnen

Programmfenster von Inkscape 1.0 mit leerem Dokument und Werkzeugleiste — Inkscape speichert direkt im SVG-Format. Für das Web wählt man beim Speichern „Normales SVG“. Bild: GersonBenavides, CC BY-SA 4.0, Wikimedia Commons

Inkscape: freies Vektorgrafikprogramm für Windows, macOS und Linux, das SVG als eigenes Dateiformat verwendet. Über den XML-Editor im Programm lässt sich jederzeit der Code der Zeichnung ansehen und ändern, eine gute Brücke zwischen Zeichnen und Schreiben.
Kommerzielle Programme wie Adobe Illustrator oder Affinity Designer exportieren ebenfalls SVG. Beim Export lohnt es sich, Präsentationsattribute statt eingebetteter Stile und eine geringe Dezimalgenauigkeit zu wählen.
Für Diagramme aus Daten erzeugen Bibliotheken wie D3.js SVG direkt im Browser. Das Prinzip dahinter ist dasselbe wie im Kapitel SVG und JavaScript.

Optimieren und prüfen

SVGO: das Standardwerkzeug zum Verkleinern von SVG-Dateien, als Kommandozeilenprogramm oder eingebaut in viele Build-Werkzeuge. Hinweise zum sicheren Einsatz stehen im Kapitel SVG optimieren.
W3C Markup Validation Service: prüft, ob ein Dokument formal korrekt ist. Bei eigenständigen SVG-Dateien findet er vergessene Anführungszeichen und falsch verschachtelte Elemente.
Die Entwicklerwerkzeuge im Browser: Mit einem Rechtsklick auf eine Grafik und „Untersuchen“ siehst du den SVG-Baum, kannst Attribute live ändern und sofort sehen, was passiert. Zum Lernen ist das oft das nützlichste Werkzeug von allen.

Wann welches Format?

SVG ist nicht immer die richtige Wahl. Für Fotos sind JPEG, WebP oder AVIF besser, für Bildschirmfotos mit vielen Farbflächen oft PNG. SVG spielt seine Stärken bei allem aus, was aus klaren Formen besteht: Logos, Icons, Diagramme, Karten, Pläne und Illustrationen. Ein Vergleich steht auf der Startseite, der Einstieg in die Praxis im Kapitel Das erste SVG-Dokument.