Ein Seitenbanner gestalten

1. Wenn Sie ein Seitenbanner erstellen möchten, sollten Sie sich zunächst über die Größe klar werden. Aufgrund der Tatsache, dass neue Mozilla-Releases neuerdings Scrolleisten um die SVG-Grafiken anzeigen lassen, wenn die größer sind als der <object>-Tag Platz bietet. Diese Größe tragen Sie dann für die width- und height-Attribut des <svg>-Tags ein. Über das style-Attribut sollen Sie auch gleich die Hintergrundfarbe festlegen.

Listing

<?xml version="1.0" encoding="iso-8859-1"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/
svg10.dtd">

<svg xmlns="http://www.w3.org/2000/svg"
width="400px" height="55px" style="fill:black">

</svg>

2. Damit die Grafik eine einheitliche Hintergrundfarbe bekommen, zeichnen Sie als allererstes ein Rechteck, das die gesamte Fläche ausfüllt. Abhängig davon, wie der Browser bzw. das Plug-In die Linien rendert, da könnte ein Rechteck, das bei 0/0 (x/y) beginnt und 100% lang und breit ist, aber auch weiße oder hellere Ränder haben, die dann auf einem gleichfarbigen Hintergrund der HTML-Seite sichtbar sind. Daher bietet es sich an, das Rechteck von -1/-1 bis zu 2 Pixeln breiter und höher als die Zeichnungsfläche zeichnen zu lassen.

Listing

<svg xmlns="http://www.w3.org/2000/svg"
width="400px" height="55px" style="fill:black">

<rect x="-1px" y="-1px" width="402px"
height="57px"/>

</svg>

3. Nun können Sie die grafischen Elemente für das Seitenbanner einfügen. Das Beispielbanner soll drei sich überschneidende Ellipsen und Kreise enthalten, die unterschiedliche Farben und Transparenzen haben. Für jeden Kreis wird die gleiche Füll (fill)- und Rahmenfarbe (stroke) definiert. Damit die Füllung heller ist, wird gleichzeitig stroke-opacity auf 0.5 (=50%) gesetzt.

Hinweis: Die Transparenz muss normalerweise natürlich höher sein, wenn ein Farbe heller werden soll. Das gilt aber nur auf weißem Hintergrund. Da das Beispiel einen schwarzen Hintergrund hat, scheint dieser durch. Transparente Flächen erscheinen daher dunkler als weniger transparente Flächen.

Listing

<g>

<ellipse cx="50%" cy="0" rx="30px" ry="40px"
style="fill:#BED525;stroke:#BED525;stroke-opacity:0.5"/>

<ellipse cx="60%" cy="30%" rx="40px" ry="60px"
style="fill:yellow;stroke:#D1E640;stroke-opacity:0.5;
fill-opacity:0.5"/>

<ellipse cx="70%" cy="50%" rx="20px" ry="20px"
style="fill:#E1C10F;stroke:#E1C10F;stroke-opacity:0.5;
fill-opacity:0.7"/>

</g>

Bild: Zwischenergebnis im Internet Explorer

Zwischenergebnis Schritt 2

4. Jetzt müssen Sie noch den Text für das Seitenbanner in der Grafik anordnen. Dazu fügen Sie unterhalb des letzten <ellipse>-Element einen <text>-Tag ein. Die CSS-Eigenschaft text-stretch sorgt mit den Werten ultra-expanded (stark auseinandergezogen) und ultra-condensed (stark gestaucht) für die Breite der Buchstaben. Die Höhe wird durch die Einstellung von font-size bestimmt.

Listing

<g>

...

</g>

<text x="388px" y="38px" style="font-family:Arial,Verdana,
Helvetica, sansserif; font-size:42px;font-weight:bold;font-
stretch:ultra-expanded;fill:white;opacity:0.8;
text-anchor:end">SVG-FAQ</text>

<text x="388px" y="50px" style="font-family:Arial,Verdana,
Helvetica, sansserif; font-size:20px;font-weight:bold;font-
stretch:ultra-condensed;fill:yellow;opacity:0.7;
text-anchor:end">WWW.S-V-G.NET</text>

Hinweis: Die Unterschiede in der Darstellung ergibt sich, weil Mozilla die CSS-Eigenschaft font-stetch noch nicht unterstützt.

Bild: Zwischenstand im Internet Explorer und Mozilla

Zwischenergebnis Schritt 3- Mozilla

Zwischenergebnis Schritt 3 - IE

5. Das Seitenbanner sieht zwar akzeptabel aus, schöner wäre es aber noch, wenn Sie den Text "SVG-FAQ" mit einem kleinen Effekt versehen würden, bspw. indem Sie ihn leicht unscharf darstellen. Dazu müssen Sie unterhalb des <svg>-Tags ein <defs>-Element einfügen. Dieses Element definiert nicht sichtbare Elemente der SVG-Datei, wie bspw. Filter. Innerhalb des <defs>-Elements erstellen Sie ein <filter>-Element wie im folgenden Listing. das darin enthaltene Element <feGaussianBlur> verwischt das Element, auf das es angewendet wird. Wie stark der Effekt ist, können Sie über das Attribut stdDeviation festlegen. Der erste Wert bestimmt die horizontale, der zweite die vertikale Unschärfe.

Listing

<svg xmlns="http://www.w3.org/2000/svg"
width="400px" height="55px" style="fill:black">

<defs>

<filter id="verschwommen" filterUnits=
"objectBoundingBox" x="-10%" y="-10%"
width="150%" height="150%">

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

</filter>

</defs>
...

Damit der Filter auch verwendet wird, müssen Sie ihn nun noch anwenden. Dazu fügen Sie in das style-Attribut des Elements, auf das Sie den Filter anwenden möchten die filter-Eigenschaft ein.

Listing

<text x="388px" y="38px" style=
"filter:url(#verschwommen);
font-family:Arial,Verdana, Helvetica, sansserif;
font-size:42px;...">SVG-FAQ</text>

Bild: Das Ergebnis im Internet Explorer

Ergebnis Schritt 4 - IE

In Mozilla wird die Grafik weiterhin, wie oben angezeigt, da Filter noch nicht dargestellt werden.

Bild: So könnte das Banner aussehen, wenn Sie den gleichen Filter auch auf die Gruppe mit den Ellipsen anwenden.

Ergebnis Schritt 4 Alternativ

(c) 2003, Helma Spona, Dorfstr. 120c. 47647 Kerken-Stenden