SVG-Grundlagen. Einführung

SVG steht für Scalable Vector Graphics, eine XML-basierte Auszeichnungssprache, die Bilder mithilfe mathematischer Formeln und nicht mit Pixeln definiert. Dadurch eignet sich SVG ideal für Icons, Logos und Strichzeichnungen, da diese ohne Qualitätsverlust skaliert werden können und kleinere Dateigrößen aufweisen. SVG-Bilder können mit CSS angesteuert werden, um deren Darstellung zu ändern, beispielsweise Farbe und Animation. Es gibt verschiedene Möglichkeiten, ein SVG-Bild auf einer Webseite anzuzeigen, darunter das direkte Einbetten, die Verwendung des img-Elements, des object-Elements oder des iframe-Elements. Jede Methode hat ihre eigenen Vor- und Nachteile, wie z. B. Caching und JavaScript-Manipulation. SVG-Code folgt den Regeln der XML-Sprache, einschließlich Groß-/Kleinschreibung, schließender Tags und Attributwerten in Anführungszeichen. Die SVG-Bildstruktur umfasst das Wurzelelement, viewBox und das defs-Element, das Stile oder Elemente definiert, auf die später verwiesen wird. viewBox definiert einen Zeichenbereich in abstrakten Einheiten, während Breite und Höhe innerhalb des svg-Tags festgelegt werden können. Das defs-Element kann Style-Elemente, Formen, Verläufe und Symbole enthalten und später im Code referenziert werden. Schließlich werden eigentliche Zeichenelemente wie path, circle, rect, line, ellipse und polygon verwendet, um das Bild zu erstellen.