scale-a-vector.de - zur homepage




 
Definition   Beispiel   Software   Foren/Newsgroups/Mailinglisten   
Kontakt / Gästebuch
 






   
Tutorials   Umfrage   Links   Literatur   Presse   News   Termine   


 
 
   
    Tutorials
 
    Farbverläufe
    SVG + PHP
    Sound
English version       
 
Es werden, wenn ich Zeit habe, noch mehr Tutorials folgen.



    SVG vs. HTML
    Ein Vergleich


    Bilder einbinden
    und konvertieren


    SVG-Dateien
    Übersicht


 

 
Farbve
 



 
rläufe
 

    Ich gehe mal davon aus, daß Ihnen das Grundgerüst einer SVG-Datei schon bekannt ist. Falls doch nicht, lassen Sie sich den Quellcode der hier aufgeführten, eingebetteten Dateien anzeigen. Der auf dieser Seite dargestellte sichtbare Code bezieht sich nur auf die für Farbverläufe nötigen Elemente.
     
    Beginnen wir mit einem einfachen Beispiel:
     
    zwei Farben
    horizontaler Verlauf

    Zunächst wird der Farbverlauf <linearGradient> innerhalb des Definitions-Tags <defs> definiert:
     
    <defs>
     <linearGradient id="verl-hor" x1="0%" y1="0%" x2="100%" y2="0%"
      spreadMethod="pad">
       <stop offset="0%" style="stop-color:lightyellow" />
       <stop offset="100%" style="stop-color:#b6cde3" />
     </linearGradient>
    </defs>
     
    Da der Verlauf horizontal ist, werden die Einstellungen an der x-Koordinate des Verlaufs vorgenommen: x1 wird auf 0% gestellt und x2 auf 100%.
    Die Y-Werte stehen beide auf 0%. Ginge der Verlauf von oben nach unten, müßte die zweite Y-Koordinate den Wert 100% bekommen.
     
    Die Farben in diesem Rechteck könnten jedoch auch diagonal verlaufen, also so:
     
    Hier stehen die ersten beiden X- und Y-Koordinaten auf 0% und die zweiten X- und Y-Koordinaten auf 100%:
    x1="0%" y1="0%" x2="100%" y2="100%

     
    stop-color
     
    In diesem Beispiel sind zwei Farben im Spiel: hellgelb (lightyellow) und hellblau (#b6cde3). Im ersten Beispiel ganz oben geht der Verlauf durch das gesamte Rechteck, also von 0 bis 100%. So wird also für das Gelb das offset bei 0% und für das Blau das offset bei 100% angesetzt:
     
    <stop offset="0%" style="stop-color:lightyellow" />
    <stop offset="100%" style="stop-color:#b6cde3" />

     
    Es geht jedoch auch anders:
     
    Hier liegt das offset für die Farbe Blau schon bei 40%,
    d.h. der Verlauf von Gelb zu Blau endet nach 40% der Strecke.


    <stop offset="0%" style="stop-color:lightyellow" />
    <stop offset="40%" style="stop-color:#b6cde3" />

     
     
    Übrigens können Sie einzelne Farben eines Verlaufs auch transparent gestalten:
     
    Hier ist das Blau (#b6cde3) transparent,
    also scheint das Wort 'Hallo' durch.


    <stop offset="40%" style="stop-color:#b6cde3;stop-opacity:0.6" />
     
     
    Füllung
     
    Nun wollen Sie Ihren bisher ja nur definierten Farbverlauf auch anwenden und irgendwo einsetzen. In diesem Fall füllte ich also ein Rechteck damit:
     
    <rect x="0" y="0" width="100" height="50" style="fill:url(#verl-hor);stroke:black;stroke-width:1" />
     
    Sie sehen, statt mit einer Farbe (fill:blue) füllen Sie die Form mit einem Verlauf: fill:url(#verl-hor).
    Hinter dem Gatter (#) steht die ID, die vorher dem Farbverlauf gegeben wurde.
     
    Sie könnten auch eine ganze Seite voller verschiedener Formen bauen und alle mit diesem einmal definierten Farbverlauf füllen.
     
    Auch Text kann mit einem Farbverlauf gefüllt werden. In diesem Beispiel verwende ich den selben Verlauf wie für das erste Rechteck oben:
     
    Text wird genau wie z.B. ein Rechteck gefüllt:
    <text x="5" y="44" fill="url(#verl-hor)"...>

     
    Schöne Buttons
     
    Nehmen wir uns aber nun eines schöneren Beispiels an, eines Buttons im MacOS 10 Aqua-Look:
     
    Diese Buttons sind doch richtig hübsch. Dazu trägt natürlich zusätzlich noch der Schatteneffekt bei, aber um den geht es im Augenblick nicht.
    Im Unterschied zu obigen einfachenen Beispielen sind hier jeweils drei Farben bzw. stop-colors im Spiel.

    Schauen wir uns zunächst den Code für den Farbverlauf in Button Nr. 3 an:
     
    <defs>
    <linearGradient id="verlaufblau2" x1="0%" y1="0%" x2="0%" y2="100%"
     spreadMethod="pad">
      <stop offset="0%" style="stop-color:#edf1ff" />
      <stop offset="50%" style="stop-color:#203aac" />
      <stop offset="100%" style="stop-color:#4993ea" />
    </linearGradient>
    </defs>

     
    Es handelt sich also um drei verschiedene Farben: Ein dunkles Blau für die Mitte, ein helleres für den unteren und ein noch sehr viel helleres für den oberen Teil.
     
    Für den Verlauf in Button Nr. 4 habe ich nur zwei verschiedene Farben gewählt, in der Mitte ein helles Grau und oben und unten jeweils weiß:
     
    <defs>
    <linearGradient id="verlaufweiss" x1="0%" y1="0%" x2="0%" y2="100%"
     spreadMethod="pad">
      <stop offset="0%" style="stop-color:white" />
      <stop offset="50%" style="stop-color:#cccccc" />
      <stop offset="100%" style="stop-color:white" />
    </linearGradient>
    </defs>
     
     
    spreadMethod
     
    Bisher wurde in allen Beispielen spreadMethod="pad" verwendet. Dies ist der Default-Wert. Sie können jedoch auch spreadMethod="reflect" anwenden, dann wiederholt sich der Farbverlauf, wobei die fließenden Übergänge beibehalten werden:
     
    So kann man z.B. einen Theatervorhang erstellen.

    Natürlich mußte ich noch etwas an beiden X-Koordinaten des Verlaufs herumspielen:
     
    <linearGradient id="IDvorhang" x1="50%" y1="0%" x2="60%" y2="0%"
     spreadMethod="reflect">
     <stop offset="0%" style="stop-color:red" />
     <stop offset="100%" style="stop-color:#444444" />
    </linearGradient>

     
    Es gibt noch eine dritte Möglichkeit, spreadMethod="repeat":
     
    Das selbe Beispiel wie oben, einzige Änderung: spreadMethod="repeat".
    Wenn Sie das Ganze vertikal anordneten, könnten Sie z.B. die Lamellen einer Fensterjalousie darin sehen.

     
    Radiale Farbverläufe
     
    Das erste Beispiel zeigt einen Farbverlauf, der genau in der Mitte eines Kreises beginnt:
    <defs>
    <radialGradient id="grad-circ">
     <stop offset="2%" stop-color="white" />
     <stop offset="90%" stop-color="#ff8080" />
    </radialGradient>
    </defs>


    Im zweiten Beispiel habe ich das Zentrum/den Beginn des Verlaufs verschoben, und zwar mit fx="40%" und fy="20%". Wenn ich beide Werte auf 50% gesetzt hätte, gleichte das Ergebnis dem ersten Beispiel. Man kann also - wie oben zu sehen - die Attribute fx und fy weglassen, wenn man den Farbverlauf zentriert haben will.
     
    <defs>
    <radialGradient id="grad-circ2" fx="40%" fy="20%">
     <stop offset="2%" stop-color="white" />
     <stop offset="40%" stop-color="#ffb0b0" />
     <stop offset="90%" stop-color="#ff8080" />
    </radialGradient>
    </defs>


    Weiterer Unterschied zum ersten Kreis ist die Benutzung einer dritten Farbe in der Mitte des Verlaufs. Durch diese Anwendung einer Zwischenfarbe zwischen der hellsten und der dunkelsten Farbe wurde der in diesem Fall gewünschte Spotlight-Effekt etwas deutlicher.
     
    Der Kreis wird dann mit dem definierten Farbverlauf gefüllt:
     
    <circle cx="42" cy="40" r="35" fill="url(#grad-circ2)" />
     
    Klar, natürlich können Sie auch in einem Kreis mit der spreadMethod spielen.
     
    Es gibt unzählige Möglichkeiten, herumzuspielen und kreativ zu sein. Dieser Artikel sollte Ihnen zunächst die Grundlagen vermitteln.

     
     
© 2001-2006 Petra Kukofka

eMail: kukofka@scale-a-vector.de