SVG Tags

Jan 2020

SVG-Markup sieht fast aus wie HTML: SVG-Tags sitzen in spitzen Klammern und sind ähnlich aufgebaut wie HTML-Tags: Sie haben Attribute, dabei auch die bekannten Attribute wie id, class, style und title.

Alle beginnt mit <svg >

… oder auch nicht. SVG kann auch mit einer XML-Deklaration beginnen.

<?xml version="1.0" encoding="utf-8"?>

Auch wenn der XML-Prolog am Anfang der SVG-Datei optional ist, kann er in einigen Umgebungen hilfreich sein:

Wenn das SVG als eigenständige XML-Datei gespeichert wurde
Wenn Nicht-UTF-8-Kodierungen genutzt wurden (z. B. ISO-8859-1)
Wenn das SVG von einem XML-Parser verarbeitet werden sollte

Wer SVG-Dateien in die Mediathek von WordPress lädt, kann davon sicher ein Lied singen, dass einige Plugins und Themes SVG nicht ohne XML-Deklaration laden wollen.

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

Wird SVG inline ins HTML gesetzt, bleibt die XML-Deklaration außen vor – sie bleibt eigenständigen SVG-Dateien vorbehalten und ist immer die erste Zeile.

Grundstruktur

Element	Bedeutung
<svg>	Wurzelelement jedes SVG-Dokuments oder eingebetteten SVGs
<g>	Gruppe (Zusammenfassen mehrerer Elemente)
<defs>	Definitionen, die später verwendet werden (z. B. Filter, Muster, Symbole)
<use>	Wiederverwendung eines definierten Elements (xlink:href oder href)
<symbol>	Definiert ein Symbol (ähnlich wie <defs>, aber mit eigenem ViewBox)
<title>	Titeltext für Accessibility / Tooltip
<desc>	Beschreibung (ebenfalls für Screenreader)

Geometrische Grundformen

Element	Bedeutung
<rect>	Rechteck (mit optionalen abgerundeten Ecken über rx und ry)
<circle>	Kreis (cx, cy, r)
<ellipse>	Ellipse (cx, cy, rx, ry)
<line>	Gerade Linie zwischen zwei Punkten (x1, y1, x2, y2)
<polyline>	Linie mit mehreren Segmenten
<polygon>	Geschlossenes Polygon (mehrere Punkte verbunden)
<path>	Allgemeine Vektorkurve, mächtigstes Element (z. B. für Logos oder Icons)

Füllungen, Farben, Verläufe, Muster

Element	Bedeutung
<linearGradient>	Linearer Farbverlauf
<radialGradient>	Radialer Farbverlauf
<pattern>	Musterfüllung (z. B. Kacheln, Texturen)
<stop>	Farbstopp in einem Verlauf
<solidColor>	Einfarbige Definition (seltener genutzt)

Bilder und Text

Element	Bedeutung
<image>	Eingebettetes Rasterbild (PNG, JPG, WebP …)
<text>	Textobjekt
<tspan>	Textspanne (Unterteilung eines Texts)
<textPath>	Text entlang eines Pfads
<tref>	Referenz auf anderen Text (veraltet, kaum noch unterstützt)

Filter und Effekte

Element	Bedeutung
<filter>	Container für Filtereffekte
<feGaussianBlur>	Weichzeichner
<feOffset>	Verschiebung (z. B. für Schatten)
<feBlend>	Blending zweier Quellen
<feColorMatrix>	Farbmanipulation (z. B. Sättigung, Sepia)
<feComponentTransfer>	Kanalweise Anpassung
<feComposite>	Kombinieren von Quellen
<feConvolveMatrix>	Faltungsmatrix (z. B. Schärfe)
<feDiffuseLighting> / <feSpecularLighting>	Lichtsimulation
<feDisplacementMap>	Verzerrung
<feMerge>	Filterausgaben zusammenführen
<feTurbulence>	Rauschen, Wolkeneffekte
<feMorphology>	Erosion/Dilatation
<feFlood>	Flächenfüllung
<feImage>	Filterquelle als Bild

Masken und Clipping

Element	Bedeutung
<clipPath>	Begrenzung der sichtbaren Fläche
<mask>	Transparenzmaske (weiche Übergänge möglich)

Koordinatensystem, Viewport & Transformation

Element	Bedeutung
<view>	Alternative Sicht auf das gleiche SVG (z. B. Zoom-Bereich)
<marker>	Pfeilspitzen oder Endmarkierungen für Linien/Pfade
<foreignObject>	Einbetten von fremdem HTML oder XML-Inhalt
<animate>	Basis-Animation
<animateTransform>	Animation von Transformationen
<animateMotion>	Bewegung entlang eines Pfads
<set>	Einfaches Setzen eines Attributwerts für eine Dauer

Interaktivität & Animation (SMIL-basiert)

Element	Bedeutung
<animate>	animiert ein Attribut über die Zeit
<animateMotion>	bewegt ein Element entlang eines Pfads
<animateTransform>	animiert Transformationen (z. B. Rotation)
<set>	setzt ein Attribut temporär auf einen Wert
<a>	Hyperlink
<script>	eingebettetes JavaScript (vorsicht bei Sicherheit!)

Meta, sonstige

Element	Bedeutung
<metadata>	Metadaten (z. B. Lizenz, Autor)
<style>	eingebettetes CSS
<switch>	Zeigt nur das erste passende Kindelement (z. B. für Fallbacks)