Dark Glow Visuals

Veröffentlicht am Donnerstag, 31. Juli 2008, von Alphane Moon

I love things that glow in the dark. This little tutorial will guide you through the creation of a simple glow effect for Scalable Vector Graphics (SVG). Fire up your favourite source code editor and use <feGaussianBlur> to create some nice flourescent visuals :)

Für Dinge, die im Dunkeln leuchten, kann ich mich immer begeistern: Nebel im Weltraum, psychedelische Visuals, die grüne Fee oder Glühwürmchen :)
Dieses kleine Tutorial beschreibt einen einfachen Glow-Effekt für SVG-Grafiken. Dabei wird das Element <feGaussianBlur> eingesetzt, um die Grafik zum Leuchten zu bringen.

A note on browser support: The effect works in Opera 9.51 and Firefox 3, Safari for Windows displays the vector graphics without the glow and Internet Explorer does not show any vector graphics on this page — this is cutting edge technology :)

Getting Started

You will need an SVG object to begin with. Almost anything will do, but the glow effect works best on a very dark or black background. A white background might also look good, but here we want to create a glow in the dark. You can start with some of the basic SVG shapes like <circle> and <rect> or the <text> element for glowing text.

I have created a very basic example as a starting point, the source code is listed below. You can download the example file and modify it in a text editor. Save the file as UTF-8 after editing.

Für die ersten Experimente auf dem Gebiet der Leuchtkunst habe ich eine Beispiel-Datei zum Herunterladen geschrieben, der Quelltext ist unten aufgelisted. Die Datei sollte nach dem Editieren immer in UTF-8 kodiert gespeichert werden. Der Leuchteffekt funktioniert am besten auf einem dunklen oder schwarzen Hintergund.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="400" height="400"
xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink">


<defs>
  <filter id="theBlur"
        filterUnits="userSpaceOnUse"
        x="0" y="0" width="400" height="400">
    <feGaussianBlur in="SourceGraphic" stdDeviation="25" />
  </filter>

  <g id="myObject">
   <!-- SVG Code for the glowing object goes here -->
   <circle r="30" cx="200" cy="200" style="fill:#0FF;" />
  </g>
</defs>
	
<rect x="0" y="0" width="400" height="400" style="fill:#000;" />
	
<g id="blurred">
  <use xlink:href="#myObject" filter="url(#theBlur)" />
  <use xlink:href="#myObject" />
</g>

</svg>

Anatomy of the Example

The <defs> section contains two things:

In the example the group contains just a simple <circle>, feel free to experiment with different shapes and colours. The <filter> element contains the <feGaussianBlur> used to create the glow effect, this is the interesting part.

The <rect> provides a black background, nothing exciting here.

Finally, we draw two instances of the <circle> using <use>: The first with the <filter> applied, then the second without. You can apply a <filter> to an object by specifying a filter attribute for the <use> element:

<use xlink:href="#myObject" filter="url(#theBlur)" />
<use xlink:href="#myObject" />

Im Beispiel passiert Folgendes: Unter den <defs>-Definitionen werden ein <filter> und eine <g>-Gruppe abgelegt. Die Gruppe enthält das Grafikobjekt, auf welches das Filter angewendet werden kann. Das <filter>-Element enthält ein <feGaussianBlur>, das ist der interessante Teil der Geschichte. Wir schauen uns das gleich noch etwas genauer an.

Der Kreis wird zweimal gezeichnet: Zuerst mit Anwendung des Filters, danach noch einmal ohne Filtereinsatz. Das <filter> wird dabei durch das Attribut filter des <use>-Elements auf den Kreis angewendet.

Exploring the <feGaussianBlur> Element

The <filter> element contains the filter primitives, they perform the desired operations. <feGaussianBlur> is one of them. Filter primitives have one or more inputs and one output. The inputs, specified in the in attribute of a primitive, can be:

In the glow effect SourceGraphic is used as the input:

<feGaussianBlur in="SourceGraphic" stdDeviation="25" />

Das <filter>-Element enthält die sogenannten filter primitives, welche die gewünschten Filteroperationen durchführen. Ein filter primitive besitzt ein oder mehrere Input-Kanäle und genau einen Ausgabe-Kanal. Was in das Filter geschickt werden soll, wird in dem Attribut in angegeben. Es gibt die folgenden Möglichkeiten:

Der Glow-Effekt verwendet SourceGraphic als Input für <feGaussianBlur>.

The value of stdDeviation can be either one or two numbers. If you provide only one number, then that number represents the standard deviation value along both the x-axis and the y-axis. If two numbers are given, the first represents a standard deviation value along the x-axis and the second value represents a standard deviation value along the y-axis. Setting higher values for stdDeviation results in a stronger glow.

Das Attribut stdDeviation kann ein oder zwei Werte enthalten. Wenn nur ein Wert angegeben wird, gilt dieser gleichzeitig für die x-Achse und die y-Achse. Wenn zwei Werte angegeben werden, repräsentiert der erste die Startdardabweichung in Richtung der x-Achse, der zweite die für die y-Achse. Höhere Werte für stdDeviation ergeben ein stärkeres Leuchten.

Adjusting the Bounding Box

The <filter> element can take x, y, width and height attributes. They define the dimension and position of the canvas to which the filter applies. Adjusting these value allows the filter effect to be applied to an area larger than the objects original bounding box. The coordinate system for these attributes depends on the value for attribute filterUnits, which can be userSpaceOnUse or objectBoundingBox.

For example, if you create glowing or blurred text, the blur might extend beyond the boundaries of the rectangle that would contain the text. Without adjustments the blur would be clipped. You can specify higher negative percentages for x and y and increase the percentage values for width and height to avoid clipping. Default values are -10% for x and y and 120% for width and height.

Hi there!

Das <filter>-Element besitzt die Attribute x, y, width und height. Sie geben die Abmessungen und die Position des Bereichs an, auf den der Filter-Effekt angewendet wird. Das Koordinatensystem, auf das sich diese Werte beziehen, wird durch das Attibut filterUnits festgelegt, entweder durch userSpaceOnUse oder objectBoundingBox.

<filter id="theBlur"
  filterUnits="userSpaceOnUse"
  x="-20%" y="-20%"
  width="140%" height="140%">

Wenn der Glow-Effekt die Grenzen des Objekts, auf das der Effekt angewendet wird, verläßt, wird er außerhalb dieser Grenzen nicht mehr angezeigt (Clipping). Das Problem sieht man an den beiden Kreisscheiben im Bild. Durch Anpassung der Attribute kann man die Grenzen für das Filter ausdehnen. Die Standardwerte sind -10% für x und y und 120% für width und height. Wenn man diese Werte erhöht, kann man das Clipping vermeiden.

Conclusion

I hope you enjoyed this little tutorial on dark glow visuals. Working with filters in SVG is a bit like Voodoo and there are alternative ways to achieve glow effects, for example by using the <feColorMatrix> filter primitive. If you like, you can share your own glowing graphics in the comments. Just enter the SVG code, I will try to embed it inline into the XHTML of this page.

Ich hoffe, dass dir dieses Tutorial gefallen hat. Die Anwendung von Filtern in SVG ist ziemliches Voodoo und es gibt auch noch andere Möglichkeiten, mit denen man Leuchteffekte erzeugen kann, zum Beispiel mit <feColorMatrix>. Wenn du möchtest, kannst du eigene Leucht-Vektorgrafiken in einem Kommentar posten. Ich werde dann versuchen sie inline in diese Webseite einzubauen.

Kommentare

GreenSmileys.

#1 Michael hat geschrieben:

Am 5. August 2008 um 22:22

Ich mag auch leuchten im Dunklen, aber, was mich eigentlich interessiert, wie navigiert man in deinem Blog zu den älteren Beiträgen?

Die grüne Fee.

#2 Alphane Moon hat geschrieben:

Am 5. August 2008 um 23:59

Hallo Michael,
die älteren Beiträge sind bisher nur über die Monats-Archivseiten und die Kategorien zu finden. Zumindest im Monatsarchiv sind alle Beiträge vorhanden. Es ist hier alles noch etwas experimentell.
Deine grünen Smileys gefallen mir sehr gut, Grün ist so eine schöne Farbe :)

Kommentar abgeben