Bildoben  
aptico-Home | AGB-(c) | SVG-Tutorial Inhalt
Schatten

SVG Tutorial

  svg tutorial index  |  Kapitel 2

2.2 Rendern von SVG-Grafiken

Dieses Kapitel ist ein wenig der grundlegenden Theorie gewidmet.

SVG verwendet ein Painters-Modell beim Rendern.
Farbe (paint) wird in aufeinander folgenden Operationen am Ausgabegerät in der Weise aufgetragen, dass jede Operation einen Bereich des Ausgabegeräts übermalt. Wenn der Bereich einen bereits bemalten Bereich überlappt, überdeckt die neue Farbe die alte ganz oder teilweise.
Wenn die Farbe nicht hundertprozentig deckend ist (falls Sie z.B. mit Hilfe der Eigenschaft opacity eine Transparenz definiert haben), wird das Ergebnis auf dem Ausgabegerät durch die (mathematischen) Regeln für die Mischung definiert, die mit Einfaches Alpha Blending bezeichnet werden.

Elemente in einem SVG-Dokument haben eine implizite Reihenfolge, in der sie gemalt werden.

  1. Das erste Element in einem SVG-Dokumentfragment wird als erstes gemalt.
  2. Darauffolgende Elemente werden auf die Oberfläche der zuvor gemalten Elemente aufgetragen.

Gruppierende Elemente wie das g-Element, mit dessen Hilfe mehrere Elemente zu einer Gruppe vereinigt werden können (siehe Dokumentstruktur II), produzieren einen temporären eingenständigen Canvas (rechteckiger Hintergrund), der in transparentem Schwarz initialisiert wird. Auf diesen werden dann die Kind-Elemente gemalt.

Einzelne Grafikelemente werden so gerendert, als sei jedes Grafikelement seine eigene Gruppe; im Klartext bedeutet das, dass für jedes Grafikelement ein eigener temporärer Canvas gebildet wird.
Das Element wird zuerst auf den temporären Canvas gemalt. Dann werden alle Effekte angewendet (z.B. Transformationen oder Filter, etc.), die für das Grafikelement angegeben sind, um den veränderten temporären Canvas zu erzeugen. Der veränderte temporäre Canvas wird dann unter Berücksichtigung aller Einstellungen für Clipping, Masking und die Objektdeckfähigkeit des Elements in den Hintergrund des Gruppen-Canvas integriert.

Die 3 möglichen Grafikelementtypen:

  • Formen (Kombination aus geraden Linien und Kurven, d.h. Pfaden)
  • Text (Kombination aus Glyphen)
  • Rasterbilder (Werte-Array, der die Farbe und die Deckfähigkeit (Alpha) einer Reihe von Bildpunkten in einem rechteckigen Gitter angibt. Auch als Pixel- oder Bitmap- Grafiken bezeichnet.)

Für bestimmte Formtypen können weiterhin Markersymbole (Muster, die selbst aus einer Kombination aus Formen, Text und Bilder bestehen können, wie z.B. Pfeilspitzen) auf ausgewählte Scheitelpunkte gemalt werden.

Formen und Text können gefüllt: fill, dem Inneren der Form eine Farbe geben, oder gestrichen werden: stroke, eine Randlinienfarbe erzeugen.

Unterstützung von SVG für fill und stroke:

  • Feste Farben
  • Verläufe (linear und radial)
  • Muster (Pattern)

SVG erlaubt, die Maloperation auf einen begrenzten Bereich innerhalb des Ausgabegeräts mit Hilfe von Ausschneiden und Maskieren zu beschränken.




index  |  Kapitel 2  |  2.1  <<  | 2.2 |  >>  3   Dokumentstruktur I