Bisher wurden zwei Möglichkeiten dargestellt, wie ein Element gefüllt und wie die Kontur eines Elementes gezeichnet werden kann: erstens mit einer konstanten Farbe und zweitens mit einem Muster. Die dritte Möglichkeit, die die Sprache SVG bietet, sind Verläufe, "gradients" genannt. Es gibt zwei Typen von gradients, radial gradients, die kreisförmigen Verläufen, und linear gradients, Verläufe entlang einer Strecke.

Wie bei allen Elementen, die nicht ohne weiteres gerendert werden, sondern erst von einem anderen Element referenziert werden müssen, werden auch die Verläufe innerhalb von <defs> definiert. Um einen linearen Verlauf zu definieren, benutzt man das Tag <linearGradient>. Es ist nicht unbedingt notwendig, die Strecke, an der der Verlauf liegen soll, über die beiden Endpunkte (x1,y1) und (x2,y2) zu definieren. Ohne diese Angaben wird davon ausgegangen, dass der Verlauf horiziontal von links nach recht über das ganze Element gezeichnet werden soll. Die restlichen Attribute, die der lineare Verlauf besitzen kann, ähneln denen von <pattern> (siehe Kapitel 2.5.5.2 Muster) sehr. Das Attribut gradientUnits entspricht patternUnits: der Wert userSpaceOnUse bestimmt, das x1, y1, x2 und y2 als absolute Wert in dem durch das referenzierende Element aufgespannte Koordinatensystem interpretiert werden; durch den Wert objectBoundingBox werden relative Werte (Prozentangaben) erwartet, die sich auf das Koordinatensystem des zu füllenden Elements beziehen. Ausserdem kann man den Verlauf auch mit gradientTransform, das ebenfalls dieselben Werte wie ein einfaches transform-Attribut erwartet, transformieren.

Um nun aber überhaupt zu definieren, welche Farben der Verlauf haben soll, wie viele Übergange es geben soll und wo diese platziert werden sollen, muss noch ein weiteres Tag vorgestellt werden, dass nur innerhalb von <linearGradient> und <radialGradient> auftauchen darf: <stop>. <stop> definiert jeweils den Start eines Übergangs, also den Punkt, an dem noch kein Verlauf stattgefunden hat (es werden also mindestens zwei <stop> für einen Verlauf gebraucht). Im gradient stop wird eine der Verlaufsfarben über stop-color angegeben, durch offset definiert man den Punkt, an dem der Verlauf beginnen soll und die stop-color noch 100% Intensität hat. offset kann eine Zahl oder Prozentangabe als Wert haben, es bezieht sich auf die Strecke, entlang der der Verlauf liegt. Beispiel 26 zeigt verschiedene lineare Verläufe, die auf Rechtecke angewendet werden.

Was das Beispiel ebenfalls bereits demonstriert hat, ist, dass man wie bei den Mustern einen anderen gradient verwenden, also über xlink:href="#id_des_anderen_Verlaufs" referenzieren kann. Ausserdem benutzt das Beispiel auch schon das letzte der Verlaufspezifischen Attribute: spreadMethod. Wenn der Verlauf erst innerhalb des Elementes startet, legt dieses Attribut fest, welche Farbe die Teile des Elements haben sollen, die nicht mit einem Verlauf belegt sind. "pad" ist der default-Wert und bedeutet, dass einfach die Farbe am Ende des Verlaufs weiterbenutzt wird. "repeat" benutzt die Farbe vom anderen Ende des Verlaufs und "reflect" reflektiert die gradient-Farben.

Mit dem Wissen über lineare Verläufe ist das Verstehen der radialen Verläufe kein Problem mehr: es wird das Tag <radialGradient> benutzt und man kann (muß aber nicht) den Aussenkreis des Verlaufs definieren. Dies wird über die Attribute cx, cy (Koordinaten des Mittelpunkts) und r (Radius) getan. Zudem beschreiben die Attribute fx und fy den Startpunkt, genannt focal point, des Verlaufs. Werden diese Angaben nicht gemacht, wird der Verlauf einfach über das gesamte Element gelegt und der focal point liegt im Kreismittelpunkt. Die Attribute gradientTransform, gradientUnits, spreadMethod, xlink:href wurden oben bei den linearen Verläufen bereits erklärt und haben hier die gleiche Bedeutung. Beispiel 27 zeigt einige radiale Verläufe.