Lichteffekte nutzen

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

Noch interessanter als Schatten sind die Lichteffekte, die SVG zu bieten hat. Dazu können Sie Lichtquellen und Lichtfarben definieren und die Lichtquellen mit verschiedenen Attributen konfigurieren. Das folgende Beispiel zeigt, wie Sie die Datei Navbanner.svg um einen interessanten Lichteffekt erweitern können. Am Ende sieht die Grafik dann wie folgt aus:

Grafik mit verschiedenen Lichteffekten

Abbildung: Grafik mit verschiedenen Lichteffekten.

Bevor die Grafik so aussieht, müssen jedoch die Lichter erst einmal erstellt und positioniert werden. Zunächst folgen Erläuterungen zu den Lichteffekten im horizontalen Seitenbanner. Hier wurden drei Lichtquellen verwendet: zwei Spotlichter und eine diffuse Lichtquelle. Die beiden Spotlichter werden in der folgenden Abbildung durch die grauen Kreise gekennzeichnet.

Im horizontalen Seitenbanner positionierte Spotlichter

Abbildung: Im horizontalen Seitenbanner positionierte Spotlichter.

Für jede Lichtquelle müssen Sie innerhalb des <filter>-Tags ein Filter-Element verwenden, das einen Lichteffekt produziert. Im Beispiel wird ausschließlich der Tag <feSpecularLighting> verwendet. Innerhalb dieses Tags definieren Sie die Lichtquelle. Das Beispiel verwendet dazu die Tags <feSpotLight> und <feDistantLight>.

Hinweis:
SVG unterstützt sowohl für Lichtquellen als auch für Lichteffekte weitere Tags, die unter Filter und Lichteffekte effektiv einsetzen und kombinieren im Detail erläutert werden.

Mit dem Tag <feSpotLight> wird ein Spot definiert, mit <feDistantLight> eine entfernte, diffuse Lichtquelle. Da die Attribute der einzelnen Filter und Lichtquellen in Kürze im Detail erläutert werden, sollen an dieser Stelle nur die wesentlichen Bestandteile berücksichtigt werden.

Wichtig ist, dass Sie über das Attribut in des Filters die Eingangsdaten des Filters bestimmen. Im Beispiel wird nur "SourceGraphic" verwendet. Außerdem müssen Sie die im Listing angegebenen Attribute nennen. Deren Werte bestimmen das Aussehen des Effektes. Mit dem Attribut result legen Sie wieder den Ergebnisnamen fest. Innerhalb des Tags definieren Sie dann die Lichtquelle. Im ersten Lichteffekt des Listings wird dazu eine diffuse Lichtquelle mit <feDistantLight> erstellt. Sie sorgt für eine gleichmäßige Beleuchtung des Objekts.

Hinweis:
Wenn Sie diesen Effekt als einzigen einsetzen, bringt er nicht viel, da die Beleuchtung das Objekt gleichmäßig ausleuchtet und damit im Prinzip nur die Farbe aufhellt. Er lässt sich jedoch sinnvoll mit anderen Filtern einsetzen. Beispiele dazu folgen noch.

Im Anschluss werden noch die beiden Lichteffekte mit den Spots als Lichtquellen definiert. Die Position des Spots legen Sie dabei über die Attribute x und y des <feSpotLight>-Tags fest. Die Höhe der Lichtquelle definieren Sie mit dem Attribut z. Im Unterschied zu den Schatteneffekten können Sie Lichteffekte nicht einfach mit dem <feMerge>-Tag kombinieren. Es gibt aber auch dafür eine Lösung. Dazu stellt SVG den Filter <feComposite> zur Verfügung. Damit können Sie zuerst das erste Filterergebnis mit dem Ursprungsbild und danach dessen Ergebnisse mit dem zweiten Lichteffekt verschmelzen.

<filter id="lichteffekt">
  <feSpecularLighting in="SourceGraphic" surfaceScale="1" specularConstant="2.9" specularExponent="10" result="Licht">
    <feDistantLight azimuth="1" elevation="285"/>
  </feSpecularLighting>
  <feSpecularLighting in="SourceGraphic" surfaceScale="5" specularConstant="0.5" specularExponent="2" result="Licht3">
    <feSpotLight x="193" y="30" z="90" pointsAtX="600" pointsAtY="50" pointsAtZ="5" LimitingConeAngle="100" />
  </feSpecularLighting>
  <feComposite in="SourceGraphic" in2="Licht" operator="arithmetic" k1="1" k2="1" k3="1" k4="0" result="Kombo" />
  <feSpecularLighting in="SourceGraphic" surfaceScale="5" specularConstant="0.9" specularExponent="20" result="Licht2">
    <feSpotLight  x="795" y="20" z="40" pointsAtX="300" pointsAtY="50" pointsAtZ="10"/>
  </feSpecularLighting>
  <feComposite in="Licht2" in2="Kombo" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="Kombo2"/>
  <feComposite in="Licht3" in2="Kombo2" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="Kombo2"/>
</filter>

Den so definierten Filter können Sie wieder über die filter-Eigenschaft dem Rechteck zuweisen. Ähnlich, aber nicht ganz so komplex sieht der Filter für die linke Navigationsleiste aus. Hier werden aber nur ein Spot und eine diffuse Lichtquelle verwendet.

<filter id="lichteffekt2">
  <feSpecularLighting in="SourceGraphic" surfaceScale="1" specularConstant="2.9" specularExponent="10" result="Licht">
    <feDistantLight azimuth="5" elevation="195"/>
  </feSpecularLighting>
  <feSpecularLighting in="SourceGraphic" surfaceScale="5" specularConstant="0.5" specularExponent="2" result="Licht3">
    <feSpotLight x="0" y="200" z="50" pointsAtX="200" pointsAtY="600" pointsAtZ="0" limitingConeAngle="100" />
  </feSpecularLighting>
  <feComposite in="SourceGraphic" in2="Licht" operator="arithmetic" k1="1" k2="1" k3="1" k4="0" result="Kombo" />
  <feComposite in="Licht3" in2="Kombo" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="Kombo2"/>
</filter>

   

<< 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