SelfSVG - SVG-Grafiken selbst erstellen

4.9CSS

4.9.1Was ist CSS?

Die Cascading Style Sheets stammen ebenfalls aus der Feder des World Wide Web Consortiums und wurden dafür entwickelt, strukturierte Dokumente, wie etwa (X)HTML oder eben SVG, mit einem Format zu versehen. Bei korrekter Anwendung läßt sich der Inhalt des Dokuments von seiner Darstellung komplett entkoppeln. Das ermöglicht z.B. einen Austausch bzw. eine Modifikation des Formats ohne die Struktur des Dokuments zu verändern. Die Spezifikation der momentan gültigen Version 2 können beim W3C [ W3C04a] eingesehen werden.

4.9.2Einbindung in SVG

CSS kann auf drei unterschiedliche Wege in SVG (und natürlich auch andere Beschreibungssprachen) eingebunden werden:

Eine CSS-Datei kann mittels einer speziellen Processing Instruction referenziert werden.
Die CSS-Anweisungen können direkt in die SVG-Grafik eingebunden werden.
Die CSS-Eigenschaften können in das jeweilige SVG-Element eingebettet werden (Inline-CSS-Code).

Listing 4-13 zeigt eine SVG-Grafik, die alle drei möglichen Arten der Einbindung beinhaltet.

<?xml version="1.0" standalone="no"?>

<!-- Referenzierung einer externen CSS-Datei -->
<?xml-stylesheet href="style.css" type="text/css"?>

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

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <!-- direkte Einbettung der CSS-Anweisungen -->
  <defs>
    <style type="text/css">
      <![CDATA[
      // Hier stehen die CSS-Anweisungen
      ]]>
    </style>
  </defs>

  <!-- Inline-CSS-Code im Attribut style -->
  <ellipse cx="110" cy="60" rx="100" ry="50" style="fill:blue;stroke:black;stroke-width:4" />
</svg>

Listing 4-13: Die verschiedenen Einbettungsmöglichkeiten von CSS in SVG-Dokumente

Es ist übrigens durchaus erlaubt, Inline-CSS-Code mit den beiden zentralen Formatdefinitionen zu kombinieren. Bei Konfliktfällen haben dann stets die "inneren" Formatdefinitionen Vorrang vor den "äußeren".

Auf eine ausführliche Auflistung aller CSS-Eigenschaften, welche in einem SVG-Dokument Gültigkeit besitzen, soll hier verzichtet werden. Für nähere Informationen sei auf die SVG-Spezifikation verwiesen.

Mehr zum Thema CSS findet man auch auf der sehr bekannten und hervorragenden Website SELFHTML [ Mün01] von Stefan Münz oder in seinem dazugehörigen "Web-Publishing Handbuch" [ SM01].

Stileigenschaften setzen

Texte und Schriften