Wer bereits über Kenntnisse in HTML verfügt und sogar auch XML, hat es einfach, SVG zu lernen, da es sich ja um eine XML-Instanz handelt. Die Grafik wird aus Primitiven, komplexen Geometrien, Text und Bildern aufgebaut, für die es alle vordefinierte Tags gibt. Man kann über Attribute die Darstellung festlegen (wie das style-Attribut in HTML) oder auch über Tags komplexe Darstellungen erstellen, wie Verläufe und Muster, die dann auf die Primitve etc. angewendet werden. Die Elemente können transformiert und animiert werden, indem eine bestimmte Animation (z. B. eine Veränderung der Füllfarbe innerhalb von zwei Sekunden) definiert und diesem Element (z.B. einem Rechteck) zugeordnet wird. Man kann die Elemente auch in Gruppen zusammenfassen (was bei gemeinsamen Transformationen sehr sinnvoll sein kann), Definitionsbereiche im Dokuement festlegen etc. All diese Möglichkeiten werden in den Kapiteln 2.4 universale Attribute und 2.5 Elemente genau erläutert.

Da für das Tutorial nur HTML-Kentnisse Vorraussetzung sind, werden im folgenden die syntaktischen Besonderheiten von SVG gegenüber HTML aufgezeigt.

1. SVG unterschiedet zwischen Groß- und Kleinschreibung; Tags, Attribute und deren vordefinierten (!) Werte werden vollständig klein geschrieben.
2. Zu jedem öffnenden Tag muß ein schließendes gesetzt werden. Tags, die keinen Body haben, sprich keinen textuellen Inhalt zwischen öffnenden und schließenden, können auch mit einem / am Ende geschlossen werden (Bsp: <rect/>
3. Attributwerte werden generell von Anführungszeichen umschlossen.
4. Kommentare sind genau wie in HTML mit <!-- --> umfasst.
5. Positionierungen durch Attribute werden nicht durch top und left definiert, sondern x und y (siehe Kapitel 2.4.2 positionierende Attribute).

Der Kopf eines SVG-Dokument sollte immer folgende Elemente beinhalten:

<!-- Zuerst muss die Sprache des Dokuments (XML), die Version (1.0) und, ob es sich um ein eigenständiges Dokument oder um eingebetteten Code handelt. -->
<?xml version="1.0" standalone="yes"?>
<!-- Angabe der korrekten DTD (hier SVG Version 1.1)-->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Das alles umschlißende SVG Tag mit Versions- und Namespace-Definition -->
<svg width="500px" height="400px" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <!-- Hier erfolgt dann die SVG-Definition -->
</svg>