Zuerst wird gezeigt, wie Licht in SVG eingefügt werden kann. Hierzu muss man sich vorstellen, dass man sich im dreidimensionalen Raum befindet und die SVG ist ein zweidimensionales Abbild dessen, was man gerade sieht. In dem dreidimensionalen Raum, indem die positive z-Achse auf den Betrachter zeigt, können nun verschiedenartige Lichtquellen platziert werden. Diese Lichtquellen können zwei Arten von Licht aussenden: diffuses, weiches Licht (<feDiffuseLighting>) und spekulares Licht (<feSpecularLighting>). Diese Elemente besitzen auch die universellen Filterelemente und das Attribut light-color zum Festlegen der Lichtfarbe. Wer die Darstellung des Lichts über das Phong-Modell kennt, kann über andere Attribute die zwei Lichtarten beeinflussen. Solche Vorkenntnisse sind aber nicht Vorraussetzung für dieses Tutorial und eine Erläuterung würde den Rahmen sprengen. Bei Interesse betrachten Sie bitte folgende Links: http://www.w3.org/TR/SVG11/filters.html#feDiffuseLighting und http://www.w3.org/TR/SVG11/filters.html#feSpecularLighting.

Beide können als Child-Elemente drei verschiedene Lichtquellentypen beinhalten: Punktlichtquelle (<fePointLight>), Parallellichtquelle (<feDistantLight>) und Spotlicht (<feSpotLight>).

Für die Punktlichtquelle <fePointLight> können drei Attribute belegt werden, nämlich x-, y- und z-Koordinate des Punktes, an dem das Licht in alle Richtungen ausgesendet wird. Default-Punkt ist (0,0,0). Parallellicht <feDistantLight> wird nicht aus einem Punkt, sondern einer Richtung ausgesendet, die Strahlen treffen gleichmässig auf und geben dadurch nur eine Grundhelligkeit. Um die Richtung zu bestimmen, aus der das Licht kommt, kann der Winkel zur XY-Ebene (Attribut azimuth) und zur XZ-Ebene (Attribut elevation). Default-Wert ist bei beiden Attributen 0. Eine Spotlichtquelle sendet wie eine Taschenlampe das Licht von einem Punkt in eine bestimmte Richtung. Der Quellenpunkt wird wieder über x,y,z (default 0,0,0) definiert, die Richtung über den Punkt, auf den das Spotlight gelenkt ist: die Attribute pointsAtX, pointsAtY, pointsAtZ sind die Koordinaten. Ausserdem kann der Kreis, den das Spotlicht auf der Geometrie erzeugt, über zwei Attribute verändert werden. Der specularExponent bestimmt wie schnell die Lichtintensität von innen nach aussen hin abnimmt (je größer der Wert, desto schneller); der limitingConeAngle bestimmt die Größe (je größer der Wert, desto größer der Kreis).

Die Lichtquellen werden global für das ganze SVG-Dokument platziert und nicht lokal für jedes Element. In Beispiel 28 werden die drei Lichtquellen gezeigt und die unteren zwei Rechtecke zeigen deutlich die Globalität der Lichtquellen.