In Kapitel 2.4.3 wurden die Darstellung beschreibenden Attribute vorgestellt, unter anderem das style-Attribut, mit dessen Hilfe man Darstellungseigenschaften für das aktuelle Element festlegen kann. Nun kennt man bereits Cascading Stylesheets von der Benutzung in HTML-Dokumenten und die Vorteile, die die CSS mit sich bringen. Diese sollen nun auch in SVG-Dokumenten genutzt werden können.

Genau wie HTML-Dokumente können SVG-Dokumente externe CSS-Dateien referenzieren oder intern CSS-Defintionen beinhalten. Im ersten Fall muss lediglich noch vor dem !DOCTYPE-Element die Referenz auf das Stylesheet erfolgen:

<?xml version="1.0" standalone="no"?>
<!-- STYLESHEET-REFERENZ HIER: -->
<?xml-stylesheet href="mystyle.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
...

Intern platziert man die Stylesheet-Deklaration innerhalb des <defs>-Elementes, da es sich ja ebenfalls um ein Element handelt, das referenziert werden kann:

<defs>
  <style type="text/css"><![CDATA[
    rect {
      fill: red;
      stroke: blue;
      stroke-width: 3;
    }
    .halbtransparent {
      opacity: 0.5;
    } ...
  ]]></style>
</defs>

Die eigentliche Deklaration der CSS sollte bereits bekannt sein: es können die Darstellungseigenschaften für bestimmte Elemente definiert werden, die dann im gesamten Dokument auf diese Elemente angewendet werden (im oberen Codestück z.B. für das <rect>-Element) oder es können Klassen definiert werden, die dann jedes Element über das class-Attribut referenzieren kann (im oberen Codestück Klasse "halbtransparent").

Das Beispiel 22 zeigt die Verwendung von internen Stylesheets. Hier wird wieder einmal der Vorteil von CSS deutlich klar: durch Wiederverwendung wird der Code sprechender, kürzer und überischtlicher. Änderungen sind schnell und einfach durchzuführen und die Einheitlichkeit des Layouts ist gewährleistet, was bei dem Beispiel der Navigationsgruppe meistens sehr wichtig ist.