JavaScript: Das umfassende Referenzwerk, Sixth Edition

Scalable Vector Graphics (SVG)

SVG ist eine XML-Grammatik für Grafiken. Das Wort »Vector« im Namen zeigt an, dass SVG sich grundlegend von Rastergrafikformaten wie GIF, JPEG und PNG unterscheidet, die eine Matrix mit Pixelwerten angeben. Ein SVG-»Bild« ist im Gegensatz dazu eine genaue, auflösungsunabhängige (deswegen »skalierbare«) Beschreibung der Schritte, die erforderlich sind, um die gewünschte Grafik zu zeichnen. So sieht eine einfache SVG-Datei üblicherweise aus:

<!-- Eine SVG-Figur beginnen und unseren Namensraum deklarieren. --> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"> <!-- Das Koordinatensystem für die Figur. --> <defs> <!-- Einige Definitionen einrichten, die wir nutzen werden. --> <linearGradient id="fade"> ...