Scalable Vector Graphics – Wikipedia

Als XML-Dokument wird eine SVG in einer Baumstruktur aus verschiedenen Elementen und diesen Elementen zugewiesenen Attributen aufgebaut. Eine SVG-Datei kann, wie bei XML-basierten Sprachen üblich, mit der XML-Deklaration beginnen. Darauf können Verarbeitungsanweisungen folgen, etwa solche zur Referenzierung externer Stilvorlagen.

Auf diesen Kopfbereich folgt, wie bei allen XML-Dokumenten, das Wurzelelement; für SVG-Dokumente hat dieses den Namen svg. Um das Element und seinen Inhalt eindeutig dem SVG-Namensraum zuzuordnen und ihm so eine definierte Bedeutung zu geben, die mit den SVG-Empfehlungen zu tun hat, wird der Namensraum beim Wurzelelement mit der XML-Attributkonstruktion xmlns notiert.

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    version="1.1" baseProfile="full"
    width="800mm" height="600mm"
    viewBox="-400 -300 800 600">
    <title>Titel der Datei</title>
    <desc>Beschreibung/Textalternative zum Inhalt.</desc>

<!--Inhalt der Datei -->

</svg>

SVG hat unterschiedliche Typen von Elementen:

Elemente mit grafischer Präsentation, aufgebaut aus grafischen Primitiven
Text in einer bestimmten Schriftart, die dem Render-Programm zur Verfügung stehen muss.
Gruppierungselemente einerseits für darzustellende Elemente, aber auch als Vorrat zur Referenzierung durch andere Elemente
Elemente zur Bereitstellung von Textalternativen und Metainformationen
Elemente zur Bereitstellung von Maldiensten wie Farben, Farbverläufen und Mustern, auch von Markierungen, Masken oder Filtern
Elemente zur Animation
Elemente zur Aufnahme von anderen Sprachstrukturen (Stilvorlagen, Skripte, darstellbare Fragmente aus anderen Namensräumen)
Elemente zur Einbettung externer Dokumente (Vektorgrafiken oder auch Rastergrafik), interner und externer Dokumentfragmente
Elemente zur Definition von Schriftarten und alternativen Darstellungen von Glyphen

Rechteck, Kreis, Ellipse, Pfad und Polygon als Beispiel für grafische Primitive. Pfad und Polygon sind gefüllt

Alle grafischen Elemente in SVG bauen auf einfachen Grundelementen, sogenannten grafischen Primitiven auf. Durch Kombination mehrerer grafischer Primitive lassen sich komplexe Objekte erzeugen. Für alle grafischen Elemente gibt es festlegbare Eigenschaften (Attribute). Insbesondere

Fill-Attribute – legen die Darstellung der Fläche fest.
Stroke-Attribute – legen die Darstellung der Rahmenlinie fest.
Opacity-Attribute – legen die Transparenz des Elements fest.
Marker – legen fest, ob ein Linienende besonders gestaltet wird (z. B. Pfeile, Querstriche etc.)

Die meisten Eigenschaften können auch mittels CSS in einem Style-Attribut festgelegt werden, was offiziell favorisiert wird.

Die in SVG verfügbaren grafischen Elemente sind der Pfad und mehrere, der Vereinfachung dienende Elemente.

Der Pfad ist das grundlegende Element für die Darstellung. Er ist das mächtigste Grafikelement in SVG. Praktisch alles, was durch andere Grafikelemente gezeichnet werden kann, kann durch ein Pfad-Element äquivalent dargestellt werden, denn hier kann man mit einer Sequenz von Kommandos angeben, was dargestellt werden soll. Dafür dient das Attribut d. Jedes Kommando beginnt an der Endposition des vorherigen Kommandos. Es wird durch einen Buchstaben eingeleitet, dem ein oder mehrere Zahlen (Parameter, meist Koordinaten) folgen. Ein Großbuchstabe bewirkt, dass Koordinatenwerte absolut interpretiert werden, ein Kleinbuchstabe, dass sie relativ zur aktuellen Zeichenposition interpretiert werden. Es gibt folgende Kommandos:

Kommando Bezeichnung Parameter Wirkung

M move to ein Koordinatenpaar Bewegt den virtuellen Stift an die angegebene Position, ohne etwas zu zeichnen.^{[Anm 1]}

L line to ein oder mehrere Koordinatenpaare Zeichnet eine gerade Linie zur angegebenen Position. Mehrere Koordinaten bewirken einen Polygonzug.

H horizontal line eine X-Koordinate Zeichnet eine gerade Linie parallel zur x-Achse zur angegebenen Position.

V vertical line eine Y-Koordinate Zeichnet eine gerade Linie parallel zur y-Achse zur angegebenen Position.

Z close path keine zeichnet eine Gerade zum Ausgangspunkt (letzter Move-Befehl) des Pfades und schließt ihn.

(elliptic) arc

rx, ry, phi, lf, sf, x, y

Zeichnet einen Ellipsenbogen mit den Radien rx und ry sowie der Achsenausrichtung phi zur Position x;y. Hierbei ist lf das "long bow flag" welches festlegt, ob der kurze oder der lange Bogen gezeichnet werden soll, und sf ist das "sweep flag", welches festlegt, ob der Bogen Rechts- oder Linkskrümmung hat. Bei rx=ry entsteht ein Kreisbogen und phi ist bedeutungslos.^{[Anm 2]}

Vier Möglichkeiten, einen Bogen vom gelben zum anderen Punkt zu zeichnen:

rot: lf = 0, sf = 0
grün: lf = 0, sf = 1
blau: lf = 1, sf = 0
schwarz: lf = 1, sf = 1

Q quadratic Bézier gerade Anzahl Koordinatenpaare Zeichnet eine quadratische Bézierkurve, also mit einem Koordinatenpaar als Kontrollpunkt. Das zweite Koordinatenpaar ist der Endpunkt der Kurve.

T smooth quadratic Bézier ein oder mehr Koordinatenpaare Zeichnet eine quadratische Bézierkurve, wobei der Kontrollpunkt die Punktspiegelung des Kontrollpunkts der unmittelbar davor gezeichneten quadratischen Bézierkurve am aktuellen Endpunkt ist. Angegeben wird jeweils nur der Endpunkt der Kurve.

C cubic Bézier durch drei teilbare Anzahl Koordinatenpaare Zeichnet eine kubische Bézierkurve. Angegeben wird jeweils der erste und zweite Kontrollpunkt und der Endpunkt der Kurve.

S smooth cubic Bézier gerade Anzahl Koordinatenpaare Zeichnet eine kubische Bézierkurve, wobei der erste Kontrollpunkt die Punktspiegelung des zweiten Kontrollpunkts der unmittelbar davor gezeichneten kubischen Bézierkurve am aktuellen Endpunkt ist. Angegeben wird jeweils nur der zweite Kontrollpunkt und der Endpunkt der Kurve.

R Catmull-Rom zwei oder mehr Koordinatenpaare Zeichnet vom aktuellen Punkt aus einen Catmull-Rom-Spline. Die angegebenen Punkte werden also automatisch mit einer glatten Kurve verbunden, wozu anders als bei C und S keine Kontrollpunkte verwendet werden.^{[Anm 3]}

B bearing ein oder mehrere Winkelangaben Die Orientierung der folgenden Pfaddaten wird um den angegebenen Winkel gedreht. Legt ein Winkelmaß in Grad fest. Bei mehreren angegebenen Winkeln wird die Orientierung aus der Summe aller Winkel bestimmt.^{[Anm 4]}

↑ Die Angabe mehrerer Koordinatenpaare bewirkt einen Polygonzug, was aber als unsauberer Programmierstil gilt, weil nicht alle Renderer bei einem nachfolgenden Z-Kommando den Pfad richtig schließen.
↑ Achtung: Wird ein Zielpunkt angegeben, welcher vom aktuellen Punkt aus mit dem beschriebenen Bogen nicht erreicht werden kann, weil er zum Beispiel weiter weg liegt als der Durchmesser des Kreisbogens, so sollte es zu automatischen Anpassungen durch den Parser kommen, was aber nicht immer regelkonform geschieht.
↑ Vorschlag für SVG 2.0, siehe Arbeitsentwurf vom 09. April 2015, wurde allerdings in nächsten Arbeitsentwurf wieder gestrichen.
↑ Vorschlag für SVG 2.0, siehe Empfehlungskandidaten vom 2016-09-015, wurde allerdings aufgrund mangelnder Implementierungen wieder gestrichen.

Die weiteren Grafikelemente existieren, um einerseits eine bessere Nutzbarkeit zu gewährleisten, andererseits aber auch, um die inhaltliche Bedeutung klarer herauszustellen, weil der Notation eines entsprechenden Pfades im Quelltext oft nicht auf den ersten Blick anzusehen ist, ob es sich um einen einfachen Kreis, eine Ellipse, ein Rechteck mit abgerundeten Ecken handelt. Ferner erleichtert es auch die Animation dieser speziellen Formen. Sie können ebenso wie das Pfad-Element als Umriss gezeichnet, gefüllt und zum Clipping benutzt werden (mit Ausnahme des <image />-Elements). Eine weitere Ausnahme ergibt sich daraus, dass die Tiny-Profile keine Ellipsenbögen erlauben, somit können Kreise, Ellipsen und auch Rechtecke mit elliptisch abgerundeten Ecken in diesem Profil nicht exakt mit dem Element <path /> konstruiert werden, mit den dafür vorgesehenen Spezialelementen schon.

<path d="M 174.5,126.0 L 175.0,127.5 173.5,128.0 174.5,126.0 Z M 100,100 C 100,200 200,100 200,200 Q 50,150,100,100 L 200,100 z" />

Das Element <circle /> definiert einen Kreis, der durch die Position des Mittelpunktes (cx;cy) und seinen Radius "r" beschrieben wird:

<circle cx="125" cy="125" r="75" />

Das Element <ellipse /> definiert eine Ellipse, welche durch die Position ihres Mittelpunktes (cx;cy) und ihre zwei Halbachsenradien (rx;ry) beschrieben wird. Ist rx = ry ergibt sich ein Kreis mit dem Mittelpunkt (cx;cy).

<ellipse cx="125" cy="125" rx="75" ry="150" />

Um die Ausrichtung der Achsen zu ändern, muss man entweder mit dem Pfadelement oder mit Transformationen arbeiten.

Das Element <rect /> definiert ein Rechteck über die Position seiner oberen linken Ecke (x, y), seiner Breite (width) und seiner Höhe (height). Optional können die Ecken des Rechteckes durch Angabe von Radien (rx, ry) abgerundet werden.

<rect x="25" y="25" width="400" height="200" rx="10" ry="10" />

Das Element <line /> definiert eine einfache gerade Linie (Strecke), die über die Koordinaten ihrer beiden Endpunkte (x1,y1 und x2,y2) beschrieben wird.

<line x1="50" y1="50" x2="200" y2="200" />

Das Element <polyline /> definiert eine beliebige Zahl von Punkten, die als Polygonzug durch Strecken verbunden werden. Die Punkte werden mittels des Parameters points über Koordinatenpaare beschrieben.

<polyline points="50,150 50,200 200,200 200,100" />

Das Element <polygon /> definiert ein Vieleck. Es wird genauso definiert wie der Polygonzug, wobei hier zusätzlich der letzte Punkt mit dem ersten verbunden wird, sodass ein geschlossenes Polygon entsteht.

Mit dem Element <text /> wird Text in die Grafik eingebettet. Das Textelement kann über Attribute, wie zum Beispiel Schriftgröße und Schriftart, Laufrichtung und Wortabstand formatiert werden. Text kann zudem über Unterelemente wie <tspan /> strukturiert werden.

Das Element (<image />) bindet eine Rastergrafik ein, die über eine Pfadangabe, Breite und Höhe sowie die Position beschrieben wird.

Alle diese Elemente können durch das Gruppenelement (<g />) zusammengefasst werden. Transformationen und Styling, die auf das Gruppenelement angewendet werden, gelten für alle damit zusammengefassten untergeordneten Elemente.

Auch das Element <a /> eignet sich entsprechend zur Gruppierung von darzustellenden Inhalten, kann aber zusätzlich eine Verweisfunktionalität bekommen.

Auch das Element <defs /> dient in gewisser Weise der Gruppierung, dessen Inhalt wird aber nicht direkt dargestellt werden, sondern ist als Vorrat gedacht, aus dem andere Elemente referenzieren können.

Wie bei den meisten vom W3C empfohlenen Formaten wird auch bei SVG besonderer Wert darauf gelegt, dass Autoren einfache Möglichkeiten gegeben werden, Inhalte zugänglich anzubieten. Basis ist dabei primär die Möglichkeit der Bereitstellung einer Textalternative. Umgedreht könnte man auch die grafische Repräsentation des Dokumentes als Alternative zu diesem Textinhalt bezeichnen. Fehlt eine hinreichende Textalternative, erlaubt das den formalen Rückschluss, dass das Dokument keine relevante Information enthält.

Jedes SVG-Dokument, das inhaltlich relevant ist, sollte daher mindestens als erstes Kindelement des Wurzelelementes ein Element <title /> haben. Wie der Name schon andeutet, wird darin der Titel des Werkes als Text genannt, etwa im Sinne einer Kurzzusammenfassung. Titel können auch lediglich der Identifikation eines Werkes in einer externen Diskussion dienen (wie man Werke von Künstlern bezeichnet, wenn man über diese Werke diskutieren will).

Auf <title /> kann ein Element <desc /> folgen. Der Inhalt von <desc /> ist eine ausführlichere Beschreibung des Werkes, eher was seine Bedeutung und Funktion anbelangt, als deren grafische Umsetzung. Der Inhalt von <desc /> kann einfacher Text sein, er kann aber auch mit einem anderen XML-Format wie etwa XHTML strukturiert werden. <title /> und <desc /> stellen zusammen die Textalternative zum grafischen Inhalt des Dokumentes dar. Dies ist damit der Kerninhalt des Dokumentes hinsichtlich der Funktion von Barrierefreiheit und Zugänglichkeit und erlaubt somit auch Personen Zugang zur Information des Dokumentes, welche die grafische Repräsentation nicht sehen können oder wollen. Da die inhaltliche Bedeutung grafischer Repräsentationen nicht zwangsläufig einfach zu verstehen ist, kann dieser alternative Inhalt natürlich auch für andere Personen sehr nützlich sein. Als Alternative wird jedenfalls diese Textalternative nur dargestellt, falls die grafische Repräsentation nicht dargestellt wird. Zusätzlich kann eine Darstellung der Textalternative erfolgen, wenn der Nutzer dies anfordert.

Auf <desc /> kann ferner ein Element <metadata /> folgen, das primär dazu gedacht ist, Metainformationen über das Dokument zu beinhalten. Diese Metainformationen werden in der Regel strukturiert notiert, damit sie automatisch von Programmen ausgewertet werden können. Zur Strukturierung eignet sich zum Beispiel das XML-Format RDF oder Elemente und Terme gemäß Dublin Core.

Fast alle anderen Elemente von SVG können ebenfalls <title />, <desc /> und <metadata /> mit beschriebener Funktion enthalten, sie bilden dann entsprechend die Textalternative und Metainformation für das Element, in dem sie notiert sind, einschließlich der Nachfahren dieses Elementes.

Das Konzept weist hinsichtlich Mehrsprachigkeit Schwächen auf, insbesondere was das Element <title /> des Wurzelelementes anbelangt, das nur mit einer Sprache notiert werden kann. Bei mehrsprachigen Werken kann es also sinnvoll sein, den Inhalt dieses Elementes nur als sprach-invariante Identifikation des Werkes zu betrachten und die eigentliche mehrsprachige Textalternative in den beiden anderen Elementen unterzubringen, die mehr Struktur aufweisen können.

Die Darstellung von Elementen kann mit Präsentationsattributen beeinflusst werden. Festgelegt werden können zum Beispiel Füllung, Konturlinie und Transparenz der Elemente sowie bei Text die Eigenschaften der Schrift. Zu den Präsentationsattributen gibt es auch jeweils gleichnamige Eigenschaften gemäß Cascading Style Sheets (CSS), die sich eignen, um mit einer Stilvorlage eine alternative Präsentation anzubieten. Die Eigenschaften und damit Stilvorlagen sind bei den Profilen vom Typ tiny nicht vorgesehen. Die Präsentationsattribute und die zugehörigen Eigenschaften richten sich dabei in weiten Teilen nach den im XML-Umfeld weit verbreiteten Stilvorlagen-Sprachen XSL und CSS.^[22] Über zusätzliche Elemente können nicht nur Farben, sondern auch Farbverläufe und Muster verwendet werden.

Durch die Verfügbarkeit von Präsentationsattributen und Eigenschaften kann ähnlich wie bei der Kombination (X)HTML und CSS eine Trennung zwischen Inhalt und Dekoration vorgenommen werden. Als inhaltlich relevant oder als für das Verständnis des Dokumentes wichtig wird dabei betrachtet, was mit Elementen und Attributen notiert wird, als Dekoration das, was als alternative Präsentation mit Stilvorlagen in einer anderen Sprache wie CSS angeboten wird.

Wie bei allen XML-Formaten können externe Stilvorlagen mit entsprechenden Verarbeitungsanweisungen referenziert werden. Zusätzlich hat SVG auch ein spezielles Element style, in dem Stilvorlagen notiert werden können. Mit einem Attribut style kann zudem bei jedem Element eine Stilvorlage notiert werden. Da dem Attributwert von style allerdings eine recht hohe Priorität zukommt und die Stilvorlage zudem als Attributwert schlecht vom eigentlichen Inhalt getrennt ist, gilt die Verwendung des Attributes als einfach vermeidbar und schlecht hinsichtlich des Prinzips der Trennung von Inhalt und Dekoration.

Jedes Element und jede Gruppe von Elementen kann durch eine Reihe affiner Transformationen in Position, Orientierung und Form verändert werden. Die Transformation wird einem beliebigen Element als Attribut angehängt. Zur Verfügung stehen Translation (Parallelverschiebung), Drehung, Skalierung, Scherung sowie die Kombination verschiedener Transformationen in Form einer 3×3-Matrix. Die Matrix wird auf Punkte in projektiver Darstellung angewandt und stellt somit die Kombination einer linearen Abbildung in Form einer 2×2-Matrix mit einer Translation dar, ohne jedoch zwischen den beiden letzten Abbildungstypen unterscheiden zu müssen.^[23] Die Transformationen können beliebig kombiniert werden, wobei die Hintereinanderausführung von Transformationen der Multiplikation der Transformationsmatrizen entspricht.

Eine Transformation mit direkter Matrixangabe erfolgt mit

transform="matrix(a b c d e f)"

Das ist eine Kurzform für die nichtkonstanten Elemente der Abbildungsmatrix

(\begin{matrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{matrix})

${\begin{pmatrix}a&c&e\\b&d&f\\0&0&1\\\end{pmatrix}}$

Hierbei entspricht:

Translation um t_x und t_y
`transform="translate(t_x,t_y)"`	`transform="matrix(1 0 0 1 t_x t_y)"`	$(\begin{matrix} 1 & 0 & t_{x} \\ 0 & 1 & t_{y} \\ 0 & 0 & 1 \end{matrix})$ ${\begin{pmatrix}1&0&t_{x}\\0&1&t_{y}\\0&0&1\\\end{pmatrix}}$
Rotation mit Winkel α um Punkt (0,0)
`transform="rotate(α)"`	`transform="matrix(cos(α) sin(α) -sin(α) cos(α) 0 0)"`	$(\begin{matrix} \cos (α) & - \sin (α) & 0 \\ \sin (α) & \cos (α) & 0 \\ 0 & 0 & 1 \end{matrix})$ ${\begin{pmatrix}\cos(\alpha )&-\sin(\alpha )&0\\\sin(\alpha )&\cos(\alpha )&0\\0&0&1\\\end{pmatrix}}$
Rotation mit Winkel α um Punkt (c_x c_y) (siehe unten)
`transform="rotate(α,c_x,c_y)"`	`transform="matrix(cos(α), sin(α), -sin(α), cos(α), c_x, c_y) matrix(1,0,0,1,-c_x,-c_y)"` = `transform="matrix(cos(α), sin(α), -sin(α), +cos(α), (1-cos(α))c_x + sin(α)c_y, (1-cos(α))c_y - sin(α)c_x)"`	$(\begin{matrix} \cos (α) & - \sin (α) & (1 - \cos (α)) c_{x} + \sin (α) c_{y} \\ \sin (α) & + \cos (α) & (1 - \cos (α)) c_{y} - \sin (α) c_{x} \\ 0 & 0 & 1 \end{matrix})$ ${\begin{pmatrix}\cos(\alpha )&-\sin(\alpha )&(1-\cos(\alpha ))\,c_{x}+\sin(\alpha )\,c_{y}\\\sin(\alpha )&+\cos(\alpha )&(1-\cos(\alpha ))\,c_{y}-\sin(\alpha )\,c_{x}\\0&0&1\\\end{pmatrix}}$
Skalierung um die Faktoren s_x und s_y
`transform="scale(s_x,s_y)"`	`transform="matrix(s_x 0 0 s_y 0 0)"`	$(\begin{matrix} s_{x} & 0 & 0 \\ 0 & s_{y} & 0 \\ 0 & 0 & 1 \end{matrix})$ ${\begin{pmatrix}s_{x}&0&0\\0&s_{y}&0\\0&0&1\\\end{pmatrix}}$
Scherung um Winkel α in X-Richtung
`transform="skewX(α)"`	`transform="matrix(1,0,tan(α),1,0,0)"`	$(\begin{matrix} 1 & \tan (α) & 0 \\ 0 & 1 & 0 \\ 0 & 0 & 1 \end{matrix})$ ${\begin{pmatrix}1&\tan(\alpha )&0\\0&1&0\\0&0&1\\\end{pmatrix}}$
Scherung um Winkel α in Y-Richtung
`transform="skewY(α)"`	`transform="matrix(1,tan(α),0,1,0,0)"`	$(\begin{matrix} 1 & 0 & 0 \\ \tan (α) & 1 & 0 \\ 0 & 0 & 1 \end{matrix})$ ${\begin{pmatrix}1&0&0\\\tan(\alpha )&1&0\\0&0&1\\\end{pmatrix}}$

Matrixrechnung:

Eine Abbildung wirkt auf einen Punkt P – d. h. auf dessen projektive Darstellung in homogenen Koordinaten – indem diese von links mit der entsprechenden Abbildungsmatrix multipliziert wird. Wird P um T verschoben, so sind seine neuen Koordinaten

T (P) = T \cdot P = (\begin{matrix} 1 & 0 & t_{x} \\ 0 & 1 & t_{y} \\ 0 & 0 & 1 \end{matrix}) \cdot (\begin{matrix} p_{x} \\ p_{y} \\ 1 \end{matrix}) = (\begin{matrix} p_{x} + t_{x} \\ p_{y} + t_{y} \\ 1 \end{matrix})

$T(P)=T\cdot P={\begin{pmatrix}1&0&t_{x}\\0&1&t_{y}\\0&0&1\\\end{pmatrix}}\cdot {\begin{pmatrix}p_{x}\\p_{y}\\1\\\end{pmatrix}}={\begin{pmatrix}p_{x}+t_{x}\\p_{y}+t_{y}\\1\\\end{pmatrix}}$

analog für eine Skalierung mit S:

S (P) = S \cdot P = (\begin{matrix} s_{x} & 0 & 0 \\ 0 & s_{y} & 0 \\ 0 & 0 & 1 \end{matrix}) \cdot (\begin{matrix} p_{x} \\ p_{y} \\ 1 \end{matrix}) = (\begin{matrix} s_{x} \cdot p_{x} \\ s_{y} \cdot p_{y} \\ 1 \end{matrix})

$S(P)=S\cdot P={\begin{pmatrix}s_{x}&0&0\\0&s_{y}&0\\0&0&1\\\end{pmatrix}}\cdot {\begin{pmatrix}p_{x}\\p_{y}\\1\\\end{pmatrix}}={\begin{pmatrix}s_{x}\cdot p_{x}\\s_{y}\cdot p_{y}\\1\\\end{pmatrix}}$

Für die Hintereinanderausführungen von T und S gilt in diesem Falle

T \circ S = T \cdot S = (\begin{matrix} s_{x} & 0 & t_{x} \\ 0 & s_{y} & t_{y} \\ 0 & 0 & 1 \end{matrix})

$T\circ S=T\cdot S={\begin{pmatrix}s_{x}&0&t_{x}\\0&s_{y}&t_{y}\\0&0&1\\\end{pmatrix}}$

sowie

S \circ T = S \cdot T = (\begin{matrix} s_{x} & 0 & s_{x} \cdot t_{x} \\ 0 & s_{y} & s_{y} \cdot t_{y} \\ 0 & 0 & 1 \end{matrix})

$S\circ T=S\cdot T={\begin{pmatrix}s_{x}&0&s_{x}\!\cdot \!t_{x}\\0&s_{y}&s_{y}\!\cdot \!t_{y}\\0&0&1\\\end{pmatrix}}$

die letzte Darstellung kann in SVG z. B. codiert werden als

„scale(s_x s_y) translate(t_x t_y)“

oder als

„matrix(s_x 0 0 s_y s_x·t_x s_y·t_y)“

Die Verkettung von zweimal "matrix" in SVG bedeutet also

transform="matrix(a₁ b₁ c₁ d₁ e₁ f₁) matrix(a₂ b₂ c₂ d₂ e₂ f₂)"

= transform="a₁*a₂+c₁*b₂, b₁*a₂+d₁*b₂, a₁*c₂+c₁*d₂, b₁*c₂+d₁*d₂, a₁*e₂+c₁*f₂+e₁, b₁*e₂+d₁*f₂+f₁"

SVG hat Elemente, mit denen Animation interaktiv und deklarativ bewerkstelligt werden kann, das heißt ohne Skripte rein durch Angaben in der XML-Auszeichnungsprache. SVG übernimmt dabei von SMIL Elemente und die Interpretation derselben in den eigenen Namensraum.

Durch die von SMIL übernommenen Elemente können deklarative Animationen realisiert werden. In den Empfehlungen ist im Detail beschrieben, welche Merkmale animierbar sind und in welcher Weise. Animierbar sind die meisten Attribute und Eigenschaften, zusätzlich gibt es die Möglichkeit, die Position von Gruppierungselementen oder darstellbaren Elementen zu animieren.

Zeitangaben können von Millisekunden bis Stunden angegeben und verschieden ausgezeichnet werden. Für die meisten Animationselemente wird ein Pflichtattribut benötigt, das die Art der Animation festlegt. Weitere grundlegende Komponenten sind Zeitangaben, Zustände während der Animation (optional), der Zustand nach der Animation, und ob die Animation nach Beendigung wiederholt werden soll, ob der Animationseffekt dann kumulativ ist und ob er additiv hinsichtlich anderer Animationen mit niedrigerer Priorität und der notierten Attributwerte sein soll. Für die Zeitangabe werden logische Begriffe wie begin (englisch: Start, Beginn) end (englisch: Ende) und dur (englisch „duration“: Dauer) verwendet. Start, Wiederholungen etc. können auch von Ereignissen wie Mausberührung oder -klick abhängig gemacht werden.

Die Auswahl des animierten Attributes oder der animierten Eigenschaft wird in SVG durch zwei Attribute festgelegt: attributeName gibt den Namen des zu animierenden Attributes oder der zu animierenden Eigenschaft an, attributeType gibt an, ob ein Attribut animiert wird oder eine (CSS-)Eigenschaft. Im illustrierten Beispiel wird angedeutet, dass die Füllung (fill-Attribut) eines Rechtecks sowie dessen Transformation (transform-Attribut) über die Dauer von fünf Sekunden animiert wird. Die Illustration selbst enthält keine Animation. Zu Beginn ist das Rechteck blau gefüllt und nicht verdreht, nach fünf Sekunden ist es grün gefüllt, etwas versetzt und um 150° verdreht. Die Zwischenzustände können je nach den angegebenen Attributen diskret geändert werden, sich gleichmäßig, aber auch ungleichmäßig ändern, im Beispiel schematisch durch vier Zwischenschritte dargestellt.

Unschärfe-Filter in SVG. Links ohne, rechts mit Filter, angewandt auf eine Gruppe von Elementen.

Bekannte Grafikfilter sind aus Desktop-Publishing-Programmen übernommen worden und arbeiten nach dem Matrizen-Prinzip, bei dem Operatoren und Funktionen die Form der Matrix ausdrücken. Es wird jede einzelne Bildposition mit dem definierten Filtereffekt berechnet und auf die nächste übertragen. Auf diese Weise lassen sich Bilder und Grafiken auf verschiedenste Art und Weise bearbeiten.

SVG stellt mit Ausnahme des Profils Tiny 1.1 einen Zugriff auf das XML-Dokument-Objekt-Modell (DOM) bereit und zusätzlich eine eigene Erweiterung dieses DOMs. Damit wird es möglich, die Präsentation eines SVG-Dokumentes zu manipulieren. Dies wird meistens mit Skriptsprachen wie ECMAScript/JavaScript genutzt, um während der Präsentation diese dynamisch zu ändern, um Betrachtern einen interaktiven alternativen Zugang zum Inhalt zu ermöglichen. Die DOM-Repräsentation kann allerdings auch vor der Betrachtung manipuliert werden, wonach ein inhaltlich geändertes Dokument abgespeichert werden kann.

SVG selbst fordert allerdings nicht, dass eine bestimmte Skriptsprache interpretiert wird. Auch daher haben solche Skripte formal nicht die Möglichkeit, den Inhalt oder die Bedeutung eines Dokumentes während der Betrachtung zu ändern. Hinsichtlich Zugänglichkeit und Barrierefreiheit ist dies immer von Autoren zu bedenken, die Skripte in Dokumenten verwenden möchten.

Über das DOM können zum Beispiel neue Objekte erzeugt werden, die Elementen und ihren Eigenschaften entsprechen. Die DOM-Repräsentation eines Dokumentes kann so auf Benutzereingaben wie Mausklicks und Mausbewegungen reagieren oder vollständig algorithmisch generiert werden. Das lässt sich etwa in Web-Anwendungen nutzen (vergleiche den Grafikeditor SVG-edit,^[24] Diagramme in Google Docs^[25] oder Kartenanwendungen^[26]).

Zur Manipulation von SVG definiert der SVG-Standard das SVG-DOM.^[27] Es erweitert das für alle XML-Arten gleiche Standard-DOM durch SVG-spezifische Datentypen und Funktionen, etwa für grafische Transformationen (Affine Abbildungen). Diese Schnittstelle ist für verschiedene Programmiersprachen standardisiert (für die standardisierte JavaScript-Teilmenge ECMAScript, Java, Perl und Python^[28]). In vielen gängigen Darstellungsprogrammen wird JavaScript zur DOM-Manipulation verwendet.