Stylesheet

In SVG-Dokumenten haben Sie die Möglichkeit, CSS zu nutzen, um die Elemente zu stylen. Dabei kommen nicht die „normalen Eigenschaften“ von CSS für HTML zum Einsatz. Vielmehr ist es möglich, dass alle Präsentationsattribute (wie z. B. fill, stroke, stroke-width, font-family und transform) auch als CSS-Eigenschaften notiert werden können. Um ein Element mit CSS zu stylen, können Sie, wie in HTML auch, das Attribut style verwenden. Die Notation fill="red" hat also die gleiche Auswirkung wie style="fill: red;". In CSS können wie gewohnt Element-Selektoren, Klassifizierungen, Identifikationen, Attribut-Selektoren und Kombinatoren verwendet werden. CSS-Anweisungen können Sie in einem SVG-Dokument, so wie in einem HTML-Dokument auch, im style-Element notieren.

<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 600 400">
    <style type="text/css">
    .rot
    {
        stroke: orange;
        stroke-width: 2.5;
        fill: red;
    }
    .blau
    {
        stroke: cyan;
        stroke-width: 2.5;
        fill: blue;
    }
    </style>
    <symbol id="baustein" viewBox="0 0 100 100">
        <rect x="5" y="5" width="90" height="90" rx="5" ry="5" />
    </symbol>
    <rect x="150" y="50" width="300" height="300" fill="black" />
    <use xlink:href="#baustein" class="rot" x="150" y="50" width="100" height="100" />
    <use xlink:href="#baustein" class="blau" x="150" y="150" width="100" height="100" />
    <use xlink:href="#baustein" class="rot" x="150" y="250" width="100" height="100" />
    <use xlink:href="#baustein" class="blau" x="250" y="50" width="100" height="100" />
    <use xlink:href="#baustein" class="rot" x="250" y="150" width="100" height="100" />
    <use xlink:href="#baustein" class="blau" x="250" y="250" width="100" height="100" />
    <use xlink:href="#baustein" class="rot" x="350" y="50" width="100" height="100" />
    <use xlink:href="#baustein" class="blau" x="350" y="150" width="100" height="100" />
    <use xlink:href="#baustein" class="rot" x="350" y="250" width="100" height="100" />
</svg>

Übrigens: Ab SVG 2 können Sie mit CSS sogar die Attributwerte für die Positionierung und Größenangabe setzen. Dies wird jedoch von kaum einem Browser unterstützt.

Möchten Sie die CSS-Anweisungen in einem separaten Dokument notieren, dann können Sie die CSS-Datei über den XML-Verarbeitungshinweis stylesheet einbinden. Als Attribute benötigen Sie href und type.

<?xml-stylesheet href="stylesheet.css" type="text/css" ?>