Farbverläufe anwenden und einsetzen

(Auszug aus "Das Einsteigerseminar SVG — Webgrafiken mit XML" von Helma Spona)

An der vorherigen Abbildung (siehe Radiale Verläufe) lässt sich schon erkennen, welche Möglichkeiten Farbverläufe in der Gestaltung von Grafiken bieten. Wie Sie mit einfachen Mitteln eine Grafik interessanter gestalten können, soll ein kleines Beispiel demonstrieren. Als Basis soll dazu diese Grafik aus Einfache SVG-Grafiken erstellen dienen:

Grafik ist Ausgangspunkt für nachfolgenden Erläuterungen

Abbildung: Diese Grafik ist der Ausgangspunkt für die nachfolgenden Erläuterungen.

Der horizontalen Navigationsleiste einen linearen Verlauf hinzufügen

Für die graue, horizontale Navigationsleiste bietet sich ein linearer Verlauf an, der bei richtiger Einstellung für einen metallischen 3D-Effekt sorgt. Dazu sind nur wenige Änderungen am bestehenden Code notwendig. Zunächst müssen Sie einen <defs>-Tag einfügen und darin den Farbverlauf definieren. Der Verlauf sollte von Dunkelgrau nach Weiß verlaufen und für das Attribut spreadMethod den Wert reflect verwenden. Das stellt einen weichen Farbverlauf sicher, der die Leiste auch bei einer späteren Größenänderung noch ausfüllt. Den Verlauf sollten Sie mit "verlaufgrau" benennen und dann statt der bisherigen Füllfarbe im <rect>-Tag verwenden.

<?xml version="1.0" standalone="no"?>
...
<svg width="800" height="600">
  <defs>
    <linearGradient id="verlaufgrau" x1="50%" y1="30%" x2="50%" y2="60%" spreadMethod="reflect">
      <stop offset="0%" style="stop-color:darkgray;stop-opacity:1"/>
      <stop offset="50%" style="stop-color:lightgray;stop-opacity:1"/>
      <stop offset="100%" style="stop-color:white;stop-opacity:1"/>
    </linearGradient>
  </defs>
  <rect id="hnavigationsleiste" x="0" y="80" width="720" height="40" rx="10" ry="10" style="fill:url(#verlaufgrau);stroke:rgb(0,0,0);stroke-width:1"/>
</svg>

Das Ergebnis des Codes sieht dann wie folgt aus:

Ergebnis des definierten Verlaufs für horizontale Navigationsleiste

Abbildung: Das Ergebnis des definierten Verlaufs für die horizontale Navigationsleiste.

Hinweis:
Dem einmal definierten Verlauf können Sie auch den Text "SVG" zuweisen, indem Sie auch dessen Füllfarbe durch url(#verlaufgrau) ersetzen.

Den Kreis in der linken Ecke formatieren

Auch der Kreis in der linken Ecke sieht noch etwas langweilig aus. Aber auch das lässt sich mit einem Verlauf ändern. Später können auch Lichteffekte oder Schatten hinzugefügt werden.

Um den Kreis mit einem ähnlichen 3D-Effekt zu versehen wie die Navigationsleiste, müssen Sie einen radialen Verlauf definieren, der mit Weiß und einem hellen Grau beginnt und erst im äußeren Bereich dunkler wird. Wenn Sie vor dem Rand noch einen hellen Streifen einfügen, erhalten Sie den Verlauf in der folgenden Abbildung.

<radialGradient id="verlaufgraukreis" spreadMethod="reflect">
  <stop offset="0%" style="stop-color:white;stop-opacity:1"/>
  <stop offset="70%" style="stop-color:rgb(200,200,200);stop-opacity:1"/>
  <stop offset="92%" style="stop-color:rgb(200,200,200);stop-opacity:1"/>
  <stop offset="95%" style="stop-color:white;stop-opacity:1"/>
  <stop offset="97%" style="stop-color:rgb(180,180,180);stop-opacity:1"/>
  <stop offset="99%" style="stop-color:rgb(122,122,122);stop-opacity:1"/>
  <stop offset="100%" style="stop-color:darkgray;stop-opacity:1"/>
</radialGradient>

Erzeugter Verlauf für den Kreis

Abbildung: Erzeugter Verlauf für den Kreis.

   

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema SVG bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright © verlag moderne industrie GmbH 2001
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "Das Einsteigerseminar SVG — Webgrafiken mit XML" denselben Bestimmungen wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

verlag moderne industrie GmbH, Justus-von-Liebig-Straße 1, D-86899 Landsberg/Lech, fon ++49 (0) 81 91 / 125 – 0, leserservice(at)mi-verlag.de