SVG/ Grafiken formatieren

SVG:

Einführung: Eigenschaften und Präsentationsattribute

Während in den Kapiteln über Grundformen, Text als Graphik und Pfade vermittelt wurde, mit welchen Elementen und Attributen Objekte angegeben werden können, die dargestellt werden sollen, so geht es in diesem Kapitel darum anzugeben, wie sie dargestellt werden.

Allen graphisch dargestellten Objekten gemeinsam ist das Konzept, dass die von den angegebenen Pfaden aufgespannten Flächen gefüllt werden können und dass die Pfade selbst als Strich endlicher Breite dargestellt werden können. Da es auch offene Pfade gibt, ist der Pfad oder Strich nicht gleichbedeutend mit dem Rand der aufgespannten Fläche, dennoch wird der dargestellte Pfad oft einfach Rand genannt, Strich oder Weg ist eigentlich die präzisere Bezeichnung.

Füllung (englisch: fill) und der Strich oder Weg (englisch: stroke) haben entsprechend einige Eigenschaften, die angegeben werden können. Text als Graphik hat noch einige Eigenschaften, die spezifisch für diese Arten von Pfaden sind. Einige andere Konstruktionen haben auch noch spezielle Eigenschaften.

In den tiny-Profilen können die Eigenschaften nur als sogenannte Präsentationsattribute genauso wie normale Attribute angegeben werden, bei der Vollversion SVG1.1 sollte dies ebenfalls die bevorzugte Methode sein. Das Verhalten von Attributen und Präsentationsattributen ist aber leicht unterschiedlich, etwa können Eigenschaften von Elternelementen geerbt werden.

Die Begriffe 'Eigenschaft' und 'Präsentationsattribut' deuten schon an, dass Eigenschaften dem Konzept von Cascading Style Sheets [CSS] und XSL entstammen.
Entsprechend gibt es im vollen Profil von SVG 1.1 die Möglichkeit, diese Eigenschaften auch wirklich als Stilvorlagen anzugeben. Dies kann mit externen Stilvorlagen erfolgen, die mit Stilvorlagenverarbeitungsanweisungen eingebunden werden. Ebenfalls möglich sind auch Angaben im Element style, welches am besten ziemlich zu Beginn des Dokumentes innerhalb des Elementes defs auftreten sollte (aber auch in anderen Elementen wie svg oder g).

Ebenfalls im vollen Profil von SVG 1.1 definiert ist das Attribut style, welches bei nahezu jedem Element angegeben werden kann und welches ebenfalls Angaben zu Eigenschaften in der CSS-Notation enthalten kann. Wie auch bei (X)HTML ist allerdings die Verwendung dieses Attributes aus verschiedenen Gründen zu vermeiden. Zum einen können für das Profil tiny zugeschnittene Darstellungsprogramme den Inhalt nicht interpretieren. Bei anderen Darstellungsprogrammen kann es zum Abbruch der Interpretation von weiteren Eigenschaften kommen, wenn es bei der Interpretation einer Eigenschaft Probleme gibt. Zum anderen haben Angaben im Attribut style eine relativ hohe Spezifität, können also weder vom Autor noch vom Betrachter einfach mit eigenen Angaben überschrieben werden, ohne für jeden einzelnen Fall die Spezifität explizit geeignet hoch anzusetzen. Ein weiteres Problem kann bei der Animation von Präsentationsattributen auftreten, zumindest wenn Animation korrekt im Sinne von SMIL implementiert wurde. Leider gibt es immer noch einige Hilfsprogramme, welche das Attribut style intensiv nutzen. Autoren ist zu empfehlen, diesen Mangel dann manuell zu beheben, nachdem ein Dokument abgespeichert ist.

Insgesamt kann gesagt werden, dass alles in Form von Präsentationsattributen notiert werden sollte, was inhaltlich relevant ist, also dazu beiträgt, den Inhalt des Bildes zu vermitteln. Präsentationsattribute haben eine niedrige Spezifität und können daher leicht mit Angaben im Element style oder in einer externen Stilvorlage überschrieben werden, mit denen dann alternative Ansichten des Dokumentes angeboten werden können.

Eigenschaften zur Füllung

Füllung, fill


SVG
1.1	1.7	8	1.5	3.2	4	?	?	?

Bei den Beispielen im Kapitel Grundformen wurden von Pfaden aufgespannte Flächen ohne weitere Angaben immer schwarz gefüllt. Nun mag es sein, dass dies für gewisse Anwendungen sehr nützlich ist – hin und wieder sind jedoch auch andere Farben oder Füllungen wünschenswert. Daher kann mit der Eigenschaft fill angegeben werden, wie oder womit eine aufgespannte Fläche gefüllt werden soll.

Die möglichen Werte von fill sind sehr reichhaltig und hängen vom Profil ab.

Folgendes sind die Werte mit Erklärung:

'none': keine Füllung
'currentColor': Es wird der Farbwert von der Eigenschaft color übernommen
'inherit': Es wird der Wert vom Elternelement übernommen (geerbt)
Farbe: Ein Farbwert wie im Folgenden erläutert. Optional kann zusätzlich ein ICC-Farbprofil angegeben werden, wenn es sich nicht um ein tiny-Dokument handelt.
Maldienst: Die URI eines Maldienstes (Farbverlauf, Muster, feste Farbangabe; englisch: paint server), optional gefolgt von einer der anderen Möglichkeiten, falls der Maldienst nicht anwendbar ist. SVG tiny 1.1 hat keine Maldienste, SVG 1.1 zudem keine fest Farbangabe, SVG tiny 1.2 keine Muster. Wie der Maldienst exakt zu notieren ist, wird im entsprechenden Abschnitt erläutert.

Der Initialwert ist 'black' also schwarz und die Füllung wird vererbt. Ist also beim Elternelement ein Wert angegeben, nicht aber beim Kindelement, so gilt beim Kindelement die Angabe vom Elternelement, nicht 'black'.

Als Farbwert sind in den tiny-Profilen nur die numerischen Angaben zulässig und die sechzehn Farbwörter von (X)HTML: black, green, silver, lime, gray, olive, white, yellow, maroon, navy, red, blue, purple, teal, fuchsia, aqua. SVG tiny 1.2 und das volle Profil SVG 1.1 verfügen ferner über die Systemfarben wie von CSS2 definiert, SVG1.1 als Farbangabe, SVG tiny 1.2 als Maldienst, was in dem Falle auf die gleiche Angabe hinausläuft.

Farbwerte können also in dreierlei Form angegeben werden:

als RGB kodiert in der Form rgb(rrr,ggg,bbb) dabei sind rrr,ggg,bbb Farbangaben für die Kanäle rot, grün und blau, Werte jeweils von 0 bis 255. Beziehungsweise rgb(10%,50%,100%), also als Prozentangaben von 0% bis 100%
hexadezimal angegeben in der Form #000000 mit jeweils zwei Ziffern von 00 bis ff für wieder jeweils einen Farbkanal oder #000 mit jeweils einer Ziffer zwischen 0 und f für einen Farbkanal, wobei dann die Ziffer vom Darstellungsprogramm gedoppelt werden, um auf den Wert in der langen Darstellung zu kommen, #abc entspricht also #aabbcc.
mit dem Namen der Farbe (vgl. CSS), nicht in allen Profilen komplett verfügbar, daher sind andere als die oben genannten Farbwörter eher zu vermeiden.

fill ist animierbar, wobei kontinuierliche Animation nur möglich ist, wenn einem Wert eine numerische Farbangabe zugeordnet werden kann, was insbesondere nicht bei 'none' oder einem Maldienst wie einem Farbverlauf oder einem Muster zutrifft. Aufgrund der Komplexität der möglichen Werte liegen häufig Implementierungsmängel vor, wenn in einer Animation eine bunte Mischung von Farbangaben und nicht interpolierbaren Werten vorgegeben wird. Autoren ist dann dringend zu empfehlen, explizit anzugeben, dass eine diskrete Animation durchgeführt werden soll, statt sich darauf zu verlassen, dass das Darstellungsprogramm dies selbst herausbekommt, wie es laut Spezifikation vorgesehen ist, wenn der Autor keine Angaben macht.

Zur Verdeutlichung der Verwendung von fill mit Farbwerten ein kleines Beispiel:

   <rect x="0" y="0" width="80" height="10" rx="6" ry="10" fill="rgb(255,0,0)" />
   <rect x="0" y="0" width="13" height="60" rx="10" ry="7.5" fill="red"/>
   <circle cx="0" cy="0" r="20" fill="#C00000"/>

Beispiel: Vergleich fill und PNG-Farbe.
Die Füllfarbe von Pfaden wird verglichen mit der gleichen Farbe in eingebetteten PNGs. Die PNGs sind links oben über den Pfaden angeordnet - es handelt sich um Quadrate. Sofern ein Farbunterschied zwischen einem Quadrat und der darunterliegenden Form sichtbar wird, werden die Farbangaben im PNG und in der Eigenschaft fill der Pfade unterschiedlich interpretiert, was auf einen Implementierungsfehler hinweist.

Beispiel: Gerade Unterpfade und Flächen.
Gerade Pfadsegmente spannen allein keine Fläche auf. Auch mehrere Unterpfade, die nur aus geraden Pfadsegmenten bestehen, spannen keine Fläche auf, die zu füllen wäre.

Anders hingegen, wenn die geraden Pfadsegmente miteinander verbunden werden. Sofern das Resultat nicht wieder nur ein gerader Pfad ist, kann eine Fläche aufgespannt werden, die gefüllt werden kann.

Im konkreten Beispiel gibt es zwei Pfade. Der außenliegende besteht aus vier geraden Unterpfaden, die ein Quadrat aufzuspannen scheinen. Da die Unterpfade aber selbst keine Flächen aufspannen, ergibt sich auch keine Füllung, die ansonsten rot wäre.

Beim inneren Pfad sind einige gerade Pfadsegmente zu einem Pfad verbunden. Dieser Pfad ergibt einige füllbare Flächen, die hier mit einer gelben Füllung versehen sind. Zwei weitere gerade, unverbundene Unterpfade, die ein mittiges Kreuz bilden, spannen keine neuen Flächen auf und ändern nichts an der Füllung.

Beispiel: Offene Unterpfade und Füllung.
Zur Füllung werden offene Unterpfade immer so geschlossen, also ob der Endpunkt mit dem Anfangspunkt verbunden wäre.

Ein Pfad mit mehreren gekrümmten Unterpfaden kann auch füllbare Flächen aufspannen, die sich gegenseitig überlagern können, so dass sich ein interessanter Wechsel von Innen und Außen ergeben kann.

Der hier blau dargestellte Pfad besteht aus mehreren offenen Unterpfaden, die sich gegenseitig überschneiden und so ein etwas komplizierteres Muster von Innen (orange) und Außen (gelb-weiß) produzieren.

Füllregel, fill-rule


SVG
1.1	1.7	8	1.5	3.2	4	?	?	ja

Beispiel Klothoide - nicht geschlossener Pfad und *fill-rule*

SVG hat also ein Konzept von Innen und Außen für Formen.

Überschneidet sich ein Pfad selbst, ist die Interpretation von Innen und Außen nicht mehr eindeutig. Mit der Eigenschaft fill-rule kann das Verhalten festgelegt werden.

Mögliche Werte sind 'nonzero', 'evenodd' und 'inherit'. Der Initialwert ist 'nonzero', die Eigenschaft wird vererbt und ist ferner animierbar.

Umschließt zum Beispiel ein Unterpfad alle anderen und ist die Umlaufrichtung gegensinnig, entsteht durch einen inneren Pfad ein Loch. Ist die Umlaufrichtung gleichsinnig, passiert dies nur mit fill-rule="evenodd".
Im anderen Falle für fill-rule="nonzero". kann es also passieren, dass bei gleichsinnigen Umflaufrichtungen sich überschneidender oder ineinanderliegender Unterpfade der Strich auch innerhalb der Fläche auftritt, was bei fill-rule="evenodd" nicht passieren wird, wenn alle Unterpfade Flächen aufspannen. Da ist der Strich immer am Rand zwischen Innen und Außen. Bei "evenodd" wechseln sich Innen und Außen bei jedem Rand ab.

Beispiele zur Eigenschaft fill-rule
In dem interaktiven Beispiel kann die Füllregel für jede Form gewechselt werden. Sollte das aktuell verwendete Darstellungsprogramm hinsichtlich Animation noch eine Implementierungslücke haben, sind jeweils zwei Formen mit evenodd und zwei mit nonzero als Startwert angegeben.

Bei einer nicht geschlossenen Form ist nicht immer ganz intuitiv einzusehen, was innen und außen ist.
Beispiel Klothoide - nicht geschlossener Pfad und fill-rule
Anfang und Ende des Pfades werden miteinander verbunden, dann wird anhand von fill-rule bestimmt, was innen und was außen ist. In diesem Fall ist außen violett und innen gelb. Der eigentliche Pfad ist rot und teiltransparent.

Die präzise Bestimmung des Verhaltens für fill-rule:

Bei offenen Pfadsegmenten werden diese für die Zählung mit einer geraden Verbindung vom Ende zum Anfang geschlossen.
Für jeden Punkt wird bestimmt, ob er innen oder außen liegt, indem ein Strahl betrachtet wird, der im Unendlichen beginnt und am betrachteten Punkt endet.
Um Komplikationen zu vermeiden, ist dabei der Strahl jeweils so zu wählen, dass er keine Tangente zu einem Pfadsegment darstellt, also immer eindeutig eine Kreuzung vorliegt, nicht nur ein Tangieren.

'nonzero':
Es werden die Schnittpunkte des Strahles mit dem Pfad gezählt, angefangen mit null im Unendlichen. Jedes Mal wenn ein Pfadsegment von links nach rechts den Strahl kreuzt, wird der Zähler um eins erhöht. Wenn ein Pfadsegment von rechts nach links den Strahl kreuzt, wird der Zähler um eins erniedrigt. Ist das Endergebnis null, ist der Punkt außerhalb, sonst innerhalb.

'evenodd':
Es wird die Anzahl der Kreuzungen des Strahles mit Pfadsegmenten gezählt. Ist die Zahl der Kreuzungen ungerade, liegt der Punkt innerhalb, sonst außerhalb.

Füll-Opazität, fill-opacity


SVG
1.1	1.7	8	1.5	3.2	4	?	?	ja

Graphische Objekte können auch teilweise durchsichtig gefüllt sein, dazu dient die Eigenschaft fill-opacity mit Werten zwischen 0 und 1. 0 steht für ganz durchsichtig.
Andere Werte außerhalb des Intervalls [0;1] werden zum nächstgelegenen zulässigen Wert gerundet.

Der Initialwert ist 1, also undurchsichtig, die Eigenschaft wird vererbt und ist animierbar.

fill-opacity ist in SVG tiny 1.1 nicht verfügbar.

Die resultierende Farbe von mehreren teildurchsichtigen Elementen kann recht einfach aus den jeweils angegebenen Werten für fill-opacity berechnet werden. Ist u die unterliegende Farbe und a die aktuelle Farbe des darüberliegenden Elementes, und t dessen Wert von fill-opacity, so ist die neue Farbe n = (1-t)u + ta.

Beispiel zur Eigenschaft fill-opacity
Zwei Scharen von Ellipsen, gedreht, mit variierter Füll-Opazität.

Test zur Eigenschaft fill-opacity
fill-opacity wird getestet, indem mehrere Formen übereinandergelegt werden, von denen einige teiltransparent sind. Diese Stapel werden mit einer teils offenen Form mit weißem Strich in ihrer Mitte verglichen, welche die gleiche Farbe hat wie die resultierende des Stapels.

Eigenschaften zum Strich oder Weg

Der Strich, die Darstellung eines Pfades, erfolgt mittig zum Pfad, gegebenenfalls also zur Hälfte auf der Füllung, zur anderen Hälfe außerhalb des Objektes.
SVG1.1 und SVG tiny 1.2 sehen keine direkten Möglichkeiten vor, um die Position des Striches relativ zum Pfad zu verschieben, ihn etwa nur innerhalb oder außerhalb der Füllung darzustellen. Dies ist für die Vollversion von SVG 2 in Vorbereitung, kann derzeit allenfalls mit einigen Tricks auf Umwegen erreicht werden.

Strichfüllung, stroke


SVG
1.1	1.7	8	1.5	3.2	4	?	?	?

Zwei Scharen von Kurven werden mit unterschiedlichen Strichfarben gemalt

Neben der Farbangabe für die Füllung kann auch angegeben werden, ob und wie der Strich oder Weg gemalt, beziehungsweise gefüllt werden soll. Dazu dient die Eigenschaft stroke.

Die möglichen Werte sind die gleichen wie für fill.

Weil allerdings der Initialwert 'none' ist, wird der Strich ohne explizite Angabe nicht dargestellt.
Die Eigenschaft wird vererbt und ist animierbar - mit der gleichen Problematik, wie bereits für fill erläutert.

Beispiel: Zwei Scharen von Kurven werden mit unterschiedlichen Strichfarben gemalt

Strichstärken, stroke-width


SVG
1.1	1.7	8	1.5	3.2	4	?	?	?

Auch die Strichstärke kann angegeben werden - sozusagen die Pinselstärke, mit der ein Pfad gezeichnet wird. Dazu dient die Eigenschaft stroke-width.
In SVG 1.1 und tiny 1.2 ist die Strichstärke für einen Pfad immer gleich. Für die Vollversion 2 gibt es Planungen und Ideen, die Strichstärke über den Verlauf des Pfades zu ändern. In SVG 1.1 kann dies nur indirekt erreicht werden, indem aus den Rändern eines solchen Striches selbst (gefüllte) Pfade erzeugt werden.

Mögliche Werte von stroke-width sind Längen und 'inherit' (vererbt).
Der Initialwert ist 1, die Eigenschaft wird vererbt und ist animierbar.

In folgendem Beispiel hat das obere Rechteck mit einem orangefarbenen Strich (oder in dem Falle auch Rand oder Rahmen, weil ein Rechteck geschlossen ist) der Strichstärke 15. Das untere Rechteck ist mit einem olivfarbenen Rahmen versehen mit der Strichstärke 30. Der Kreis mit goldenem Rand hat schließlich eine Strichstärke von 19.5. Da spezielle Farbwörter verwendet wurden, handelt es sich um ein Dokument in der Vollversion von SVG 1.1.

   <rect x="0" y="0" width="800" height="100" rx="60" ry="100" 
         fill="rgb(73,10,61)" stroke="DarkOrange" stroke-width="15"/>
   <rect x="0" y="0" width="103" height="600" rx="100" ry="75" 
         fill="#490A3D" stroke="Olive" stroke-width="30"/>
   <circle cx="0" cy="0" r="200" 
         fill="MediumVioletRed" stroke="Gold" stroke-width="19.5"/>

Weitere Beispiele:

Eine Schar von Kurven mit abgerundeten Enden wird mit unterschiedlichen Strichfarben gemalt..
Durch gleichzeitige Verkürzung der Kurve und Änderung der Farbe entsteht ein stufiger Farbverlauf, der nicht so einfach mit Farbverläufen in SVG zu erreichen ist.

Kreise und große Strichstärke.
Solange die Objekte viel größer sind als die Strichstärke, stellt die Darstellung kein praktisches Problem dar.

Überdeckt der Strich mehr als den halben Durchmesser eine Objektes, so kommt es zu einer nicht lokalen Überschneidung der Striche. Dies bedeutet, dass in dem Bereich nichts mehr von der Füllung übrigbleibt.

Einige Darstellungsprogramme haben damit verschiedene Probleme.

Hier werden einige Kreise mit solch breiten Strichstärken entlang einer logarithmischen Spirale angeordnet. Die Kreise haben eine grüne Füllung einen blauen Strich. Werden dahinter angeordnete rote Kreise sichtbar, ist die Implementierung fehlerhaft, ebenso, wenn etwas vom gelben Hintergrund innerhalb eines Kreises sichtbar wird oder die Kreise gar nicht als Kreise erscheinen.

Strich-Opazität, stroke-opacity


SVG
1.1	1.7	8	1.5	3.2	4	?	?	?

Beispiel zur Verwendung von *stroke-opacity*

Pfade können auch teilweise durchsichtig gemalt sein, dazu dient die Eigenschaft stroke-opacity mit Werten zwischen 0 und 1. 0 steht für ganz durchsichtig. Andere Werte außerhalb des Intervalls [0;1] werden zum nächstgelegenen zulässigen Wert gerundet.

Der Initialwert ist 1, also undurchsichtig, die Eigenschaft wird vererbt und ist animierbar.

stroke-opacity ist in SVG tiny 1.1 nicht verfügbar.

Beispiel zur Verwendung von stroke-opacity.
Zwei Pfade mit vierzähliger Drehsymmetrie und Spiegelsymmetrie werden referenziert und jeweils einmal gefüllt und dann mehrmals ohne Füllung, aber mit teiltransparentem Strich mit schmaler werdender Linienbreite übereinandergelegt. So entsteht der Eindruck eines Farbverlaufes senkrecht zu Strich. (Man beachte auch, dass die Eigenschaft stroke-opacity selbst nur einmal im Element svg angegeben ist und von dort aus vererbt wird.)

Strichenden, stroke-linecap


SVG
1.1	1.7	8	1.5	3.2	4	?	?	?

Beispiel zur Verwendung von stroke-linecap

Mit der Eigenschaft stroke-linecap wird festgelegt, wie die Strich- oder Pfadenden von offenen Pfaden oder Unterpfaden darzustellen sind.

Mögliche Werte sind:

inherit: geerbt
round: Halbkreis als Kappe
square: halbes Quadrat als Kappe
butt: keine Kappe

Etwas ausführlicher:

Bei round werden die Pfadenden mit runden Kappen versehen, deren Durchmesser der Strichstärke entspricht.

Bei butt wird keine Kappe an den Pfadenden angefügt.

Bei square werden halbe Quadrate mit der Kantenlänge entsprechend der Strichstärke an den Enden angefügt.

Beim Wert inherit erfolgt eine Vererbung vom Elternelement.

Der Initialwert ist 'butt', die Eigenschaft wird vererbt und ist animierbar.

Beispiel zur Verwendung von stroke-linecap.

Strichecken, stroke-linejoin


SVG
1.1	1.7	8	1.5	3.2	4	?	?	?

Dort, wo Pfadesegmente so zusammentreffen, dass Knicke oder Ecken entstehen, kann mit der Eigenschaft stroke-linejoin festgelegt werden, wie dies dargestellt werden soll.
Der Wortlaut der Spezifikation impliziert, dass dies auch anwendbar ist, wenn ein Kurvensegment selbst eine Ecke aufweist, was prinzipiell bei einem kubischen Pfadsegment nicht ausgeschlossen ist (ohne es nachgerechnet zu haben, liegt die Vermutung nahe, dass bei einer solchen Ecke der Winkel zwischen den Tangenten immer 0 Grad ist).

Folgende Werte sind möglich:

inherit: geerbt
round: Ecke auf der spitzen Seite abgerundet
miter: Bis zum Schnittpunkt der Tangenten wird der Strich verlängert, die Ecke läuft also spitz zu, eine Gehrung entlang der Winkelhalbierenden der Tangenten der beiden zusammentreffenden Kurvensegmente.
bevel: Statt einer Spitze wie bei miter wird die Ecke mit einer stumpfen Kante beendet, welche senkrecht zur Winkelhalbierenden der Tangenten der beiden zusammentreffenden Kurvensegmente steht.

Initialwert ist 'miter', die Eigenschaft wird vererbt und ist animierbar.

In den Spezifikationen ist lediglich eine Abbildung angegeben, so dass keine weiteren Details schriftlich nachzulesen sind. Immerhin sind die Implementierungen trotzdem einheitlich.
Durch detaillierte Experimente und Nachforschungen ergibt sich jedoch folgendes:
Bei der inneren Ecke laufen die Kanten der Striche immer spitz zusammen, das Verhalten bei der äußeren Ecke hängt vom Wert von stroke-linejoin ab.

round - die Ecke wird abgerundet. Der Radius der Rundung ist die halbe Linienstärke.

miter - sofern stroke-miterlimit groß genug ist, laufen die Kanten zu einer Spitze zusammen.

bevel - die Ecke wird abgestumpft, dazu werden die Kanten bis zum Segmentende ausgeführt und die äußeren Kanten werden dann durch einer gerade Kante miteinander verbunden. Diese Verbindungslinie ist dann senkrecht zur Winkelhalbierenden.

Beispiel und Test zu stroke-linejoin.
Bei diesen Beispielen wird die konkrete Form des Striches mit einer Kombination von gefüllten Pfaden und Basisformen nachempfunden. Dabei liegt einmal die Nachempfindung oben und einmal der Strich. Die untere rote Version wird daher immer komplett von der oberen blauen Form verdeckt. Wird etwas Rotes sichtbar, liegt ein Implementierungsfehler vor.

Strich-Gehrungsbegrenzung, stroke-miterlimit


SVG
1.1	1.7	9	3.5	3.2	-	?	?	?

Einfache Beispiele - einige Dreiecke mit verschiedenen Werten

Test von Implementierungen anhand kritischer Fälle

Bei sehr spitzen Winkeln entsteht bei stroke-linejoin 'miter' das Problem, dass die Ecken sehr lang werden, dies wird mit der Eigenschaft stroke-miterlimit eingegrenzt. Der Wert ist eine Zahl größer oder gleich 1 oder 'inherit'. Wenn eine Ecke so spitz wird, dass das stroke-miterlimit überschritten wird, wird auf den Typ 'bevel' gewechselt.
Die Eigenschaft wird vererbt und ist animierbar. Der Initialwert ist 4.
Werte kleiner als 1 führen in SVG tiny 1.2 dazu, dass der angegebene Wert ignoriert wird, effektiv also der ererbte Wert, beziehungsweise wenn es den nicht gibt der Initialwert gilt. In SVG 1.1 stellt ein Wert kleiner als 1 einen Fehler dar, der zum Abbruch der Darstellung des Dokumentes führen sollte (manche Programme ignorieren diese Implementierungsregel, ein Autor kann sich also nicht darauf verlassen, dass solch ein Fehler unmittelbar sichtbar wird).

Ist m die Länge der Spitze vom äußersten Punkt der Ecke bis zur inneren Ecke, so ergibt sich mittels
'miter' = m / stroke-width = 1/sin(θ/2)
ein direkter Zusammenhang zwischen der Länge der Spitze, der Strichstärke, und dem Winkel θ, unter dem die Tangenten der Ecke aufeinanderzulaufen. Bei dem so ermittelten Wert 'miter' wird die Ecke noch spitz dargestellt, wenn dieser Wert nicht größer als stroke-miterlimit ist.

Einfache Beispiele - einige Dreiecke mit verschiedenen Werten.
In den desc-Elementen stehen nähere Beschreibungen, was wie berechnet wurde. Je nach Winkel und stroke-miterlimit sind einige Ecken abgeflacht oder nicht. Insgesamt ist jeweils ein Dreieck zu sehen mit keiner, einer, zwei oder drei spitzen Ecken.

Test von Implementierungen anhand kritischer Fälle.
Beispiele zum Testen vom Implementierungen. Es ist jeweils ein Vergleichspfad angegeben. Das Resultat ist dabei immer, dass der blaue Pfad den roten komplett verdeckt. Rot weist auf einen Implementierungsfehler hin.

Einige Implementierungsprobleme, die auf schlechter Rundungsgenauigkeit beruhen, kann ein Autor natürlich leicht umgehen, indem entweder stroke-linejoin gleich auf bevel besetzt wird oder aber stroke-miterlimit deutlich größer gewählt wird als für die konkrete Form erforderlich ist. Einigen Problemen können Autoren nicht ohne weiteres entgehen, viele davon treten aber in der Praxis eher selten auf.

Strichmuster, stroke-dasharray


SVG
1.1	1.7	8	1.5	3.2	4	?	?	ja

Mittels stroke-dasharray kann ein Pfad auch recht flexibel gestrichelt werden (grobe Übersetzung: Strich-Strichelaufstellung oder Wegstrichelanordnung). Die Spezifikation selbst nennt es ein Muster von Strichen und Aussparungen. Abwechselnd wird also ein Stück des Striches dargestellt, dann ein Stück ausgepart. Obgleich das recht eindeutig formuliert ist, wird dies zumeist allerdings anders implementiert, wobei die dargestellten Teile wie Unterpfade dargestellt werden, auf die auch stroke-linecap angewendet wird. Das gibt zwar die Spezifikation der Eigenschaft nicht her, ist aber mehr oder weniger einheitlich so implementiert (und ist daher als durchgehend falsch anzusehen, kann sogar dazu führen, dass im Falle von stroke-linecap square Teile des Musters aus der Strichbreite herausragen, dies also keinesfalls mehr ein Muster des Striches ist).
Auch Wechselwirkungen mit anderen Eigenschaften zum Strich lassen sich zwar teilweise indirekt erschließen, sind aber nicht explizit formuliert. Daher stellt SVG tiny 1.2 explizit klar, dass dies Verhalten noch nicht eindeutig definiert ist und Autoren sich nicht darauf verlassen sollten. Problematisch sind insbesondere die Wechselwirkungen mit stroke-linecap vom Typ round oder square, die Wechselwirkung mit stroke-linejoin und was genau passiert, wenn mehrere Unterpfade vorliegen. Recht unproblematisch ist das Verhalten bei einfachen Pfaden ohne Knicke und Ecken und mit stroke-linecap 'butt'.

Mögliche Werte sind:

inherit: geerbt
none: kein Gestrichel, also Strich komplett durchgezogen
Liste von Längen: Ergibt ein Strichmuster wie angegeben

Die Listenwerte sind in SVG 1.1 jeweils mit einem Komma zu separieren (optional zusätzlicher Leerraum). Bei SVG tiny 1.2 ist auch eine Separation nur mit Leeraum erlaubt.

Ein Wert wie "90,10,50,20" bedeutet also, erst ein Strich der Länge 90, dann eine Aussparung der Länge 10, dann ein Strich der Länge 50, dann eine Aussparung von 20, dann wiederholt sich die Abfolge mit einem Strich der Länge 90 und so weiter. Bei einer ungeraden Anzahl von Listeneinträgen wird die Liste verdoppelt. "50" bedeutet also das gleiche wie "50,50", also abwechselnd ein Strich der Länge 50 und eine Aussparung der Länge 50. Analog: "1,2,3" entspricht "1,2,3,1,2,3". Negative Längen sind in SVG1.1 ein Fehler (Abbruch der Darstellung des Dokumentes). In SVG tiny 1.2 bewirkt dies effektiv nur, dass die Eigenschaft für das Element nicht interpretiert wird, der Strich also durchgezogen wird. Ist hingegen die Summe aller Längen 0, so ist dies gleichbedeutend mit 'none'.

Der Initialwert ist 'none', die Eigenschaft wird vererbt und ist auch animierbar (allerdings nicht additiv; calcMode paced ergibt ebenfalls keinen Sinn).

Beispiel stroke-dasharray
Ein referenzierter Pfad wird mehrmals mit verschiedener Dicke und anderem Muster übereinandergemalt, um eine interessantere Strukturierung des Strichmusters zu erzeugen. Die Verschiebung der kleineren Strichel lässt sich dann auch noch eleganter mit der Eigenschaft stroke-dashoffset lösen. Relevant für den gewünschten Effekt ist zum einen, dass bei allen Pfaden die Summe aus Strichel und Aussparung gleich bleibt und zu anderen bei den kleineren Pfaden mit einer geeignet großen Aussparung begonnen wird, um die Strichel der verschiedenen Pfade relativ zueinander zu zentrieren oder geeignet relativ zueinander zu verschieben.

Beispiel (2) stroke-dasharray
Mittels stroke-dasharray wird ermittelt, wo begonnen wird, einen Pfad zu zeichnen. Dies ist in den Spezifikationen genau angegeben. Daher kann diese Datei verwendet werden, um zu testen, ob alles richtig implementiert ist.

Liegt das dunkelblaue stroke-dasharray nicht unter dem jeweiligen orangen Teil, liegt ein Fehler vor. Beginnt das Strichmuster nicht exakt mit dem dünnen orangen Strich, liegt ebenfalls ein Fehler vor.

Strichmusterversatz, stroke-dashoffset


SVG
1.1	1.7	8	1.5	3.2	-	?	?	ja

Mit der Eigenschaft stroke-dashoffset kann die Anfangsposition des Strichmusters relativ zum Anfang des Pfades verschoben werden.
Der Wert ist inherit oder eine Länge.
Der Initialwert ist 0, die Eigenschaft wird vererbt und ist animierbar.

Für stroke-dasharray="100,50" und stroke-dashoffset="10" bedeutet dies, dass der erste Strich die Länge 100-10=90 hat. Bei stroke-dashoffset="100" beginnt die Darstellung mit einer Aussparung der Länge 50.
Negative Werte sind auch erlaubt, da es sich um ein periodisches Muster ohne Anfang und Ende handelt. stroke-dashoffset="-10" bedeutet dann in diesem Falle, dass die Darstellung mit einer Aussparung der Länge 10 beginnt. stroke-dashoffset="-100" beginnt mit einem Strich der Länge 50, weil die Aussparung nur 50 lang ist.

Beispiel stroke-dashoffset.
Ein ähnliches Beispiel wie zuvor für stroke-dasharray, nur wird hier die die Zentrierung der Strichel relativ zueinander mit 'stroke-dashoffset statt mit einer komplizierteren Abfolge von Werten in stroke-dasharray erreicht, was etwas einfacher und eleganter ist. Testweise mag der geneigte Leser auch einmal die jeweiligen Werte für stroke-dashoffset so verändern, dass statt einer Zentrierung eine leichte Asymmetrie des Musters entsteht.

Beispiel (2) stroke-dashoffset.
stroke-dashoffset wird für verschiedene Werte getestet. Dazu werden die Muster für verschiedene Linien mit Pfaden vergleichen, die entsprechende Unterpfade aufweisen.

Eine Lage Vergleichspfade liegt in rot unter dem Muster, eine Lage dünne gelbe Pfade darüber.

Wird etwas Rotes sichtbar, weist dies auf einen Implementierungsfehler hin, ebenso, wenn die dunkelblauen Muster nicht immer exakt unter den gelben Markierungen liegen.

Vektoreffekt, vector-effect


SVG
1.2	-	9.5	-	-	-	?	?	-

Mit SVG tiny 1.2 wurde die Eigenschaft vector-effect eingeführt, die demzufolge in SVG 1.1 noch nicht verfügbar ist. Für SVG tiny 1.2 ist auch nur ein Effekt definiert. Weitere sind für zukünftige Versionen von SVG in Vorbereitung.

Mögliche Werte sind:

inherit: geerbt
none: kein Vektoreffekt, Verhalten wie in SVG 1.1
non-scaling-stroke: Angaben zur Strichstärke werden nicht mittransformiert, was zur Folge hat, dass die Strichstärke immer gleich bleibt, auch bei Vergrößerung des Bildes oder bei Verwendung des Attributes transform, welches dann zwar noch die Pfaddaten transformiert, nicht aber die Strichstärke, auch Scherungen oder unterschiedliche Skalierungen verzerren die Strichstärke nicht, wie dies im Falle des Wertes 'none' passiert. Die Angabe der Strichbreite bezieht sich also auf das Ausgabekoordinatensystem, nicht auf das lokale Koordinatensystem.

Der Initialwert ist 'none', die Eigenschaft wird nicht vererbt und ist animierbar.

Beispiel vector-effect
Die Eigenschaft vector-effect wird mit dem Wert 'inherit' auf einen Pfad angewendet. Dieser wird einige Male referenziert und dann transformiert. Diese Kopien haben ebenfalls vector-effect gesetzt, entweder auf 'non-scaling-stroke' (magenta Strich) oder 'none' (gelber Strich). stroke-width ist auf 5 gesetzt. Dies ist unabhängig von den Transformationen, wenn 'non-scaling-stroke' vorliegt. Daher haben jene Pfade mit magenta Strich alle die gleiche Strichbreite, die von denen mit gelbem Strich variieren. Zudem ändert sich die Strichbreite der Pfade mit magenta Strich nicht, wenn das Dokument vergrößert oder verkleinert wird.

Eigenschaften des Anzeigebereiches

Ein häufig auftretendes Problem in SVG 1.1 liegt vor, wenn der an sich transparente Anzeigebereich eines Dokumentes eigentlich eine definierte Farbe bekommen soll. Die Lösung besteht in der Praxis meist darin, ein Rechteck ziemlich zu Beginn des Dokumentes einzufügen, welches die passende Füllung hat und deutlich größer ist als der typisch zu erwartende Anzeigebereich des Darstellungsprogrammes.

Mit SVG tiny 1.2 werden neue Eigenschaften eingeführt, mit denen dies Problem elegant gelöst werden kann. In SVG 1.1 stehen diese Eigenschaften noch nicht zur Verfügung.

Die Eigenschaften sind anwendbar auf alle Elemente, die einen (neuen) Anzeigebereich erzeugen. Dies sind in SVG tiny 1.2 die Elemente svg, animation, image, video und foreignObject.

Füllung des Anzeigebereiches, viewport-fill


SVG
1.2	-	9.5	-	-	-	?	?	-

Beispiel viewport-fill

Mittels viewport-fill kann der Anzeigebereich mit einer Farbe gefüllt werden.

Mögliche Werte sind:

inherit: geerbt
none: keine Füllung wie in SVG 1.1
currentColor: die aktuelle, mit der Eigenschaft color festgelegte Farbe
Farbe: Farbangaben wie für fill beschrieben

Der Initialwert ist 'none', die Eigenschaft wird nicht vererbt und ist animierbar.

Beispiel viewport-fill
Der Anzeigebereich wird mittels viewport-fill hellblau gefüllt. Der Anzeigebereich wird mit einem Rechteck mit schwarzem Strich angedeutet. Der eigentliche Inhalt ist ein gelbes Rechteck, welches bei den gängigen Seitenverhältnissen von Anzeigebereichen von Darstellungsprogrammen zum großen Teil außerhalb des Anzeigebereiches des Dokumentes liegen wird. Weil aber das Seitenverhältnis des Anzeigebereiches des Dokumentes zu erhalten ist, wird so im Anzeigebereich des Darstellungsprogrammes auch etwas dargestellt, was nicht mehr im Anzeigebereich des Dokumentes liegt. In solch einem Falle wird auch der zusätzlich angezeigte Bereich mittels viewport-fill mit einer Füllung versehen. Das liegt bei diesem Dokument an dem doch sehr ungewöhnlichen Seitenverhältnis und daran, dass die nicht explizit gesetzten Höhe und Breite jeweils einem Wert von 100% entsprechen, also dem gesamten Anzeigebereich des Darstellungsprogrammes, wenn das Dokument sonst nirgends eingebettet wird.

Füll-Opazität des Anzeigebereiches, viewport-fill-opacity


SVG
1.2	-	9.5	-	-	-	?	?	-

Beispiel viewport-fill-opacity

Der Abzeigebereich kann auch teildurchsichtig gefüllt werden, dazu dient die Eigenschaft viewport-fill-opacity.

Mögliche Werte sind:

inherit: geerbt
Zahl: Zahl aus dem Intervall 0 bis 1 einschließlich dieser Werte. Zahlen außerhalb dieses Intervalles werden auf den nächstgelegenen korrekten Wert verändert.

Der Initialwert ist '1', die Eigenschaft wird nicht vererbt und ist animierbar.

Beispiel viewport-fill-opacity
Der Anzeigebereich wird mittels viewport-fill hellblau gefüllt und durch einen Wert von 0.3 für viewport-fill-opacity teilweise durchsichtig.

Die konkrete Farbwirkung hängt also davon ab, welcher Hintergrund im Darstellungsprogramm für den Anzeigebereich verwendet wird. Dies hängt davon ab, ob das Dokument in ein anderes eingebettet ist oder falls nicht, welche Hintergrundfarbe am Darstellungsprogramm als Voreinstellung eingestellt ist. Bei den meisten kann dies vom Nutzer eingestellt werden.

Der Anzeigebereich wird mit einem Rechteck mit schwarzem Strich angedeutet. Der eigentliche Inhalt ist ein gelbes Rechteck, siehe Beispiel zu viewport-fill.

Eigenschaft zur Farbangabe

Farbe, color


SVG
1.1	1.7	9	3.5	3.2	4	?	?	?

Mit der Eigenschaft color kann die aktuelle Farbe angegeben werden. Dies kann dann als Farbangabe mittels des Farbwertes 'currentColor' verwendet werden.

Mögliche Werte sind:

inherit: geerbt
Farbe: Farbwert, wie bereits für fill erläutert

Der Initialwert ist vom Darstellungsprogramm abhängig, das ist dann also sofern vom Autor nicht anders gesetzt, die vom Nutzer des Darstellungsprogrammes als bevorzugt eingestellte Farbe oder eben die vom Darstellungsprogramm voreingestellte Farbe, wenn der Nutzer diese nicht verändert hat.
Dei Eigenschaft wird vererbt und ist animierbar. Bei einer Animation dieser Eigenschaft bedeutet das insbesonderen, dass der Wert für 'currentColor' sich entsprechend der Änderung von color verändert, womit interessante Effekte erreicht werden können.

Eine interessante Anwendung von color und 'currentColor' ergibt sich, wenn von vielen Objekte gleichzeitig die Farbe geändert werden können soll, diese aber nicht einfach gruppiert werden können. Da es nur eine solche Eigenschaft gibt, ist das Konzept so nicht beliebig erweiterbar. Für eine statische Änderung kann dies bei der Interpretation von CSS-Selektoren jeweils durch Verwendung von Klassen erfolgen, denen per CSS Eigenschaften zugeordnet werden können. Allerdings ermöglicht es es SMIL-Animation in SVG nicht, Klassen selbst zu animieren. Da CSS-Notation in SVG tiny 1.2 nicht vorgesehen ist, gibt es dort das Element solidColor mit entsprechenden Eigenschaften, um als Maldienst referenzierbare eigene Farbangaben machen zu können. Da dies auch Animation mit einschließt, ist dies Modell der CSS-Notation mit Klassen überlegen (wobei es inzwischen auch einen Arbeitsentwurf für Animation in CSS3 gibt).

Beispiel zur Verwendung:

<g color="blue" fill="yellow">
<animate attributeName="color"
  values="#00a;#f0a;#a0f;#00a" dur="60s"
  repeatDur="indefinite" />
<animate attributeName="fill"
  values="#080;#ff0;#0ff;#080" dur="61s"
  repeatDur="indefinite" />
<circle r="160" />
<circle r="150" fill="red" />
<circle r="140" fill="currentColor" />
<circle r="130" />
<circle r="120" fill="red" />
<circle r="110" fill="currentColor" />
<circle r="100" />
<circle r="90" fill="red" />
<circle r="80" fill="currentColor" />
<circle r="70" />
<circle r="60" fill="red" />
<circle r="50" fill="currentColor" />
<circle r="40" />
<circle r="30" fill="red" />
<circle r="20" fill="currentColor" />
<circle r="10" />
</g>

SVG-Beispiel color und currentColor.

Eigenschaften zur Anzeige, Sichtbarkeit und Durchsichtigkeit

Eigenschaften zur Anzeige oder Sichtbarkeit sind bei statischen Dateien eher langweilig, weil nicht angezeigte oder nicht sichtbare Objekte bei einer graphischen Repräsentation nicht besonders viel hermachen. Anders wird es bei nichtstatischen Dateien, die etwa Ereignisse auswerten und animiert sind.

Teilweise durchsichtige Objekte können hingegen auch bereits in statischen Dateien interessant sein. Darunterliegende Objekte scheinen so durch und es können Effekte einfach erreicht werden, die bei beliebigen Pfaden ansonsten einen nicht unerheblichen Aufwand für den Autor bedeuten würden.

Anzeige, display


SVG
1.1	1.7	8	1.5	3.2	4	?	?	?

Minimal-Comic mit Anspielung auf Becketts 'Warten auf Godot'

Ob ein graphisches Element überhaupt direkt angezeigt wird oder nicht, hängt zum einen davon ab, wo es sich befindet - innerhalb eines Elementes defs wird es zum Beispiel nicht direkt angezeigt werden, kann aber referenziert werden. Dort, wo es generell angezeigt werden kann, kann dies mit der Eigenschaft display beeinflusst werden.
Wird für ein Gruppenelement (g, svg, a, switch, foreignObject) die Anzeige unterbunden, so gilt dies für alle Kindelemente, unabhängig vom individuellen Wert des jeweiligen Elementes. Ein Element mit unterbundener Anzeige ist auch nicht Empfänger von Ereignissen.
Der konkrete Wert von display eines Elternelementes hat allerdings keinen Einfluss darauf, dass ein Element zum Beispiel mit use referenziert werden kann.

Andersherum kann bei Elementen, die in SVG nicht zur direkten Anzeige gedacht sind, nicht mittels display eine Anzeige erzwungen werden. Um dies zu erreichen, müsste die Kennzeichnung des Dokumentes so geändert werden, dass es nur noch als allgemeines XML-Dokument erkannt wird und nicht mehr als SVG-Dokument.

Die Eigenschaft ist in CSS ganz allgemein definiert und enthält daher einige Werte, deren Bedeutung sich für SVG nicht voneinander unterscheidet.

Mögliche Werte sind:

inherit: geerbt
none: keine Darstellung oder Anzeige
inline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption: Genau einer der Werte ist anzugeben, um eine Anzeige oder Darstellung zu bewirken.

Der Initialwert ist 'inline', die Eigenschaft wird nicht vererbt, ist aber animierbar.

Beispiele zu Verwendung:

<g font-size="15" font-family="fantasy">
<animate attributeName="display" values="inline;none"
dur="2s" repeatDur="indefinite" />
<circle r="100" fill="#fc0" />
<text x="10" y="20">Blinker </text>
<text x="10" y="40">
Unwichtiges<tspan display="none"> kann
gestrichen werden</tspan>!</text>
</g>

Der Text 'Blinker' ist also abwechselnd eine Sekunde sichtbar, eine Sekunde unsichtbar. Zweifellos kein wichtiges Beispiel, weswegen da auch der Hinweis 'Unwichtiges!' ausreicht, statt eines ganzen Satzes, nach dem Motto: Was gestrichen ist, kann auch nicht durchfallen!

<text x="10" y="20" font-size="15" font-family="fantasy">
<tspan><animate attributeName="display" values="inline;none"
repeatDur="indefinite" keyTimes="0;0.1" dur="10s" begin="0s" />0</tspan>
<tspan display="none"><animate attributeName="display" values="inline;none"
repeatDur="indefinite" keyTimes="0;0.1" dur="10s" begin="1s" />1</tspan>
<tspan display="none"><animate attributeName="display" values="inline;none"
repeatDur="indefinite" keyTimes="0;0.1" dur="10s" begin="2s" />2</tspan>
<tspan display="none"><animate attributeName="display" values="inline;none"
repeatDur="indefinite" keyTimes="0;0.1" dur="10s" begin="3s" />3</tspan>
<tspan display="none"><animate attributeName="display" values="inline;none"
repeatDur="indefinite" keyTimes="0;0.1" dur="10s" begin="4s" />4</tspan>
<tspan display="none"><animate attributeName="display" values="inline;none"
repeatDur="indefinite" keyTimes="0;0.1" dur="10s" begin="5s" />5</tspan>
<tspan display="none"><animate attributeName="display" values="inline;none"
repeatDur="indefinite" keyTimes="0;0.1" dur="10s" begin="6s" />6</tspan>
<tspan display="none"><animate attributeName="display" values="inline;none"
repeatDur="indefinite" keyTimes="0;0.1" dur="10s" begin="7s" />7</tspan>
<tspan display="none"><animate attributeName="display" values="inline;none"
repeatDur="indefinite" keyTimes="0;0.1" dur="10s" begin="8s" />8</tspan>
<tspan display="none"><animate attributeName="display" values="inline;none"
repeatDur="indefinite" keyTimes="0;0.1" dur="10s" begin="9s" />9</tspan>
</text>

Ein simpler Zähler von 0 bis 9 mit Wiederholung.

Beispiel: Minimal-Comic mit Anspielung auf Becketts 'Warten auf Godot'.
Anwendung der Eigenschaft display mit Animation.
Das Dokument ist so angelegt, dass bei einer kompletten Implementierungslücke hinsichtlich Animation eine statische Version des Comics verfügbar ist.

Sichtbarkeit, visibility


SVG
1.1	1.7	8	1.5	3.2	4	?	?	ja

Anders als display hat visibility nur Einfluss auf die Sichtbarkeit von Elementen, diese Werte aber nicht komplett aus der Darstellung entfernt, was etwa Einfluss auf Elemente wie tspan hat, weil auch unsichtbare Glyphen die aktuelle Textposition verändern, nicht dargestellte Glyphen tun dies hingegen nicht. Grob gesagt bleibt der Platz für unsichtbare Element reserviert, für nicht dargestellte nicht. Nicht sichtbare Elemente können trotzdem Ziel von Ereignissen sein, so dass ein unsichtbares Element platziert werden kann, um Ereignisse abzufangen, die zum Beispiel für sichtbare Elemente unerwünscht wären.

In SVG tiny 1.2 gibt es auch die Möglichkeit hörbarer Inhalte. Wie der Name der Eigenschaft bereits impliziert, hat die Frage der Sichtbarkeit nichts mit der der Hörbarkeit zu tun, insofern hat die Eigenschaft visibility auch keinen Einfluss auf hörbare Elemente.

Mögliche Werte sind:

inherit: geerbt
visible: sichtbar
hidden | collapse: Genau einer der Werte ist anzugeben,dann ist das Objekt nicht sichtbar.

Initialwert ist 'visible', die Eigenschaft wird vererbt und ist animierbar.

Beispiel zu Verwendung:

<text x="10" y="40" font-size="15" 
      font-family="fantasy">Beispiel 
 <tspan visibility="hidden">zur Verwendung von</tspan>
 visibility</text>

Beispiel: Verwendung von visibility.
Von fünf (!) Quadraten kann die Füllung durch Klicken oder Aktivieren verändert werden.

Das kleine Quadrat in der Mitte ist anfänglich nicht sichtbar, kann aber Ziel von Klicks sein oder kann aktiviert werden. Dies bewirkt eine Änderung der Füllung der großen Quadrate. Gleichzeitig bewirkt dies aber auch eine Änderung der Sichtbarkeit und zudem wird für 20s die Möglichkeit deaktiviert, Ziel von Ereignissen zu sein.

Beim Quadrat links unten bewirkt ein Ereignis anfangs das Setzen der Füllung auf 'none' für 5s. Weil pointer-events auf 'visiblePainted' gesetzt ist, lässt sich dies nur durch ein abermaliges Ereignis verlängern, wenn entweder der Strich angeklickert oder aktiviert wird oder aber die 5s gewartet wird, bis die Füllung wieder einen anderen Wert erhält.

Beim Quadrat rechts oben bewirkt ein Ereignis anfangs das Setzen der Sichtbarkeit auf 'hidden' für 5s. Weil pointer-events auf 'painted' gesetzt ist, lässt sich dies jederzeit durch ein weiteres Ereignis verlängern.

Opazität, opacity


SVG
1.1	1.7	8	1.5	3.2	4	?	?	?

Vergleich opacity, fill-opacity, stroke-opacity

Während fill-opacity und stroke-opacity nur den Grad der Durchsichtigkeit der Füllung, beziehungsweise des Striches individueller Elemente beeinflussen, wird mit opacity die Durchsichtigkeit des gesamten Elementes oder einer ganzen Gruppe von Elementen beeinflusst. Diese Angabe zur Durchsichtigkeit wird verarbeitet, nachdem bereits die Füll- und Stricheigenschaften und gegebenenfalls die Anordnung in der Gruppe verarbeitet wurden.

Während visibility angibt, ob das Element oder die Gruppe überhaupt sichtbar ist, geht es bei opacity nur darum, wie durchsichtig es ist. Auch komplett durchsichtige Elemente können so das Ziel von Ereignissen sein, die auf sichtbare Elemente wirken, sofern sie nicht mittels visibility explizit unsichtbar gemacht werden oder gar mittels display gar nicht dargestellt werden.

Mögliche Werte sind 'inherit' für einen geerbten Wert oder eine Zahlenangabe aus dem Intervall 0 bis 1; 0 für komplett durchsichtig, 1 für komplett undurchsichtig. Werte außerhalb des Intervalles werden auf den nächsten zulässigen Wert, also 0 beziehungsweise 1 korrigiert, bevor die Eigenschaft angewendet wird.

Der Initialwert ist 1, die Eigenschaft wird nicht vererbt und ist animierbar.
opacity ist in SVG tiny 1.1 nicht verfügbar und ist in SVG tiny 1.2 darauf beschränkt, auf image-Elemente angewendet zu werden. Diese Einschränkung hängt damit zusammen, dass die Anwendung dieses Attributes eine größere Menge Rechnerei zur Folge haben kann, die zumindest für Mobiltelephone eine Herausforderung sein kann. Wenn es also für eine Anwendung weniger rechenintensive Umsetzungen gibt, sind diese sicher auch in der Vollversion von 1.1 dem Einsatz von opacity vorzuziehen.

Beispiel: Vergleich opacity, fill-opacity, stroke-opacity.
Zum Vergleich der Eigenschaften opacity, fill-opacity und stroke-opacity werden fünf Gruppen von Formen jeweils unterschiedlich mit diesen Eigenschaften ausgestattet. Links oben sind fill-opacity und stroke-opacity jeweils einzeln auf jede Form angewendet. In der Mitte oben ist opacity jeweils einzeln auf jede Form angewendet. Rechts oben ist opacity auf die ganze Gruppe angewendet. Links unten sind fill-opacity und stroke-opacity jeweils einzeln auf jede Form angewendet und opacity auf die ganze Gruppe. Rechts unten ist opacity jeweils einzeln auf jede Form angewendet und opacity auf die ganze Gruppe.

Überlauf, overflow


SVG
1.1	1.7	9	3	3.2	-	?	?	?

Ein Symbol steht über. Der Anzeigebereich ist jeweils rot gerandet angedeutet. Die beiden Beispiele rechts haben keine Anzeige außerhalb des Anzeigebereiches, bei den vier anderen wird der Überlapp dargestellt.

Ein Symbol steht über (2). Der Anzeigebereich ist jeweils rot gerandet angedeutet. Die beiden Beispiele rechts haben keine Anzeige außerhalb des Anzeigebereiches, bei den vier anderen wird der Überlapp dargestellt.

Mit der Eigenschaft overlow kann angegeben werden, ob überstehende oder überlaufende Teile eines Elementes angezeigt werden sollen oder nicht. Dies gilt für Elemente, die einen eigenen Anzeigebereich öffnen, außerdem auch bei Markierungen und Mustern, wobei das Verhalten bei Mustern unterspezifiziert und uneinheitlich implementiert ist, es ist nicht eindeutig geregelt, wie überstehender Inhalt bei einem Muster miteinander wechselwirkt. Die Situation ist bei Mustern also derzeit zu vermeiden.

Die Eigenschaft ist nicht in SVG tiny 1.1 und tiny 1.2 verfügbar.

Elemente, die in der Vollversion einen eigenen Anzeigebereich eröffnen, sind: svg, symbol, image und foreignObject.

Mögliche Werte sind:

inherit: geerbt
hidden: Überstehende Bereiche werden nicht angezeigt.
scroll: Überstehende Bereiche werden nicht angezeigt. Es gibt allerdings auch keine Rollbalken, wie man vom Namen her und von CSS her erwarten könnte.
visible: Überstehende Bereiche werden angezeigt, sofern sie in einem anzuzeigenden Bereich liegen
auto: Überstehende Bereiche werden angezeigt, sofern sie in einem anzuzeigenden Bereich liegen

Handelt es sich beim betroffenen Element um das svg-Hauptelement, welches in einem anderen XML-Dokument mit Stilvorlageninterpretation eingebettet ist, entspricht der Ausschnitt im Falle von 'hidden' und 'scroll' dem des anfänglichen Anzeigebereiches. Ansonsten wird die Eigenschaft verwendet, wie in CSS definiert. Wird ist für das XML-Dokument keine Stilvorlageninterpretation vorgesehen oder das svg-Hauptelement ist nicht eingebettet, so wird die Eigenschaft ignoriert und der Ausschnitt ergibt sich aus dem anfänglichen Anzeigebereich.

Der Initialwert ist in CSS 'visible', allerdings wird dies durch die Stilvorlage des SVG-Darstellungsprogrammes überschrieben, dort ist der Wert 'hidden'. Die Eigenschaft wird nicht vererbt und ist animierbar.

Ein Symbol steht über:
Einige Beispiele für das Zusammenspiel von symbol mit der Eigenschaft overflow, Überstehen bedingt durch preserveAspectRatio 'slice'.
Ein Symbol steht über (2):
Einige Beispiele für das Zusammenspiel von symbol mit der Eigenschaft overflow, wenn die Pfade über die viewBox überstehen.

Der Anzeigebereich ist jeweils rot gerandet angedeutet. Die beiden Beispiele rechts haben jeweils keine Anzeige außerhalb des Anzeigebereiches, bei den vier anderen wird jeweils der Überlapp dargestellt.

Texteigenschaften

Allgemeine und spezielle Eigenschaften auf Text angewendet

Da Text in SVG ebenfalls als Graphik dargestellt wird, kann Text ebenfalls mit den Eigenschaften zur Füllung und zum Strich versehen werden. In SVG tiny 1.1 ist allerdings nicht vorgesehen, dass Eigenschaften zum Strich auch auf Text wirkt, weil die verwendeten Schriften auf Mobiltelephonen dies zur Zeit der Herausgabe der Spezifikation vermutlich noch nicht hergegeben haben oder aber dies die Prozessoren von Mobiltelephonen zu der Zeit zu stark gefordert haben mag.

Sofern Eigenschaften vererbbar sind können Texte nicht nur direkt durch Angabe der Präsentationsattribute in Elementen wie text oder tspan notiert werden, sondern auch in dem übergeordneten Element zum Beispiel der Gruppierung g angegeben werden. So können Füllung, Strich, Schriftart und Zeichenhöhe angegeben werden:

<g fill="red" fill-opacity="0.5"
stroke="blue" stroke-width="0.2" 
stroke-linejoin="round" stroke-linecap="round"
stroke-opacity="0.75"
font-family="fantasy" font-size="25">
<text x="10" y="50">Hallo</text>
<text x="40" y="60">Welt<tspan font-size="50">!</tspan></text>
</g>

Neben font-family und font-size gibt es einige weitere Eigenschaften, die nur auf Text als Graphik wirken und nicht auf anderen Elemente.

Auswahl der Schriftart

Schriftfamilie, font-family


SVG
1.1	1.7	8	3	3.2	4	?	?	?

Mit der Eigenschaft font-family wird die Schriftart angegeben. Der Wert von font-family ist eine mit Komma separierte Liste von Namen von Schriftarten oder generischen Schriftfamilien oder das Schlüsselwort 'inherit' für vererbt. Generische Schriftfamilien sind gekennzeichnet durch folgende Schlüsselwörter, die nicht in Anführungszeichen zu setzen sind: serif, sans-serif, cursive, fantasy, and monospace. Jedes Darstellungsprogramm sollte eine Schriftart für jede dieser generischen Schriftfamilien verfügbar haben, nicht aber zwangsläufig eine spezielle Schriftart.

Enthält der Name einer Schriftart Leerzeichen, so sollte der Name in Anführungszeichen stehen.

Findet das Darstellungsprogramm in der ersten angegebenen Schriftart einen Glyphen nicht, wird in der nächsten gesucht und so weiter. Die letzte Angabe in der Liste sollte daher immer eine generische Schriftfamilie sein, um sicherzustellen, dass überhaupt was dargestellt wird.

Der Initialwert ist vom Darstellungsprogramm abhängig (zum Beispiel, was der Nutzer dort eingestellt hat). Die Eigenschaft wird vererbt und ist animierbar.

Folgende Angabe wäre also suboptimal, weil die generische Schriftfamilie fehlt und der Name der Schriftart Leerzeichen enthält, aber nicht in Anführungszeichen steht (die vom Präsentationsattribut gelten nicht, gemeint sind zusätzliche innerhalb der Liste):

 <text x="300" y="150" font-family="Comic Sans MS">Schlechtes Beispiel</text>

Wichtig ist hierbei also, korrekte Angaben zu machen anzugeben, so kann die Angabe "'Comic Sans MS'" zwar zum richtigen Ergebnis führen - dies muss jedoch nicht sein, wenn dieser Zeichensatz zum Beispiel nicht auf diesem Computer installiert ist oder eine Glyphe benötigt wird, die darin nicht enthalten ist. Daher sollte von der Möglichkeit Gebrauch gemacht werden, eine Liste anzugeben:

 <text x="300" y="150" 
  font-family="Frutiger,'Comic Sans MS',Arial,Helvetica,sans-serif">Weitere Projekte</text>

oder vielleicht besser:

 <text x="300" y="150" 
 font-family="'Frutiger Capitalis','Alexa Regular','Comic Strip','Comic Sans MS',fantasy"
 >Weitere Projekte</text>

weil 'Comic Sans MS' zur fantasy-Schriftfamilie gehört und dies dem Autor wichtig sein könnte.

Beispiel generische Schriftfamilien
Vorstellung der fünf generischen Schriftfamilien. Welche Schriftart die jeweilige Schriftfamilie repräsentiert, kann der Nutzer in der Regel beim Darstellungsprogramm selbst auswählen.

serif - Schriftart mit Serifen, also kleine Füßchen, altbekannt ist zum Beispiel die Schriftart 'Times'.
sans-serif -Schriftart ohne Serifen, also keine Füßchen, altbekannt ist zum Beispiel die Schriftart 'Helvetica'.
cursive - schräggestellt, wird oft aus einer anderen Schriftart durch Scherung gewonnen.
fantasy - stark dekorative, spielerische Schriftart.
monospace - nichtproportionale Schriftart, altbekannt ist zum Beispiel die Schriftart 'Courier'.

Schriftgröße, font-size


SVG
1.1	1.7	8	3 (fehlerhaft bei kleinen Längenangabe)	3.2	4	?	?	?

Beispiel Schriftgröße

Die Schriftgröße wird durch die Eigenschaft font-size angegeben. Der mögliche Wert hängt vom verwendeten Profil ab.

inherit: geerbt
absolute Größe: Eines der Schlüsselwörter: xx-small, x-small, small, medium, large, x-large, xx-large
relative Größe: Eines der Schlüsselwörter: larger,smaller
Längenangabe: Eine nicht negative Länge
Prozentangabe: Zum Beispiel 120%, relativ zur Schriftgröße des Elternelementes (nicht in den tiny-Profilen)

Der Initialwert ist medium. Die Eigenschaft wird vererbt und ist animierbar.

Bei den tiny-Profilen sind wie gehabt Einheiten bei der Längenangabe nicht möglich, die Zahl ist also in lokalen Einheiten. Aufgrund der Skalierungsfunktionen von SVG kommt der Schriftgröße in SVG eine etwas andere Bedeutung zu als bei Angaben für (X)HTML-Dokumente. Bei CSS+(X)HTML sind eher absolute oder relative Größen, Prozentangaben und Längeneinheiten wie em oder ex sinnvoll, damit die vom Nutzer als optimal eingestellte Schriftgröße Berücksichtigung findet oder diese nicht ungeeignete Angaben einfach überschreibt. Indes in SVG sind eher lokale Einheiten angemessen, da es sich um Text als Graphik handelt und SVG zudem explizit die Möglichkeit hat, die Darstellung zu skalieren und SVG auch eher suboptimal für langen Fließtext ist. Bei einer Gaphik hat eher Priorität, dass der Autor einschätzen kann, wie groß der Text relativ zu den restlichen Inhalten wird. In Elementen wie text wird der Text auch nicht automatisch umgebrochen, also haben Autor und Betrachter kaum eine Chance, flexible Schriftgrößen sinnvoll zu nutzen. Bei Fließtext in (X)HTML kommt es eher auf optimale Lesbarkeit von längeren Textpassagen ohne Kunststücke seitens des Betrachters an.

So wird die Eigenschaft notiert:

<text x="300" y="150" font-size="12.3">Weitere Projekte</text>

Beispiel Schriftgröße
Die Schriftgröße wird für jeden Buchstaben des Wortes font-size geändert. In der Mitte beim Bindestrich liegt der kleinste Wert.

Schriftstil, font-style


SVG
1.1	1.7	8	3	3.2	4	?	?	?

Mittels der Eigenschaft font-style wird der Schriftstil ausgewählt, damit ist innerhalb einer Schriftfamilie auswählbar, ob die normale Variante verwendet wird, eine kursive oder eine geneigte.

Mögliche Werte sind:

inherit: geerbt
normal: 'normal' im Gegensatz zu kursiv oder geneigt
italic: kursiv
oblique: geneigt

Jede Schriftfamilie sollte mindestens einen Eintrag für eine normale Variante und eine geneigte haben. Gibt es keine für kursiv, so kann auch die für oblique verwendet werden. Begriffe mit ähnlicher Bedeutung unter Experten für Schriftarten für geneigt oder oblique sind auch 'slanted' oder 'incline' (sofern jemand auf diese Begriffe in diesem Zusammenhang stoßen sollte).

Der Initialwert ist 'normal', die Eigenschaft wird vererbt und ist animierbar.

Beispiel Schriftstil
Der Schrifstil wird für ein paar Zeilen Text wie angegeben notiert.

Schriftvariante, font-variant


SVG
1.1	-	9	-	-	4	?	?	?

Mit der Eigenschaft font-variant kann angegeben werden, ob Kapitälchen verwendet werden sollen oder nicht. Glyphen in der Kaptälchenvariante sehen ähnlich wie Großbuchstaben aus, sind bei Kleinbuchstaben aber etwas kleiner und eventuell etwas anders proportioniert als Großbuchstaben.

Mögliche Werte sind:

inherit: geerbt
normal: keine Kapitälchen
small-caps: mit Kapitälchen

Der Initialwert ist 'normal', die Eigenschaft wird vererbt und ist animierbar.
Die Eigenschaft ist in SVG tiny 1.1 nicht verfügbar.

Beispiel Schriftvariante
Die Schriftvariante wird für ein paar Zeilen Text wie angegeben notiert.

Schriftgewichtung, font-weight


SVG
1.1	1.7	8	3	3.2	4	?	?	ja

Die Gewichtung der Schrift kann mit der Eigenschaft font-weight angegeben werden. Im Großen und Ganzen geht es darum, wie fett die Schrift dargstellt wird. Das ist in SVG nicht zu verwechseln mit der Strichstärke, da im Allgemeinen die Glyphen vorrangig aus Füllungen bestehen. Wird bei den Glyphen allerdings ein Strich gleicher Farbe verwendet, kann damit ein ähnlicher Effekt wie mit font-weight für eine fette Schrift erzielt werden, meist ist allerdings bei diesem Trick die Lesbarkeit schlechter, dafür die Einstellung aber stufenlos möglich.

Mögliche Werte sind:

inherit: geerbt
100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900: genau eine der Zahlen ist anzugeben, eine kleine Zahl bedeutet ein kleines Gewicht, also ein 'mageres' Aussehen der Glyphen, eine große Zahl entsprechend ein großes Gewicht oder fette Glyphen.
normal: wie 400
bold: wie 700
bolder: es wird eine Zahl größer angenommen als die geerbte, 900 bleibt unverändert
lighter: es wird eine Zahl kleiner angenommen als die geerbte, 100 bleibt unverändert

Der Initialwert ist 'normal', die Eigenschaft wird vererbt und ist animierbar.
Je nach Schriftfamilie müssen nicht alle Gewichte verfügbar sein, es wird dann das dem angegebenen Wert am nächsten liegende verfügbare Gewicht gewählt.

Beispiel Schriftgewichtung
Die Schriftgewichtung wird für ein paar Zeilen Text wie angegeben notiert.

Schriftdehnung, font-stretch


SVG
1.1	1.7	-	-	-	-	?	?	ja

Die Eigenschaft font-stretch entscheidet darüber, ob die Darstellung von Text normal, komprimiert oder gedehnt dargestellt wird.

Mögliche Werte sind:

inherit: geerbt
normal: weder Dehnung noch Komprimierung
wider: gedehnter als geerbt
narrower: komprimierter als geerbt
ultra-condensed: maximal komprimiert
extra-condensed: stark komprimiert
condensed: komprimiert
semi-condensed: schwach komprimiert
semi-expanded: schwach gedehnt
expanded: gedehnt
extra-expanded: stark gedehnt
ultra-expanded: maximal gedehnt

Der Initialwert ist 'normal', die Eigenschaft wird vererbt und ist animierbar.
Die Eigenschaft ist in SVG tiny 1.1 und tiny 1.2 nicht verfügbar.

In der Reihenfolge steht 'normal' zwischen 'semi-condensed' und 'semi-expanded'. Mit den relativen Angaben wird jeweils zum nächsten Wert relativ zu geerbten gesprungen, es sei denn, es gibt in der Reihe keinen nächsten Wert mehr, dann wird der geerbte verwendet.

Beispiel Schriftdehnung
Die Schriftdehnung wird für ein paar Zeilen Text wie angegeben notiert.

Schriftanpassung, font-size-adjust


SVG
1.1	-	-	-	-	-	?	?	-

Anpassung des Aspektwertes eine Schrift (zu einer anderen). Die Höhe oder Größe von Glyphen aus verschiedenen Schriftarten kann verschieden ausfallen. Wird eine davon anders als bei der geerbten Schriftart gewählt oder bei einzelnen Glyphen als Alternative zur ersten Wahl verwendet, weil es für die Glyphe kein Zeichen in der ersten Schriftart gibt, so wird eine aus der Alternative genommen. Durch Angabe von font-size-adjust kann nun die Erscheinung der Alternative mit der ersten Wahl harmonisiert werden.

Mögliche Werte sind:

inherit: geerbt
none: beibehalten, nichts anpassen
Zahl: Aspektwert, sinnvollerweise größer als 0; 1 entspricht none, typische Werte liegen um 1 herum

Der Initialwert ist 'none', die Eigenschaft wird vererbbar und ist animierbar.
Die Eigenschaft ist in SVG tiny 1.1 und tiny 1.2 nicht verfügbar.

Der Aspektwert ist das Verhältnis der Höhen.
Sei c die anzuwendende Schriftgröße, a der Aspektwert der angegebenen Schrift (erste Wahl), a' der der Alternative, s die (für die erste Wahl) angegebene Schriftgröße, so ist
c = s (a/a')

Beispiel Schriftanpassung
Der Schriftgrößenanpassung wird für ein paar Zeilen Text wie angegeben notiert.

Es wird angenommen, dass die primär angegebene Schriftart 'Kukkuluttumuffiei' nicht verfügbar ist. Als Ersatz ist 'serif' angegeben. Entsprechend font-size-adjust ist die Schriftgröße zu skalieren. Dies ist mit einem dahinterliegenden roten Vergleich angedeutet. Entspricht die Schriftgröße nicht dem roten Vergleich, ist dies ein Hinweis auf einen Implementierungsfehler.

Schriftart, font


SVG
1.1	1.7	9	3	-	4	?	?	?

Die Eigenschaft font fast alle Eigenschaften zur Auswahl der Schriftart zusammen, die zuvor beschrieben wurde. Diese Eigenschaft kann nicht als Präsentationsattribut auftreten, allenfalls als Eigenschaft in CSS-Notation oder in einer Animation mit attributeType="CSS".

Die genaue Syntax ist der Spezifikation für CSS2.0 (!) zu entnehmen.
In Kurzschreibweise sieht der mögliche Wert wie folgt aus:
[ [ 'font-style' || 'font-variant' || 'font-weight' ]? 'font-size' [ / 'line-height' ]? 'font-family' ] | caption | icon | menu | message-box| small-caption | status-bar | inherit

'|' steht jeweils zwischen Alternativen, von denen genau eine gewählt werden muss. '||' steht jeweils zwischen Angaben, von denen mindestens eine gewählt werden muss. Werden mehrere gewählt, ist die Reihenfolge egal. Optionale Angaben sind mit einem '?' dahinter gekennzeichnet. Die eckigen Klammern dienen nur der Gruppierung.

Die Eigenschaft wird vererbt und ist animierbar. Der Initialwert ergibt sich aus denen der einzelnen Eigenschaften. Die ebenfalls angebbare Eigenschaft line-height hat auf Text in SVG keinen Einfluss, ebenfalls angebbare Optionen für Systemschriftarten brauchem vom Darstellungsprogramme nicht interpretiert werden.

Beispiel Schriftart
Die Eigenschaft font wird auf einen kurzen Beispieltext angewendet.

Der Text endet zudem mit drei Punkten, welche sich in einem tspan befinden, welches ein style-Attribut hat, mit welchem fill auf dunkelblau und stroke auf gelb festgelegt werden.

Layout-Eigenschaften

unicode-bidi


SVG
1.1	1.7	-	-	-	4	?	?	ja

Die Eigenschaft unicode-bidi ergibt die Möglichkeit, einen Bereich mit veränderter Schreibrichtung zu kennzeichnen. Generell wird die Schreibrichtung automatisch anhand der verwendeten Unicode-Zeichen bestimmt, diese Eigenschaft zusammen mit direction dienen dazu, gezielt davon abzuweichen, ist also eher für spezielle Problemfälle gedacht, nicht zur durchgehenden Anwendung.

Mögliche Werte:

inherit: geerbt
normal: keine Änderung oder besondere Aktion
embed: Öffnet einen neuen Bereich, in dem die Eigenschaft direction wirkt, entsprechend der Angabe zu direction wird zu Beginn und am Ende des Bereiches ein Richtungszeichen impliziert
bidi-override: Der automatische Algorithmus wird komplett ignoriert und die Reihenfolge erfolgt strikt nach der Angabe zu direction

Der Initialwert ist 'normal', die Eigenschaft wird nicht vererbt und ist nicht animierbar.
Die Eigenschaft ist in SVG tiny 1.1 nicht verfügbar.

direction


SVG
1.1	1.7	-	-	-	4	?	?	?

direction wird immer zusammen mit unicode-bidi verwendet und bestimmt die Schreibrichtung, beziehungsweise überschreibt gegebenenfalls die automatisch bestimmte Schreibrichtung und ist daher eher für Problemfälle gedacht, nicht zur durchgehenden Anwendung.

Mögliche Werte:

inherit: geerbt
ltr: von links nach rechts
rtl: von rechts nach links

Der Initialwert ist 'ltr', die Eigenschaft ist vererbbar und ist nicht animierbar.
Die Eigenschaft ist in SVG tiny 1.1 nicht verfügbar.

Beispiel zu unicode-bidi und direction
unicode-bidi und direction werden ausprobiert. Wo die Reihenfolge umgedreht wird, ist diese im Quelltext umgedreht, so dass der Text lesbar bleibt. Bei lateinischer Schrift ist bei 'embed' keine Umkehr zu erwarten, weil die Schreibrichtung wieder automatisch festgelegt wird. 'embed' sollte also nur bei Schrifen wirken, wo die Richtung nicht eindeutig festliegt.

writing-mode


SVG
1.1	1.7	9	-	-	-	?	?	?

Die Eigenschaft writing-mode ist spezifisch für das Element text in der Vollversion von SVG 1.1 und bestimmt die Schreibrichtung. Innerhalb von anderen Textelementen wie tspan ist die Eigenschaft nicht anwendbar, dort sind dann gegebenenfalls unicode-bidi und direction zu verwenden, um besondere Probleme zu beheben.

Mögliche Werte:

inherit: geerbt
lr-tb: übliche Schreibrichtung für lateinische Schriften, zeilenweise von links nach rechts und die nächste Zeile darunter
lr: übliche Schreibrichtung für lateinische Schriften, von links nach rechts
rl-tb: übliche Schreibrichtung für arabische oder häbräische Schriften, zeilenweise von rechts nach links und die nächste Zeile darunter
rl: übliche Schreibrichtung für arabische oder häbräische Schriften, von rechts nach links
tb-rl: übliche Schreibrichtung für chinesische oder japanische Schriften, zeilenweise von oben nach unten, die nächste Zeile rechts daneben
tb: übliche Schreibrichtung für chinesische oder japanische Schriften von oben nach unten

Der Initialwert ist 'lr-tb', die Eigenschaft wird vererbt und ist nicht animierbar.

Da es keine dem W3C bekannten Kulturen gibt, die von unten nach oben schreiben oder im Kreis oder auf Spiralen etc, gibt es dafür auch keine weiteren Werte. Gegebenenfalls ist das dann mit Tricks indirekt zu realisieren, wenn es notwendig ist.
Da SVG 1.1 auch keinen automatischen Zeilenumbruch kennt, gibt es da hinsichtlich der Unterschiede für den Zeilenvorschub auch keinen Unterschied zwischen den Kurz- und Langversionen der Werte. Dies kann indes einen Effekt haben, wenn eine alternative Textversion des Dokumentes erstellt werden soll, entweder direkt vom Darstellungsprogramm oder auch durch eine Transformation in ein anderes Format. Das betreffende Programm könnte einen solchen Hinweis auswerten und den Text mit der gewünschten Zeilenfortschrittsrichtung darstellen.

Beispiel zu writing-mode
Der writing-mode wird für ein paar Zeilen Text wie angegeben notiert.

Der Textanker ist auf end gesetzt und wird als grüner Punkt angedeutet. Weil sich bei lateinischen Glyphen bei horizontaler Textausrichtung die Richtung automatisch ergibt, ist dort die Textrichtung nicht umgedreht, aber die Wirkung von text-anchor end.

glyph-orientation-vertical


SVG
1.1	1.7	-	-	-	-	?	?	-

Die Glyphen eines Textes können in einer bestimmten Weise orientiert werden (nur in der Vollversion SVG 1.1). glyph-orientation-vertical bestimmt die Orientierung, wenn die Schreibrichtung vertikal ist.

Mögliche Werte sind:

inherit: geerbt
auto: automatisch bestimmen
Winkel: Winkel in Grad

Die Winkelangabe beschränkt sich auf die Werte 0, 90, 180, und 270 und ist in Grad gemeint. Andere Werte werden zum nächsten zulässigen Winkel gerundet. Angaben zur Rundung von 45, 135 und 225 liegen nicht vor, das scheint eine Lücke in der Spezifikation zu sein.

Die Winkelangabe versteht sich immer relativ zur Referenzrichtung, die ohne die Angabe des Attributes vorläge und ist in Uhrzeigerrichtung gemeint.

Der Initialwert ist 'auto', die Eigenschaft wird vererbt, ist aber nicht animierbar.

glyph-orientation-horizontal


SVG
1.1	1.7	-	-	-	-	?	?	-

Die Glyphen eines Textes können in einer bestimmten Weise orientiert werden (nur in der Vollversion SVG 1.1). glyph-orientation-horizontal bestimmt die Orientierung, wenn die Schreibrichtung horizontal ist.

Mögliche Werte sind:

inherit: geerbt
Winkel: Winkel in Grad

Die Winkelangabe beschränkt sich auf die Werte 0, 90, 180, und 270 und ist in Grad gemeint. Andere Werte werden zum nächsten zulässigen Winkel gerundet. Angaben zur Rundung von 45, 135 und 225 liegen nicht vor, das scheint eine Lücke in der Spezifikation zu sein.

Die Winkelangabe versteht sich immer relativ zur Referenzrichtung, die ohne die Angabe des Attributes vorläge und ist in Uhrzeigerrichtung gemeint.

Der Initialwert ist '0', die Eigenschaft wird vererbt, ist aber nicht animierbar.

Beispiel zu glyph-orientation-horizontal und glyph-orientation-vertical
glyph-orientation-* wird für ein paar Zeilen Text wie angegeben notiert. Der Textanker ist auf middle gesetzt und wird als grüner Punkt angedeutet.

Eigenschaften zur Textanordnung

Textanker, text-anchor


SVG
1.1	1.7	9	3	3.2	4	?	?	ja

Mit der Eigenschaft text-anchor kann angegeben werden, wie die Positionsangaben eines absolut positionierten Textsegmentes im Detail zu verstehen sind.

Mögliche Werte sind:

inherit: geerbt
start: Der Anfang des Textsegmentes ist bei der aktuellen Textposition.
end: Das Ende des Textsegmentes ist bei der aktuellen Textposition.
middle: Das Textsegment wird so angeordnet, dass die Mitte an der aktuellen Textposition erscheint.

Der Initialwert ist 'start', die Eigenschaft wird vererbt und ist animierbar.

Die Eigenschaft erleicht die Anordnung von Text relativ zu anderen Objekten, ohne dass es erforderlich wäre, die genaue Länge des Textes zu kennen. Mit dieser Eigenschaft kann einfach links oder rechts von einem Objekt Text angeordnet werden, wobei die aktuelle Textposition sich weiter vom Objekt entfernt, also es nicht überschreibt. Mit 'middle' kann der Text auch einfach mittig zu einem Objekt (darunter, darüber, darin) angeordnet werden, ohne die genaue Länge des Textsegmentes kennen zu müssen.

Beispiel text-anchor
Der Textanker wird für ein paar Zeilen Text wie angegeben notiert. Der Textanker selbst ist als grüner Punkt angedeutet.

Beispiel text-anchor (2)
Der Textanker wird für ein paar teils einzeln angeordnete Glyphen wie angegeben notiert. Der Textanker selbst ist als grüner Punkt angedeutet.

Beispiel text-anchor und tspan
Der Textanker wird für Teile des Begriffes 'text-anchor' in mehreren Elementen tspan wie angegeben notiert. Der Textanker selbst ist als grüner Punkt angedeutet.

Beispiel text-anchor und textPath
Der Textanker wird für etwas Text wie angegeben notiert. Der Text wird mit textPath angeordnet. Die Kombination mit dem Wert von startOffset entscheidet über die Anordnung des Textes entlang des jeweiligen Pfades. Der Textanker selbst ist als grüner Teil des Pfades angedeutet.

Für 'start' beginnt der Text um den Wert von startOffset im Pfad verschoben.

Für 'middle' beginnt der Pfad verschoben um startOffset minus der halben Textlänge. Für ein startOffset von 50% ergibt sich also eine mittige Anordnung des Textes relativ zum Pfad.

Für 'end' beginnt der Pfad verschoben um startOffset minus der ganzen Textlänge. Für ein startOffset von 100% ergibt sich also eine Anordnung des Textes am Ende des Pfades, so dass also das Ende des Textes mit dem des Pfades zusammenfällt.

Grundlinie, dominant-baseline


SVG
1.1	-	-	-	-	-	?	?	-

In verschiedenen Kulturen oder auch Anwendungsgebieten für Schrift gibt es verschiedene Ideen, wo die Grundlinie relativ zu den Glyphen verlaufen sollte. Schriftfamilien haben oft Tabellen, in denen für die jeweilige Schrift angegeben ist, wo für welche Art von Anwendung die Grundlinie anzunehmen ist.
Mit der Eigenschaft dominant-baseline kann die Wahl der Grundlinie beeinflusst werden.
Für Details über die Tabellen und die verschiedenen Modelle für Schriften in verschiedenen Kulturen sei auf die entsprechende Fachliteratur verwiesen.

Mögliche Werte sind:

inherit: geerbt
auto: automatisch bestimmen
use-script: Ein Skript oder writing-mode wird verwendet, um die Grundlinie zu bestimmen
no-change: Verwendung der Angaben des Text-Elternelementes
reset-size: Skalierung der Grundlinientabelle relativ zur font-size
ideographic: Verwendung des ideographischen Modells, typisch für chinesich, japanisch, koreanisch oder vietnamesisch
alphabetic: Verwendung des alphabetische Modells, typisch für alphabetische Schriften
hanging: Verwendung des hängenden Modells, typisch für einige indische Schriften wie bengalisch, Gurmukhi, Devanagari
mathematical: Für mathematische Symbole
central: Mittig zur em-Zelle
middle: Um eine halbe x-Höhe relativ zur alphabetischen Grundlinie verschoben
text-after-edge: Endecke der em-Zelle
text-before-edge: Anfangsecke der em-Zelle

Der Initialwert ist 'auto', die Eigenschaft wird nicht vererbt und ist animierbar. Die Eigenschaft ist verfügbar in der Vollversion von SVG 1.1.

Beispiel dominant-baseline
dominant-baseline wird für ein paar Zeilen Text wie angegeben notiert.

Relative Anordnung der Grundlinie, alignment-baseline


SVG
1.1	-	-	-	-	-	?	?	-

Die Eigenschaft gibt die Grundlinienposition relativ zum Elternelement an und ist anwendbar auf die Elemente tspan, tref, altGlyph, textPath.

Mögliche Werte sind:

inherit: geerbt
auto: automatisch bestimmen
baseline: wie beim Elternelement
before-edge: Anfangsecke der em-Zelle
text-before-edge: Anfangsecke der em-Zelle
after-edge: Endecke der em-Zelle
text-after-edge: Endecke der em-Zelle
ideographic: Verwendung des ideographischen Modells, typisch für chinesich, japanisch, koreanisch oder vietnamesisch
alphabetic: Verwendung des alphabetische Modells, typisch für alphabetische Schriften
hanging: Verwendung des hängenden Modells, typisch für einige indische Schriften wie bengalisch, Gurmukhi, Devanagari
mathematical: Für mathematische Symbole
central: Mittig zur em-Zelle
middle: Um eine halbe x-Höhe relativ zur alphabetischen Grundlinie verschoben

Der Initialwert ist 'auto', die Eigenschaft wird nicht vererbt und ist animierbar. Die Eigenschaft ist verfügbar in der Vollversion von SVG 1.1.

Beispiel alignment-baseline
alignment-baseline wird für ein paar Zeilen Text wie angegeben notiert.

Verschiebung der Grundlinie, baseline-shift


SVG
1.1	1.7	9.5	-	3.2	-	?	?	-

Beispiel baseline-shift

baseline-shift dient dazu, die Grundlinie für Text zu verschieben, zum Beispiel, um einen Index oder einen Exponenten zu schreiben. Die Grundlinie bezieht sich auf das umgebende Elternelement, wo diese auch bereits mit der Eigenschaft verschoben sein darf. Die Eigenschaft ist anwendbar für die Elemente tspan, tref, altGlyph, textPath
Die Eigenschaft ist nicht in SVG tiny 1.1 oder tiny 1.2 verfügbar.

Mögliche Werte sind:

inherit: geerbt
baseline: Grundlinie, unverschoben
sub: Index, tiefergestellt, also nach unten verschoben
super: Exponent, hochgestellt, also nach oben verschoben
Prozentangabe: bezieht sich auf die Schrifthöhe, positiv bei lateinischer Schrift nach oben, 0% ist die Grundlinie
Längenangabe: Absolute Angabe der Verschiebung, positiv bei lateinischer Schrift nach oben, 0 ist die Grundlinie

Der Initialwert ist baseline. Die Eigenschaft wird nicht vererbt und ist animierbar.

Beispiel baseline-shift
Anhand des Integrals zur Bestimmung der Weglänge eines Pfades wird die Verwendung der Eigenschaft baseline-shift gezeigt.

Eigenschaften zum Glyphenabstand

Unterschneidung, kerning


SVG
1.1	1.7	-	-	-	-	?	?	-

Mit der Eigenschaft kerning wird ein Bereich der Typographie behandelt, bei dem es um den Abstand zwischen Glyphen (eines Wortes oder einer Abkürzung) geht, wobei dieser Abstand davon abhängig gemacht wird, welche Glyphen benachbart sind.
Ohne Unterschneidung hat jede Glyphe eine eigene (rechteckige) Zelle. Wird aus Glyphen ein Wort gebildet, werden diese Zellen aneinandergereiht.

Je nachdem, welche Buchstaben nebeneinanderstehen, ergibt das manchmal recht große weiße Flächen zwischen den Glyphen, die sich störend auf den Lesefluss auswirken. Zum Beispiel bei den Kombinationen WA, VA, TJ oder LT zu erkennen. Bei einer anderen Kombination wie WV, UH, XZ oder HL treten hingegen keine großen weißen Flächen auf. Je nach Schriftart kann es also Tabellen geben, die angeben, bei welcher Kombination von zwei Buchstaben jeweils wie viel freier Raum zwischen den beiden eingespart werden kann.

Mit der Eigenschaft kerning kann nun dies Verhalten an- oder abgeschaltet werden.

Folgende Wert sind möglich:

inherit: geerbt
auto: Sofern vorhanden, wird die zur Schriftart gehörige Tabelle verwendet
Längenangabe: Die zur Schriftart gehörige Tabelle wird nicht verwendet, die angegebene Länge verlängert (positiver Wert) oder verkürzt (negativer Wert) die Zelle der Glyphe.

Der Initialwert ist 'auto', die Eigenschaft wird vererbt und ist animierbar.
Die Eigenschaft ist nicht in SVG tiny 1.1 oder tiny 1.2 verfügbar.

Beispiel kerning
kerning wird für eine Phantasiezeichenfolge 'AYAv Taffljipj Kv' wie angegeben notiert.

Glyphenabstand, letter-spacing


SVG
1.1	1.7	9	-	3.2	4	?	?	ja

Zusätzlich zur Unterschneidung kann mittels letter-spacing eine Angabe zum Abstand zwischen Glyphen notiert werden.

Mögliche Werte sind:

inherit: geerbt
normal: Der Abstand ergibt sich aus den Angaben der Schriftart
Längenangabe: Die angegebene Länge wird zur Unterschneidung addiert. Auch negative Werte sind zulässig.

Der Initialwert ist 'normal', die Eigenschaft wird vererbt und ist animierbar.
Die Eigenschaft ist nicht in SVG tiny 1.1 oder tiny 1.2 verfügbar.

Beispiel letter-spacing
letter-spacing wird für eine Phantasiezeichenfolge 'AYAv Taffljipj Kv' wie angegeben notiert. Zwei weitere Beispiele sind zur Kombination mit kerning ergänzt.

Wortabstand, word-spacing


SVG
1.1	1.7	9	-	3.2	4	?	?	?

Zur besseren Lesbarkeit wird zwischen verschiedenen Wörtern ein Leerzeichen eingefügt. Mit der Eigenschaft word-spacing kann festgelegt werden, wie groß solch ein Abstand zwischen zwei Wörtern dargestellt werden soll.

Mögliche Werte sind:

inherit: geerbt
normal: Der Abstand ergibt sich aus den Angaben der Schriftart
Längenangabe: Die angegebene Länge wird zur Unterschneidung addiert. Auch negative Werte sind zulässig.

Der Initialwert ist 'normal', die Eigenschaft wird vererbt und ist animierbar.
Die Eigenschaft ist nicht in SVG tiny 1.1 oder tiny 1.2 verfügbar.

Beispiel word-spacing
word-spacing wird für ein paar Wörter wie angegeben notiert. Zwei weitere Beispiele sind zur Kombination mit letter-spacing ergänzt.

Eigenschaft zur Textdekoration

text-decoration


SVG
1.1	1.7	9	-	3.2	4	?	?	ja

Die Eigenschaft text-decoration dient dazu, Text zu dekorieren, mit Strichen unter oder über dem Text oder durchgestrichenem Text oder einem (optionalen) Blinken.

Mögliche Werte sind:

inherit: geerbt
none: keine Dekoration
underline: unterstrichen
overline: 'überstrichen', also ein Strich über dem Text
line-through: durchgestrichen (mittig)
blink: blinkend; dies ist allerdings optional, es ist nicht notwendig, dass ein Darstellungsprogramm dies interpretiert, wenn nicht, ist der Effekt der gleiche wie für 'none'

Der Initialwert ist 'none', die Eigenschaft wird nicht vererbt und ist animierbar. Hinsichtlich der Vererbung gilt allerdings, dass falls bei einem Element text notiert, die Dekoration auf den gesamten Text angewendet wird, also zum Beispiel auf alle Elemente tspan, tref, textPath darin, sofern bei diesen nicht anders angegeben ist. Entsprechendes gilt, wenn die Eigenschaft für tspan oder textPath gesetzt ist und darin kommen weitere Elemente wie tspan.
Ist die Eigenschaft hingegen bei einem umgebenden Element g gesetzt, so vererbt sich die Eigenschaft nur, wenn text-decoration explizit auf 'inherit' gesetzt ist.

Füll- und Stricheigenschaften, die für den Text gelten, gelten auch für die graphischen Repräsentationen, welche durch text-decoration hinzukommen.

Die Eigenschaft ist in SVG tiny 1.1 und tiny 1.2 nicht verfügbar.

Beispiel text-decoration
Die Textdekoration wird für ein paar Zeilen Text wie angegeben notiert. Derzeit (Ende 2009) haben offenbar einige Darstellungsprogramme mit der Vererbung dieser Eigenschaft. Sofern keine Implementierungsfehler aufgedeckt werden sollen, kann es also vorteilhaft sein, diese Eigenschaft nur direkt im betroffenen Element zu setzen.

Wiedergabeeigenschaften


SVG
?	?	?	?	?	?	?	?	-

Farbinterpolation, color-interpolation

Mit der Eigenschaft color-interpolation kann angegeben werden, wie bei Animationen, Teildurchsichtigkeiten oder Farbverläufen zwischen den angegebenen Werten interpoliert werden soll.

Verfügbar sind Interpolationen im Standard-Farbraum (sRGB) und in einem linearisierten Farbraum (linearRGB). Die Umrechnung erfolgt gemäß der folgenden Regeln für die drei Farbkanäle R, G, B:

R[sRGB] = R[sRGB-8bit] / 255 G[sRGB] = G[sRGB-8bit] / 255 B[sRGB] = B[sRGB-8bit] / 255

Falls R[sRGB], G[sRGB] oder B[sRGB] kleiner oder gleich 0.04045 ist, gilt: R[linearRGB] = R[sRGB] / 12.92 G[linearRGB] = G[sRGB] / 12.92 B[linearRGB] = B[sRGB] / 12.92 sonst falls R[sRGB], G[sRGB] oder B[sRGB] größer als 0.04045 ist, gilt: R[linearRGB] = ((R[sRGB] + 0.055) / 1.055) ^ 2.4 G[linearRGB] = ((G[sRGB] + 0.055) / 1.055) ^ 2.4 B[linearRGB] = ((B[sRGB] + 0.055) / 1.055) ^ 2.4

R[linearRGB-8bit] = R[linearRGB] * 255 G[linearRGB-8bit] = G[linearRGB] * 255 B[linearRGB-8bit] = B[linearRGB] * 255

Beachtenswert ist jedenfalls, dass der Standardfarbraum und auch sonstige übliche Farbräume nicht den gesamten sichtbaren Bereich des Spektrums abdecken, sondern nur einen mehr oder weniger großen Teil. Ohne Kalibrierung kann die Darstellung von Farben auf verschiedenen Monitoren oder mit verschiedenen Druckern auch deutlich variieren. Die Vollversion von SVG 1.1 bietet durchaus auch die Möglichkeit, ein anderes Farbprofil anzugeben, nicht jedoch diese Eigenschaft zur Interpolation.

Mögliche Werte für color-interpolation sind:

inherit: geerbt
auto: Das Darstellungsprogramm kann selbst entscheiden, dem Autor ist es egal
sRGB: Interpolation erfolgt im Standard-Farbraum
linearRGB: Interpolation erfolgt im linearisierten Farbraum

Der Initialwert ist 'sRGB', die Eigenschaft wird vererbt und ist animierbar. Die Eigenschaft ist in SVG tiny 1.1 und tiny 1.2 nicht verfügbar.


SVG
?	?	?	?	?	?	?	?	-

Farbinterpolation für Filter, color-interpolation-filters

Speziell für die SVG-Filter gibt es eine eigene Eigenschaft zur Farbinterpolation color-interpolation-filters. Diese hat die gleichen möglichen Werte wie color-interpolation.

Der Initialwert ist allerdings 'linearRGB', die Eigenschaft wird ebenfalls vererbt und ist animierbar.
Die Eigenschaft ist in SVG tiny 1.1 und tiny 1.2 nicht verfügbar.


SVG
?	?	?	?	?	?	?	?	-

Farbwiedergabe, color-rendering

Je nachdem, ob Qualität oder Geschwindigkeit wichtig ist, kann ein Autor mittels der Eigenschaft color-rendering einen entsprechenden Hinweis geben.

Mögliche Werte sind:

inherit: geerbt
auto: Mit leicht größerer Gewichtung der Qualität soll das Darstellungsprogramm selbst ein Optimum zwischen Qualität und Geschwindigkeit finden.
optimizeSpeed: Geschwindigkeit ist wichtiger als Qualität. Interpolation kann im eigenen Farbraum stattfinden.
optimizeQuality: Qualität ist wichtiger als Geschwindigkeit.

Der Initialwert ist 'auto', die Eigenschaft wird vererbt und ist animierbar.


SVG
?	?	?	?	?	?	?	?	ja

Formwiedergabe, shape-rendering

Einmal abgesehen von den generellen Mindestanforderungen an die Genauigkeit der Darstellung kann ein Darstellungsprogramm auch noch höhere Genauigkeit bieten. Mittels shape-rendering kann ein Autor einen entsprechenden Hinweis geben, ob Geschwindigkeit oder Qualität wichtig ist.

Mögliche Werte sind:

inherit: geerbt
auto: Mit leicht größerer Gewichtung der geometrischen Präzision soll das Darstellungsprogramm selbst ein Optimum zwischen Qualität und Geschwindigkeit finden.
optimizeSpeed: Geschwindigkeit ist wichtiger als Qualität, also zum Beispiel eher keine Kantenglättung.
crispEdges: Ein hoher Kontrast soll erreicht werden, gegebenenfalls auch indem nahezu horizontale und vertikale Linien entsprechend der Auflösung des Anzeigegerätes gerade ausgerichtet werden, Kantenglättung kann abgeschaltet werden.
geometricPrecision: Geometrische Präzision ist wichtiger als hoher Kontrast oder hohe Geschwindigkeit.

Der Initialwert ist 'auto', die Eigenschaft wird vererbt und ist animierbar.
Die Eigenschaft ist in SVG tiny 1.1 nicht verfügbar.


SVG
?	?	?	?	?	?	?	?	ja

Textwiedergabe, text-rendering

Ein Hinweis zur Qualität von als Graphik wiedergegebenem Text kann mit der Eigenschaft text-rendering erfolgen.

Mögliche Werte sind:

inherit: geerbt
auto: Mit leicht größerer Gewichtung der geometrischen Präzision soll das Darstellungsprogramm selbst ein Optimum zwischen Qualität und Geschwindigkeit finden.
optimizeSpeed: Geschwindigkeit ist wichtiger als Qualität, also zum Beispiel eher keine Kantenglättung.
optimizeLegibility: Gute Lesbarkeit soll erreicht werden Kantenglättung kann abgeschaltet werden und bei mehreren verfügbaren Schriftarten die am besten lesbare gewählt werden.
geometricPrecision: Geometrische Präzision ist wichtiger als gute Lesbarkeit oder hohe Geschwindigkeit.

Der Initialwert ist 'auto', die Eigenschaft wird vererbt und ist animierbar.
Die Eigenschaft ist in SVG tiny 1.1 nicht verfügbar.


SVG
?	?	?	?	?	?	?	?	-

Bildwiedergabe, image-rendering

Oftmals wird in SVG auch Pixelgraphik zusammen mit dem anderen Inhalt skaliert oder sonstwie weiterverarbeitet. Mit der Eigenschaft image-rendering kann der Autor einen Hinweis geben, was dabei wichtig ist.

Mögliche Werte sind:

inherit: geerbt
auto: Mit leicht größerer Gewichtung der Qualität soll das Darstellungsprogramm selbst ein Optimum zwischen Qualität und Geschwindigkeit finden.
optimizeSpeed: Geschwindigkeit ist wichtiger als Qualität. Interpolation kann im eigenen Farbraum stattfinden.
optimizeQuality: Qualität ist wichtiger als Geschwindigkeit.

Der Initialwert ist 'auto', die Eigenschaft wird vererbt und ist animierbar.
Die Eigenschaft ist in SVG tiny 1.1 nicht verfügbar.


SVG
?	?	?	?	?	?	?	?	-

Zwischenspeicher und Wiedergabe, buffered-rendering

Für länger unverändert bleibende Bereiche eines Dokumentes kann es sich für das Darstellungsprogramm lohnen, diese zwischenzuspeichern. Der Autor kann mit der Eigenschaft buffered-rendering einen Hinweis geben, ob sich dies lohnt oder nicht.

Mögliche Werte sind:

inherit: geerbt
auto: Das Darstellungsprogramm sollte selbst ein Optimum zwischen Geschwindigkeit und optimaler Speicherverwaltung finden.
dynamic: Der betroffene Bereich wird häufig verändert.
static: Der betroffene Bereich wird nicht häufig verändert, eine Zwischenspeicherung kann sich lohnen.

Der Initialwert ist 'auto' die Eigenschaft wird nicht vererbt und ist animierbar.
Die Eigenschaft ist in SVG 1.1 nicht verfügbar.

Eigenschaften zur Interaktivität

Zeigerereignisse, pointer-events


SVG
1.1	1.7	9	3.5	-	-	?	?	-

Beispiel zu *pointer-events* (SVG tiny 1.2)

Je nach Anwendung kann der Autor entscheiden, welche Elemente Ziel von Ereignissen sein können. Dies kann mit der Eigenschaft pointer-events angegeben werden.

Mögliche Werte sind:

inherit: geerbt
none: as Element kann nicht Ziel eines Ereignisses sein.
visiblePainted: Sichtbar gemalt, also fill beziehungsweise stroke nicht auf 'none' und visibility auf 'visible', was in dem Sinne sichtbar ist, kann Ziel eines Ereignisses sein.
visibleFill: Füllung sichtbar, also visibility auf 'visible', dann kann die Füllung (egal mit welchem Wert) Ziel eines Ereignisses sein.
visibleStroke: Strich sichtbar, also visibility auf 'visible', dann kann der Strich (egal mit welchem Wert) Ziel eines Ereignisses sein.
visible: sichtbar, also visibility auf 'visible', dann können Füllung oder Strich (egal mit welchem Wert) Ziel eines Ereignisses sein.
painted: gemalt, also fill beziehungsweise stroke nicht auf 'none', was in dem Sinne sichtbar ist, kann Ziel eines Ereignisses sein. Der Wert von visibility ist egal.
fill: Die Füllung kann Ziel eines Ereignisses sein. Die Werte von fill und visibility sind egal.
stroke: Der Strich kann Ziel eines Ereignisses sein. Die Werte von stroke und visibility sind egal.
all: Das Element kann Ziel eines Ereignisses sein. Die Werte von fill, stroke und visibility sind egal.
boundingBox: Das Element kann Ziel eines Ereignisses sein, wenn der Zeiger über der umgrenzenden Zelle des Elementes ist. Dies ist im lokalen Koordinatensystem das kleinste entlang der lokalen x- und y-Achsen ausgerichtete Rechteck, welches das Element umschließt (ist die Höhe oder Breite des Elementes 0, gibt es solch eine Zelle nicht, sonst schon). Dieser Wert ist in SVG tiny 1.2 verfügbar, nicht in SVG 1.1.

Der Initialwert ist 'visiblePainted', die Eigenschaft wird vererbt und ist animierbar.
Die Eigenschaft ist nicht verfügbar in SVG tiny 1.1.

Zu beachten ist dabei, dass Angaben zur Durchsichtigkeit keinen Einfluss auf die Auswertung von Zeigerereignissen haben. Auch komplett durchsichtige Elemente können also Ziel von Ereignissen sein.
Da ferner im Malermodell obenliegende Elemente die Ereignisse abfangen, erreichen diese darunterliegende Elemente nicht. Ein durchsichtiges, obenliegendes Element kann also verhindern, dass darunterliegende Elemente Ziel von Ereignissen werden, obgleich sie sichtbar sein mögen.

Für Pixelbilder sind die Werte 'visibleFill', 'visibleStroke' und 'visible' als gleich anzusehen.
Ebenso sind für Pixelbilder 'fill', 'stroke' and 'all' als gleich anzusehen.
Hinsichtlich der Durchsichtigkeit gelten für Pixelbilder allerdings etwas andere Regeln als für sonstige Elemente. Voll durchsichtige Pixel nehmen eine Sonderrolle ein. Solche Pixel gelten in diesem Sinne als nicht gemalt und nicht sichtbar.

Beispiel zu pointer-events (SVG tiny 1.2)
Ein Pfad mit sechzähliger diskreter Drehsymmetrie und mit Überschneidungen dient als Testelement zum Ausprobieren des Verhaltens von pointer-events.

In der Auswahl kann durch Klicken oder Aktivieren bestimmt werden, ob und wie der Pfad dargestellt wird. Auf der anderen Seite gibt es eine weitere Auswahl für pointer-events.

Ein erfolgreiches Ereignis ('mouseover' und 'mouseout' des Pfades selbst) ergibt eine einfache Farbanimation des dahinterliegenden Kreises.

Der anfängliche und geerbte Wert für pointer-events ist hier 'all'.

Test zu pointer-events
Die kleinen Quadrate sind alle so aufgebaut, dass sie aus verschiedenen Gründen selbst nicht Ziel von Ereignissen sein können (einmal abgesehen von einigen blauen Rändern). Klicken oder aktivieren hat also immer eine Aktivierung einer Farbanimation des großen blauen Quadrates zur Folge.

pointer-events und Bilder
Ein referenziertes, teilweise transparentes PNG-Bild wird verwendet, um pointer-events bei einem Bild zu testen.

Bei den hellgrün hinterlegten Quadraten führt ein Klick oder eine Aktivierung immer zu einem Start einer einfachen Farbanimation des Quadrates. Bei den hellgelb hinterlegten Quadraten führt ein Klick oder eine Aktivierung zu einem Start einer einfachen Farbanimation des Quadrates, wenn ein komplett transparenter Bereich Ereigniszieles ist. Bei den rosa hinterlegten Quadraten führt ein Klick oder eine Aktivierung nicht zu einem Start einer einfachen Farbanimation des Quadrates.

pointer-events und Text
Ein referenzierter Text wird verwendet, um pointer-events bei einem Text zu testen.

Bei Text erfolgt die Erfassung eines Ereignisses auf Basis der Zelle eines Glyphen. Eine Differenzierung zwischen Füllung und Strich oder innen und außen findet nicht statt.

Bei den hellgrün hinterlegten Quadraten führt ein Klick oder eine Aktivierung immer zu einem Start einer einfachen Farbanimation des Quadrates. Bei den hellgelben nur am Rand des Quadrates außerhalb der Zelle eines Glyphen.

Positionsmarke, cursor

Mit der Eigenschaft cursor kann das Markierungssymbol für die Position eine Zeigegerätes wie einer Maus ausgewählt werden.

Mögliche Werte sind:

inherit: geerbt
auto: Das Darstellungsprogramm bestimmt das Aussehen je nach aktueller Situation
crosshair: Fadenkreuz, ähnlich einem '+'
default: Voreinstellung des Darstellungsprogrammes, of ein Pfeil
pointer: Zeiger, der auf einen Verweis hindeutet
move: Zeigt an, dass etwas bewegt wird
e-resize: Größenänderung nach rechts
w-resize: Größenänderung nach links
n-resize: Größenänderung nach oben
s-resize: Größenänderung nach unten
ne-resize: Größenänderung nach oben-rechts
nw-resize: Größenänderung nach oben-links
se-resize: Größenänderung nach unten-rechts
sw-resize: Größenänderung nach unten-links
text: Zeigt an, dass Text ausgewählt werden kann, oft ähnlich '|'
wait: Zeigt an, dass das Programm beschäftigt ist und abgewartet werden soll, oft eine Uhr oder eine Sanduhr
help: Zeigt an, dass Hilfe zum betreffenden Objekt verfügbar ist, häufig ein Fragezeichen
URI-Liste und Ersatzwert: Eine Liste von eigenen Symbolen kann angegeben werden, einschließlich eines Ersatzes in Form einer der anderen vorherigen Werte

Der Initialwert ist 'auto', die Eigenschaft wird vererbt und ist animierbar. Die Eigenschaft ist nicht in SVG tiny 1.1 oder tiny 1.2 verfügbar.

Die Angabe mit einer URI-Liste sieht zum Beispiel so aus:
cursor='url("Zeiger.svg#Hilfe"), url("HilfeZeiger.svg"), url("HilfeZeiger.cur"), url("HilfeZeiger.csr"), url("HilfeZeiger.gif"), url("HilfeZeiger.png"), url("HilfeZeiger.jpeg"), help'

Der jeweiligen URI voran geht also die Zeichenkette 'url(' und hinter der URI folgt das Zeichen ')' - dazwischen steht die URI, gegebenenfalls in doppelten oder einfachen Anführungszeichen. Es handelt sich um eine mit Kommata separierte Liste mit zusätzlichem optionalen Leerraum.

Wenn die erste Wahl nicht darstellbar ist, wird die zweite genommen und so weiter bis zuletzt eines der generischen Symbole angeben ist, für welches immer eine Darstellung möglich sein sollte. Da ein Darstellungsprogramm für SVG immer auch SVG-Dokumente oder Fragmente darstellen können sollte, ebenso wie PNGs oder JPEGs, sollten diese Alternativen eigentlich immer funktionieren. Indes, es gibt Implementierungslücken, weswegen auch die Angabe exotischerer Formate hilfreich sein kann.

Mittels des SVG-Elementes cursor kann plattformunabhängig ein Symbol definiert werden, welches von einem SVG-Darstellungsprogramm interpretiert werden muss.

Beispiel:

 <circle cx="50" cy="50"  r="50" fill="red" cursor="crosshair" />
 <circle cx="50" cy="150" r="50" fill="blue" cursor="hand" />
 <circle cx="50" cy="250" r="50" fill="green" cursor="wait" />

 <circle cx="150" cy="50"  r="50" fill="Cyan" cursor="help" />
 <circle cx="150" cy="150" r="50" fill="Fuchsia" cursor="text" />
 <circle cx="150" cy="250" r="50" fill="Gold" cursor="move" />

 <circle cx="250" cy="50"  r="50" fill="Indigo" cursor="n-resize" />
 <circle cx="250" cy="150" r="50" fill="Khaki" cursor="s-resize" />
 <circle cx="250" cy="250" r="50" fill="Lavender" cursor="e-resize" />

 <circle cx="350" cy="50"  r="50" fill="Lime" cursor="w-resize" />
 <circle cx="350" cy="150" r="50" fill="MidnightBlue" cursor="ne-resize" />
 <circle cx="350" cy="250" r="50" fill="Olive" cursor="se-resize" />

 <circle cx="450" cy="50"  r="50" fill="Navy" cursor="sw-resize" />
 <circle cx="450" cy="150" r="50" fill="SeaGreen" cursor="auto" />
 <circle cx="450" cy="250" r="50" fill="Yellow" cursor="default" />

Stilvorlagen

Wie bereits erwähnt, können in der Vollversion von SVG 1.1 auch Stilvorlagen eingesetzt werden.

Zum einen können dafür Stilvorlagenverarbeitungsanweisungen verwendet werden. Dann können innerhalb des Elementes auch Stilvorlagen innerhalb des Elementes style notiert werden. Wie bereits erwähnt, wenig zu empfehlen ist der Einsatz des Attributes style, auch können darin keine Selektoren oder Pseudoklassen notiert werden.
Wenn ein Darstellungsprogramm allerdings überhaupt die Angabe von Stilvorlagen interpretiert, dann auch alle Möglichkeiten, diese zu notieren. Es liegt also zum Beispiel eine fehlerhafte Implementierung vor, wenn Angaben im Attribut style interpretiert würden, nicht aber solche in externen Stilvorlagen.

Ähnlich wie für (X)HTML definiert SVG auch für das Attribut class eine Sonderrolle bezüglich der CSS-Notation. Eine vereinfachte Notation wie zum Beispiel circle.nr1 für einen Kreis mit einem Attribut class, in dessen Wertliste eine Klasse 'nr1' notiert ist, ist also zulässig. Die allgemeine CSS-Schreibweise dazu ist entsprechend circle[class~="nr1"].
Auch andere Selektoren von CSS 2.0(!) können für SVG-Dokumente in der Vollversion 1.1 verwendet werden.

Einbindung externer Stilvorlagen mit Stilvorlagenverarbeitungsanweisungen

Eine SVG-Datei mit externen Stilvorlagen könnte zum Beispiel so aussehen:

<?xml version="1.0" encoding="UTF-8" ?> 
<?xml-stylesheet href="css1.css" type="text/css" title="Stil 1" 
   alternate="yes" media="all" ?>
<?xml-stylesheet href="css2.css" type="text/css" title="Stil 2"
   alternate="yes" media="all" ?>
<?xml-stylesheet href="css0.css" type="text/css" title="Kein CSS"
   media="all" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg viewBox="-150 -150 300 300"
  xmlns="http://www.w3.org/2000/svg" version="1.1"
  stroke="black" xml:lang="de">
<title>Beispiel für ein SVG-Dokument mit Kreisen</title>

<circle id="erster" class="nr1" r="120" fill="red" />
<circle class="nr2" r="110" fill="blue" />
<circle class="nr3" r="100" fill="green" />
<circle class="nr4" r="90" fill="yellow" />
<circle class="nr1" r="80" fill="red" />
<circle class="nr2" r="70" fill="blue" />
<circle class="nr3" r="60" fill="green"/>
<circle class="nr4" r="50" fill="yellow" />
<circle class="nr1" r="40" fill="red" />
<circle class="nr2" r="30" fill="blue" />
<circle class="nr3" r="20" fill="green" />
<circle class="nr4" r="10" fill="yellow" />

</svg>

Mittels der Stilvorlangenverarbeitungsanweisungen werden also alternative Stilvorlagen angeboten, die im Darstellungsprogramm auswählbar sein sollten.

Die CSS-Datei css0.css könnte so aussehen:

Das ist also eine leere Datei, das wäre dann die primäre Variante, bei der die angegebenen Präsentationsattribute nicht überschrieben werden.

Die CSS-Datei css1.css könnte so aussehen:

circle {stroke-width: 2; stroke-dasharray: 10,10}
circle.nr1 {fill:#f40; stroke: #0dd}
circle.nr2 {fill:#20a; stroke: #f80}
circle.nr3 {fill:#0a2; stroke: #a0a}
circle.nr4 {fill:#ef2; stroke: #006}

Die Angaben in dieser Variante sind spezifischer als die Präsentationsattribute, überschreiben diese also.

Die CSS-Datei css2.css könnte so aussehen:

circle {stroke-width: 3; stroke-dasharray: 10,10}
circle.nr4 {fill:#f40; stroke: #0dd}
circle.nr3 {fill:#20a; stroke: #f80}
circle.nr2 {fill:#0a2; stroke: #a0a}
circle.nr1 {fill:#ef2; stroke: #006}

circle#erster {stroke-width: 5; stroke-dasharray:20,20;
fill:#fd0; stroke:#02a}

Verwendung des Elementes style

Mittels der CSS-Importregel können externe Stilvorlagen auch innerhalb des Elementes style angegeben werden. Ein Beispiel (Inhalt der Datei css1.css etwa wie im vorherigen Abschnitt):

<?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 viewBox="-150 -150 300 300"
  xmlns="http://www.w3.org/2000/svg" version="1.1"
  stroke="black">
<title>Beispiel für ein SVG-Dokument mit Kreisen</title>
<defs>
  <style type="text/css">
    @import "css1.css";
  </style>
</defs>

<circle class="nr1" r="120" fill="red" />
<circle class="nr2" r="110" fill="blue" />
<circle class="nr3" r="100" fill="green" />
<circle class="nr4" r="90" fill="yellow" />
<circle class="nr1" r="80" fill="red" />
<circle class="nr2" r="70" fill="blue" />
<circle class="nr3" r="60" fill="green"/>
<circle class="nr4" r="50" fill="yellow" />
<circle class="nr1" r="40" fill="red" />
<circle class="nr2" r="30" fill="blue" />
<circle class="nr3" r="20" fill="green" />
<circle class="nr4" r="10" fill="yellow" />

</svg>

Mit dem Attribut type wird angegeben, welche Stilvorlagensprache verwendet wird, hier als 'text/css', was für CSS steht. type ist nicht animierbar.

Zudem kann das Attribut media angegeben werden, mit welchem festgelegt werden kann, für welche Medien die Stilvorlage gilt. Dies entspricht dem gleichnamigen Attribut in der Stilvorlagenverarbeitungsanweisung.
Mögliche Werte sind:

all: Alle, Voreinstellung
aural: Hörbare Ausgabe
braille: ertastbare Braille-Ausgabe
embossed: Braille-Drucker
handheld: Kleingerät wie etwa Mobiltelephone
print: Druckausgabe
projection: Zur Projektion
screen: Computermonitore
tty: Medien mit sehr begrenzter Zellenausgabe
tv: Fernsehausgabe, geringe Auflösung, kaum rollbar, aber Ton verfügbar

Ein weiteres Attribut ist title, mit dem kann der Stilvorlage ein Titel gegeben werden.

Alternativ können die CSS-Eigenschaften auch direkt innerhalb des Elementes style notiert werden, was den Vorteil hat, dass das Dokument nicht von externen Dateien abhängig ist, die Stilvorlage kann also nicht versehentlich verlorengehen. Allerdings sind so die Stilvorlagen nicht effektiv wiederverwendbar.

<?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 viewBox="-150 -150 300 300"
  xmlns="http://www.w3.org/2000/svg" version="1.1"
  stroke="black">
<title>Beispiel für ein SVG-Dokument mit Kreisen</title>
<defs>
<style type="text/css">
circle {stroke-width: 3; stroke-dasharray: 10,10}
circle.nr4 {fill:#f40; stroke: #0dd}
circle.nr3 {fill:#20a; stroke: #f80}
circle.nr2 {fill:#0a2; stroke: #a0a}
circle.nr1 {fill:#ef2; stroke: #006}

circle#erster {stroke-width: 5; stroke-dasharray:20,20;
fill:#fd0; stroke:#02a}
</style>
</defs>

<circle id="erster" class="nr1" r="120" fill="red" />
<circle class="nr2" r="110" fill="blue" />
<circle class="nr3" r="100" fill="green" />
<circle class="nr4" r="90" fill="yellow" />
<circle class="nr1" r="80" fill="red" />
<circle class="nr2" r="70" fill="blue" />
<circle class="nr3" r="60" fill="green"/>
<circle class="nr4" r="50" fill="yellow" />
<circle class="nr1" r="40" fill="red" />
<circle class="nr2" r="30" fill="blue" />
<circle class="nr3" r="20" fill="green" />
<circle class="nr4" r="10" fill="yellow" />

</svg>

Zu beachten ist dabei, dass der Inhalt von style (vom XML-parser) interpretiert wird. Zeichen wie insbesondere &, < und >, die mit der XML-Notation im Konflikt stehen, sind zu maskieren.
Beispiel:

<defs>
<style type="text/css">

g.Bsp circle {stroke:#f08}

g.Bsp &gt; circle {stroke:yellow}

</style>
</defs>

<g class="Bsp">
<circle r="50" fill="red" />
<circle r="40" fill="blue" />
<g>
<circle r="30" fill="green" />
<circle r="20" fill="#0a5" />
</g>
<g>

Alternativ kann auch die allgemeine Schreibweise aus SGML und XML verwendet werden, um anzudeuten, dass der Inhalt nicht vom XML-parser interpretiert werden soll:

<defs>
<style type="text/css">
<![CDATA[
g.Bsp circle {stroke:#f08}

g.Bsp > circle {stroke:yellow}
]]>
</style>
</defs>

<g class="Bsp">
<circle r="50" fill="red" />
<circle r="40" fill="blue" />
<g>
<circle r="30" fill="green" />
<circle r="20" fill="#0a5" />
</g>
<g>

Verwendung des Attributes style

Auf die Probleme mit dem Attribut style wurde bereits eingegangen. Die Schreibweise und die Möglichkeiten und auch die Probleme entsprechen denen beim Einsatz in (X)HTML.

Das Attribut selbst ist nicht animierbar. Der Attributwert ist eine Liste von Eigenschaften mit Wertzuweisungen, die jeweils voneinander mit einem Semikolon getrennt sind.

Beispiel:

<circle r="100" fill="#808" stroke="#0a0"
style="fill:magenta;stroke:green;stroke-dasharray:10,10;stroke-width:20" />

Durch Angabe der Präsentationsattribute wird sichergestellt, dass der Kreis auch bunt angezeigt wird, wenn der Inhalt von style etwa von Darstellungsprogrammen ignoriert wird, die auf das tiny-Profil ausgelegt sind. Weil die im style-Attribut notierten Eigenschaften eine höhere Spezifität haben, überschreiben diese die Präsentationsattribute. Weil sie auch eine höhere Spezifität haben als die meisten Selektoren, die innerhalb des Elementes style oder in einer externen Stilvorlage angegeben werden können, erweist sich die Verwendung dieses Attributes als recht sperrig für Autoren und Nutzer. Ein Nutzer müsste praktisch in seiner eigenen Stilvorlage direkt dieses Element mit der !important-Regel überschreiben. Es wäre also erforderlich, das einzelne Dokument zu analysieren und dann eine spezifische Stilvorlage dafür anzulegen.

CSS-Pseudoklassen

Sofern das Darstellungsprogramm CSS interpretiert, ist auch eine Interpretation von Pseudoklassen wie :hover, :active, :focus oder :first-child, :visited, :link und :lang erforderlich.
Die Angaben sind dann entweder in einer externen Stilvorlage oder innerhalb des Elementes style zu notieren.

Beispiel mit Pseudoklasse :hover

<defs>
	<linearGradient id="verlauf1" x1="50%" x2="50%" y1="0%" y2="100%">
		<stop offset="0" stop-color="black"/>
		<stop offset="1" stop-color="white"/>
	</linearGradient>
	<linearGradient id="verlauf2" x1="50%" x2="50%" y1="0%" y2="100%">
		<stop offset="0" stop-color="red"/>
		<stop offset="1" stop-color="white"/>
	</linearGradient>
	<linearGradient id="verlauf3" x1="50%" x2="50%" y1="0%" y2="100%">
		<stop offset="0" stop-color="navy"/>
		<stop offset="1" stop-color="white"/>
	</linearGradient>

<style type="text/css">
#r1{fill:url(#verlauf1)}
#r2{fill:url(#verlauf2)}
#r3{fill:url(#verlauf3)}

#r1:hover{fill:url(#verlauf2)}
#r2:hover{fill:url(#verlauf3)}
#r3:hover{fill:url(#verlauf1)}
</style>
</defs>

<rect width="300" height="100" x="50" y="20" ry="10" rx="10" id="r1" />
<rect width="300" height="100" x="50" y="220" ry="10" rx="10" id="r2"/>
<rect width="300" height="100" x="50" y="420" ry="10" rx="10" id="r3"/>

Gemeinsamkeiten und Abweichungen: 'CSS für SVG' und 'CSS allgemein'

Generell werden die Regeln von CSS übernommen, wenn das CSS auf SVG angewendet wird. Eine Ausnahme ist die Angabe von Längen (und Winkeln). Während CSS allgemein die Angabe von Einheiten vorsieht, sind diese bei Anwendung auf SVG optional. Längen ohne Einheitsangaben werden auf das lokale Koordinatensystem bezogen, in Einheiten von 1. Winkelangaben werden als in Grad angegeben angenommen.

Erwähnt wurde auch bereits der spezielle Selektor '.' für Listenbestandteile im Wert des Attributes class innerhalb von CSS, welches auf SVG angewendet wird. Dies deckt sich mit dem Selektor für CSS auf (X)HTML angewendet. Dieser Selektor ist nicht allgemein verfügbar für CSS angewendet auf XML, wie bereits in CSS erläutert, sofern das jeweilige Format nicht wie SVG und (X)HTML spezifiziert, welches Attribut mit dem Selektor '.' ausgewertet werden soll.

Wenn ein Darstellungsprogramm über eine akustische Ausgabe verfügt und entsprechende Eigenschaften von CSS2.0 für akustische Präsentationen interpretiert, so können diese auch in SVG notiert werden. Sie haben eine Bedeutung für Elemente, die Text enthalten. Präsentationsattribute gibt es zu diesen Eigenschaften allerdings nicht.

Stilvorlagen mit XSL

Mit XSL (erweiterbare Stilvorlagensprache; englisch: eXtensible Stylesheet Language) können prinzipiell auch Stilvorlagen angeboten werden. XSL gehört wie SVG zur XML-Sprachfamilie. XSL wird insbesondere auch bereits vor jeglicher Darstellung mit gesonderten Programmen verwendet werden, um Dokumente von einem Format in ein anderes zu transformieren (XSLT, wobei T für Transformation steht). Darstellungsprogramme können jedoch ebenfalls eine Möglichkeit haben, Stilvorlagen in diesem Format zu interpretieren. Auch dann kann von einem eigenen Format zum Beispiel in ein SVG-Dokument transformiert werden. XSL kann aber auch ähnlich wie CSS verwendet werden, um den Inhalt zu dekorieren - oder in einer Mischung von beiden, ein SVG-Dokument in ein anderes SVG-Dokument zu verwandeln, welches anders dargestellt wird als das Dokument ohne die Stilvorlage.

XSL selbst zu erkären, liegt außerhalb des Themenbereiches dieses Buches, daher gibt es hier nur ein einfaches Beispiel. Gegeben sei folgendes SVG-Dokument:

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="style.xsl" type="text/xsl" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
     version="1.1"
     viewBox="0 0 300 200"
     xml:lang="de">
<title>Beispiel SVG mit XSL</title>
<desc>
Beispiel zur Verwendung von XSL in SVG.
Anders als bei CSS ist es mit XSL auch möglich, Attribute zu ändern
oder ganze Elemente auszutauschen.
</desc>

 <rect class="hintergrund"
       x="0" y="0" width="300" height="200"
       fill="#ffa"/>

  <circle cx="160" cy="100" r="30" fill="yellow"/>

  <rect x="25" y="25" width="60" height="30"/>

  <rect id="r" x="25" y="85" width="60" height="30"/>

  <rect class="bsp" x="25" y="145" width="60" height="30"/>

  <ellipse cx="250" cy="100" rx="10" ry="20"/>

  <g id="anders" />
</svg>

Mittels einer XML-Stilvorlagenverarbeitungsanweisung wird hier auf das Dokument 'style.xsl' verwiesen. XSL wird typisch in eigenständigen Dateien notiert, auf welche solch eine Anweisung verweist. Das Dokument 'style.sxl' mit der Vorlage könnte zum Beispiel folgenden Inhalt haben, wobei bereits in Kommentaren grob zur Information angegeben ist, was wozu gut ist:

<?xml version="1.0"?>
<xsl:stylesheet version="1.0"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
  xmlns:svg="http://www.w3.org/2000/svg">
  <xsl:output
    method="xml"
    encoding="utf-8"/>
  <!-- Wurzelelement kopieren und Vorlagen anwenden -->
  <xsl:template match="/svg:svg">
    <xsl:copy>
      <xsl:copy-of select="@*"/>
      <xsl:apply-templates/>
    </xsl:copy>
  </xsl:template>

  <!-- title kopieren -->
  <xsl:template match="svg:title">
    <xsl:copy>
      <xsl:value-of select="." />
    </xsl:copy>
  </xsl:template>
  <!-- desc kopieren -->
  <xsl:template match="svg:desc">
    <xsl:copy>
      <xsl:value-of select="." />
    </xsl:copy>
  </xsl:template>

 <!-- Kreise -->
  <xsl:template match="svg:circle">
    <xsl:copy>
      <xsl:copy-of select="@*"/>
      <xsl:attribute name="fill">red</xsl:attribute>
      <xsl:attribute name="stroke">blue</xsl:attribute>
      <xsl:attribute name="stroke-width">3</xsl:attribute>
      <xsl:attribute name="r">50</xsl:attribute>
      <xsl:attribute name="cx">160</xsl:attribute>
      <xsl:attribute name="cy">70</xsl:attribute>
    </xsl:copy>
  </xsl:template>

 <!-- Ellipsen -->
  <xsl:template match="svg:ellipse">
    <xsl:copy>
      <xsl:copy-of select="@*"/>
      <xsl:attribute name="fill">#ff0</xsl:attribute>
      <xsl:attribute name="stroke">#00a</xsl:attribute>
      <xsl:attribute name="stroke-width">10</xsl:attribute>
      <xsl:attribute name="rx">20</xsl:attribute>
      <xsl:attribute name="ry">80</xsl:attribute>
    </xsl:copy>
  </xsl:template>

  <!-- Rechtecke -->
  <xsl:template match="svg:rect">
    <xsl:copy>
      <xsl:copy-of select="@*"/>
      <xsl:attribute name="fill">#f0f</xsl:attribute>
      <xsl:attribute name="stroke">#ff0</xsl:attribute>
      <xsl:attribute name="stroke-width">3</xsl:attribute>
    </xsl:copy>
  </xsl:template>

  <!-- Element mit Identifizierer r -->
  <xsl:template match="id('r')">
    <xsl:copy>
      <xsl:copy-of select="@*"/>
      <xsl:attribute name="fill">#0ff</xsl:attribute>
      <xsl:attribute name="stroke">#f80</xsl:attribute>
      <xsl:attribute name="stroke-width">1</xsl:attribute>
    </xsl:copy>
  </xsl:template>

  <!-- Elemente der Klasse bsp -->
  <xsl:template match="*[@class='bsp']">
    <xsl:copy>
      <xsl:copy-of select="@*"/>
      <xsl:attribute name="fill">#080</xsl:attribute>
      <xsl:attribute name="stroke">#f02</xsl:attribute>
      <xsl:attribute name="stroke-width">5</xsl:attribute>
      <xsl:attribute name="width">180</xsl:attribute>
    </xsl:copy>
  </xsl:template>

  <!-- Elemente der Klasse hintergrund -->
  <xsl:template match="*[@class='hintergrund']">
    <xsl:copy>
      <xsl:copy-of select="@*"/>
      <xsl:attribute name="fill">#eee</xsl:attribute>
      <xsl:attribute name="stroke">#666</xsl:attribute>
      <xsl:attribute name="stroke-width">1</xsl:attribute>
    </xsl:copy>
  </xsl:template>
  
  <!-- Element mit Identifizierer 'anders' austauschen -->
  <xsl:template match="id('anders')">
	  <svg:g fill="#cff" stroke="#404" stroke-linejoin="round" stroke-width="2"
		transform="translate(160 70) scale(0.5)">
	  <svg:path d="M-100,0Q0,0 0,-100 0,0 100,0 0,0 0,100 0,0 -100,0Z"/>
	  <svg:path d="M-50,-50Q0,0 50,-50 0,0 50,50 0,0 -50,50 0,0 -50,-50Z" fill-opacity="0.5"/>
	  <svg:path d="M-50,0Q0,0 0,-50 0,0 50,0 0,0 0,50 0,0 -50,0Z" fill-opacity="0.3333"/>
	  <svg:path d="M-25,-25Q0,0 25,-25 0,0 25,25 0,0 -25,25 0,0 -25,-25Z" fill-opacity="0.25"/>
	  <svg:path d="M-25,0Q0,0 0,-25 0,0 25,0 0,0 0,25 0,0 -25,0Z" fill-opacity="0.2"/>
          </svg:g>
  </xsl:template>
  
</xsl:stylesheet>

Prinzipiell kann XSL auch direkt im SVG-Dokument notiert werden. Dabei ist davon auszugehen, dass dies etwa einen Validator überfordert, der auf DTDs basiert, denn anders als bei CSS taucht so wirklich eine andere XML-Sprache im Dokument auf. SVG schreibt andererseits aber explizt nicht vor, wie die Sprache auszusehen hat, welche innerhalb des Elementes style zu notieren ist. Es ist explizit bei der Definition des Elementes angegeben, dass die Sprache der Stilvorlage dies festlegt. Da es sich bei XSL um XML handelt, gibt es da auch keine technischen Probleme bei der Notation.

Allerdings wird trotzdem typisch eine XML-Stilvorlagenverarbeitungsanweisung anzugeben sein, welche auf das XSL-Fragment verweist, damit interpretierwillige Darstellungsprogramme Notiz von der Vorlage nehmen. Das Problem dabei ist, dass der dabei notwendige Fragmentidentifizierer in einem als dafür geeigneten Attribut notiert sein muss. Das Attribut xml:id eignet sich dafür einerseits als generischer Identifizierer. Er ist andererseits allerdings in älteren (Versionen von) Darstellungsprogrammen noch nicht implementiert, welche dann eine Fehlermeldung ausgeben werden, weil sie die Stilvorlage nicht finden können. Somit ist es in der Praxis vorzuziehen, wie oben beschrieben vorzugehen und auf ein externes Dokument zu verweisen.

Obiges Beispiel mit wie beschrieben integriertem XSL ist zum Beispiel mit einer aktuellen Version von Opera nachvollziehbar, dort sind bereits alle erforderlichen Bestandteile samt xml:id implementiert:
Beispiel SVG mit XSL.

Beispiel für die Transformation eines allgemeinen XML-Dokumentes in ein SVG-Dokument, wobei Inhalte von XML-Elementen verwendet werden, um per XSLT die Opazität von Flächen in der SVG-Ausgabe festzulegen:

Um Daten zu visualisieren, eignet sich die Kombination der beiden XML-Technologien SVG und XSLT. Dazu wird auf einen XML-Datensatz ein XSLT-Stilvorlage angewendet und das Ergebnis als SVG ausgegeben.

Diese "Umwandlung" kann sowohl serverseitig durch XSLT-Funktionalitäten der verwendeten Programmiersprache erfolgen oder durch Kommandozeilenwerkzeuge wie xmlstarlet, als auch anwenderseitig durch das Darstellungsprogramm wie üblich bei Stilvorlagen erfolgen. Wenn im Darsellungsprogramm eine XML-Datei mit einem Verweis auf ein XSLT-Stilvorlagendatei geöffnet wird, wird diese angewendet. Statt des Inhaltes der XML-Datei wird dann das Ergebnis der Transformation angezeigt.

XSLT-Beispiel: Wahl

Hier ein einfaches Beispiel mit Daten über die Wahlbeteiligung einer fiktiven Wahl in Österreich:

Die XML-Datei:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="wahl.xslt" type="text/xsl" ?>

<wahlbeteiligung>
	<wien>23</wien>
	<salzburg>16</salzburg>
	<vorarlberg>55</vorarlberg>
	<tirol>73</tirol>
	<burgenland>99</burgenland>
	<kaernten>33</kaernten>
	<niederoesterreich>76</niederoesterreich>
	<oberoesterreich>20</oberoesterreich>
	<steiermark>50</steiermark>

</wahlbeteiligung>

Die Transformationsstilvorlage wahl.xslt. Bei dieser wird das gesamte XML-Dokument gegen ein SVG-Dokument getauscht. Lediglich die Inhalte der Elemente der XML-Datei werden verwendet, um die Opazität der jeweiligen Flächen anzugeben:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
  <svg xmlns="http://www.w3.org/2000/svg" width="600" height="300"
       viewBox="0 0 1000 550" version="1.0">

    <g id="Oesterreich" stroke-linejoin="miter" stroke="#7b7979"
       stroke-linecap="butt" stroke-miterlimit="4" 
       fill="#f4d4ac" stroke-width="1.507">
      <path id="Vorarlberg" fill-opacity="{(wahlbeteiligung/vorarlberg div 100)}"
       d="M100.31,460.87l0.25-7.75-4.253-2.5-0.5-6,4.503-3.5,2-4.75-0.25-4.24-1.25
          -4.75,0.5-2.25,2.49-4.75-0.75-4.25,1.25-3.75,3.5-5.25,2.75-5.5,1-5.24
          -0.75-5-2-5.25-1.77-5.91-0.05-0.14v-2.75l1.75-2.25,3.25-0.75,1-2.5-1
          -4.25,3-5.5-1.25-4-5.5-1.5-3.25,4.25-4.75-0.75-2.746,3-0.5-7.25-2.749
          -2.25,4.249-2.74-0.75-4.75-2-2.75-3.748-1.25v-3.75h-2l-3.499,2.5-1.25-1.75
          v-4.25l-3.999-2.75-1.499-3.75-5.749,2.75-2.749-3.5-2.999,2.5-4.999-3,0.25
          -4.75-2.249-2.75-5.499,0.25-2.249,5.25-2.999,5.5-13.496,0.75-5.499-0.5
          -1.749,5.75,1.249,2.5,3.749,4.5,6.998,2.25-1.499,6,3.749,4.49v4.25
          l-4.249,1.5-3.499,0.5-3.249,7.5-3.749,4.5-3.499,6,4.498,4.25-1.749,2.75,
          3.499,3.99-0.5,7,2.25,2.25,3.499,4.25,0.749,3.25,0.25,4.75-2.499,6.75,
          4.499,0.75,4.249-1,9.997,4.99h3.999l4.748,2.75,5.499,0.25,3.249,5-2,3.75
          v2.25l0.25,5,3,0.5,2.999,4.75,5.498-0.5,2.5,2h2.749l5.498,4.75,0.25,
          2.25,3.999,0.25,3.526,2.54" />
      <path id="Tirol" fill-opacity="{wahlbeteiligung/tirol div 100}"
       d="M367.47,285.56l-4.5,3.5-5.25,3,3.25,8,0.51,8.74-5.52,1.26-14.24-1.75-1.74,
          1.24-3.25-1.24-18.75,5-1,4-8.25-1.51-13.25,1.26-4.49-1.76-5.75,5.01v6.74
          l-3.5,4-8.24,1.01-7.51-1.76-6.5,8,3,0.74-0.74,3.76-7.25-0.26-5.75,5.26
          -0.75,3-3.76,3-4.23-0.75,2.74-4.51-2.49-1.99-3.51,0.75-5.24,1.49-6,6.5
          -7.25-0.75-5.5,1.51-5.74-3.25,2.49-3.5-8.74-11.25-5.26,0.51-1.5-2.75,5.5
          -3.75-4.49-4.01-8.75,3.5h-5.01l-0.98-3.25-5.01,0.25-3.51-4.25-6.98,0.25
          -4.01-2.25-4,3.76-0.25,3h-6.74l-5.26-3.5,1.01-3.26-0.25-2.24-6.76,1.99,
          3.25,4.01-2.49,3.75,1.76,3.23-1.51,3,4.51,2.52,1.24,9.73-5.5,6.75-0.5,
          3.76-2.5-0.26-3.5,3.76,1.26,1.74-7.26,9.25h-3.5l-3.5,3.5-5.5,2.25-3.75
          -0.76-3.96,1.24-0.03,0.27,1.74,6,2.01,5.49,0.74,5.01-0.99,5.25-2.74,5.49
          -3.51,5.25-1.25,3.75,0.75,4.25-2.5,4.75-0.5,2.24,1.24,4.76,0.25,4.24-1.99,
          4.76-4.507,3.5,0.503,6,4.254,2.49-0.23,7.15,5.73,0.09,4.5-3.48,5.25-1.51,
          0.25-4.99,1.49-5.26,6.75,1.25,2-0.75-0.74-3,3-2.5,2.75-7.49,1.99,0.24,2.24
          -0.74,5.75,3.74,0.76,3.25,6.5,5.26-3,7.74,0.75,2.75,4.99,3.5,8.5,0.5,7.5
          -3.75,7.01,0.25,3.73,3.75,5.75,1.49,0.75,3-3.5,4.51,3.25,0.75,3.76-1.76,
          2.49,3,5.5,0.5,3.75,2.5,9.5-2.24,7.74,1.74,1.51-5.5,4.74-4.24v-7.25l3.25
          -3.25-0.75-6.5,10-11.75,9.25-0.75,9.75-3.25,5.75,1,3.25,2.25,4.99-1.24,
          5.5-7.25h2.99l4.26,3.75,9.5-4.01,12.75,3.76,2.75,2.74h4.74l0.5-3.25,
          7.51-0.75,14.74-8.49,14.49-3.76,4.01-4.49,2.75-0.61v-5.13l-0.26-6-2.01
          -2.25-3.73-1.51-0.5-5.74-0.26-7.26,1.75-3.25-1.49-5.99,3.25-1.75,6.98,
          0.5,5.51-2.99,7.24-3.25,4.51-4.01,2.75-0.99,6.25,4.24,11.49-4.49-0.25
          -3.75,6.75-6.5h4.99l3.25-1.49,2.75-3.76,1.26-4.25,0.99-4.24,2.26-3,3.48
          -5.76-1.99-2.75-2.5-3v-3.74l-0.5-5.51-4.49-1.99-4-2.5-1.39-5.29-3.12
          -0.96-3.74,2.75-7.75-6.5-2.5-5.5-8.5,2.25-5-1.49-8.75,3-1.99-4.76,
          2.74-3.74-1.24-1.76zm39.85,16.71l0.13,0.05-0.25-0.51,0.12,0.46z
          m-52.09,107.4l6.59-1.41,3.17-0.65,3.05,2.42-3.08-2.5-4.66,1.03
          -5.07,1.11zm12.81,0.36l0.92,0.75-4.49,8.75-8,1.99v9.25l3.75,
          5.5,0.5,3.75,7.49,4.74,5.26-0.48,1.74,1.74,4.26,7.76-2.01,
          9.73,5.01,2.01s3.99-0.5,4.99-0.25h0.02c0.01,0.01,0.04,0.02,
          0.06,0.03,1.04,0.75,3.17,10.21,3.17,10.21l5.5,3.25,17.49,8.01,
          6,0.73,6.5-0.12,1.05,0.96,0.71-2.58s1.98-4.47,3.23-5.24c1.25
          -0.75,1.76-6.25,1.76-6.25l0.25-6.5,4.24,0.25,5.26,0.25,4.74
          -2.75,5.5-3.25,4,3.5,4.26,0.49-1.01-5.75-3.75-3.73-4-5.52
          -4.49-3.73-3.76-4.26-0.5-5.49-1.99-5.5-4.75-0.75-1.75-4.26
          -3-3.74,1.25-4.75,2.5-6.75-7.76-2.25-7.99-1.74-1.49-6-2.01
          -2.26-6-4.24h-4.74l-3.25-0.76-3.75-2.24-4.5,3.99-4.5-0.99
          -5.75,1.49-1.49,4.26-1.76,2.99-5.75,4.01-7,1.74h-0.17z
          m-267.73,50.14h-0.26l0.24,0.59,0.02-0.59z" />
      <path id="Salzburg" fill-opacity="{(wahlbeteiligung/salzburg div 100)}"
	d="M418.51,402.07l2.5-2,0.75-3.75,6.25,3,3.5,2.25,3.99,2.5,6,0.75,
           7.25,1h5l5.5,3,5.5,3,5.49,3.25,6-1.25h4.5l5.25,0.5,6-2.25,3.75
           -0.75,1-3.5,2.5-5,5.5-1.5,3.99,1.5,4.5,2.5,5.5,0.5,5.5,0.25h4
           l5.25,1.75,2.5,1,5.99-0.25h4.5l2.75,1.75,3,3,3.25,2.75,4,1.75,
           5.5,3.99,3-1.25,2.75-2.99-0.25-4,2-3.75,2-4,2.5-3.5-1-6.25,1.25
           -3.5,5.49-3.75,1.5-2.25-0.25-3.25-4.75-1.24-1.99-1.25-3.25-6.75
           -2.5-5-2.75-4.5-3.25-6.75-3.5,0.25-0.75,2.75-1,1.75-5.5-1.5-2.25,
           2-1.5,1.5-5.75-3.5-3.99-2.75-2-1-3-10-2.75-6.99-1.5-5.5,1.75-7.5,
           0.5-1.5-4.5-3-4-3.25-5.25-3.25-0.25-4.25,1.5-4.49,2.25-4-0.5-4
           -1.75-1.75,2.5-7.75,2.25-7-0.5-3.25-1.75-0.75-4.25-0.5-5-3-3
           -2.49v-1h10.75l1.5-1.5-0.25-2.25-6.5-3-9-0.75-4.24,0.25h-6.25
           l-2.5-4.75-3-9.5-2-7.75,1.75-5.99,6.25,0.25,3.25,0.25v-3.25l-2
           -3-5-1-5,0.75-3.25,3-8.25,0.25-8.5-1.25-5.49-5-2.5-2.5-4.75,0.25
           -4,1.25-2.75,0.25-1,2.5-1.5,4.25-7.26,1.94-0.24-0.44,1.75,2.25,
           1.75,1.99,4,1.5,5.75,8.5,6.25,10-4.5,9.5-3.75,4.25,0.25,5.49
           -2.5,5.25,1.75,2.5h8.5l3.75-3.25,5.5,5.5,1.99,5,3,5.5-3.25,3.5
           -0.25,6.5h-2.49l-1,2.49,2.25,2.5-2.25,3.25-0.25,2.75s1.5,3,
           2.75,3c1.24,0-0.5,4.25-0.5,4.25l-3.25,1.25-1.75,4-2.75-3.5
           -3.5,2.25-9.5-5.75-0.25-2.25-6-5.25h-4l-3.25-6.75,1.75-5.49,
           3.25-0.5-1.75-3.5-6.24-3,0.25-4-4.25-2.25-2.5,0.75-5.25-0.25
           -4,2-4.25-0.25s-2.37,5.69-4.25,7.25l-0.25-0.5,1.5,5.75,4,2.5,
           4.5,1.99,0.5,5.5v3.75l2.5,3,2,2.75-3.5,5.75-2.25,3-1,4.25-1.25,
           4.25-2.75,3.74-3.25,1.5h-5l-6.74,6.5,0.24,3.75-11.49,4.5-6.25
           -4.25-2.75,1-4.5,4-7.25,3.25-5.49,3-7-0.5-3.25,1.75,1.5,6-1.75,
           3.25,0.25,7.24,0.5,5.75,3.75,1.5,2,2.25,0.25,6v5.5l0.05-0.37,
           3.45-0.76,6.24-1.37,3,2.24,0.25,0.26,7-1.75,5.75-4,1.75-3,1.5
           -4.25,5.75-1.5,4.5,1,4.49-4,3.75,2.25,3.25,0.75h4.75l6,4.25,2,2.25" />
      <path id="Kaernten" fill-opacity="{(wahlbeteiligung/kaernten div 100)}"
	d="M418.85,401.95l2.5-2,0.75-3.74,6.25,2.99,3.5,2.25,3.99,2.5,6,
           0.75,7.25,1h5l5.5,3,5.5,3,5.49,3.25,6-1.25h4.5l5.25,0.5,6-2.25,
           3.75-0.75,1-3.5,2.5-5,5.49-1.5,4,1.5,4.5,2.5,5.5,0.5,5.5,0.25
           h4l5.25,1.75,2.5,1,5.99-0.25h4.5l2.75,1.75,3,3,3.25,2.75,4,
           1.75,5.5,4,0.75-0.25,3.25,5.25,3.5,2.5,2.75,1.25,5.49-2.5,1.5
           -3.5,4-3.5,3.5-1.75,1.75-3.25,1.75-3.5,3-2.75,3.75-1.5,4-2.5,
           4-2,3-1.5,3.24-0.5h1.75l2.25-0.75,2.25-0.5,1.5,2.5,1.75,3,
           3.25,0.75,3.5-0.25,5-0.5,1.5-0.5,2,4.75,1.75,1h3.25l3.25-1.75,
           2.49-2.25,2.5-1.75h2l2.25-0.75,6.25-0.25,2.25-1.25h2.25l3,0.75
           h2.25l3-1h2.75l3.75-0.25,3.5-0.5,2.74-0.25h3.25l2.5-0.75,4.5
           -1.75,3-1,3,3,4,2,2.5,3,2.75,4.5,2.75,3.75,3.75,4.75,2,3,0.24,
           4.5-2.24,4-1,3.24,0.75,4,1.5,2.75,1.74,2,1.5,4.5v6l0.75,5.75,
           0.5,2,3.25,1.25,4.25,3.5,3.41,1.97-0.91,0.78-8.75,1.99-2.75,
           5.5-1.5,2.5-4.99-5.25-3,4.25-7.25,0.75-5.5,19.75-10.25,2.25
           -2.75,6.74-3.25,0.5-2.24,3.75-9.5,2.75v6.5l-2.25,3.75-7.25
           -6.75-2.25,2.25-3.5-1.5-3-2-3-3.25-9.24,2-5,1.75-3.5-1.75-8,
           1.25-8.5,1.25-5.5-8-8.24-1-7.5,0.5-9.25-6.24-8.5,0.25-5.99,
           3.49-11-0.99 -13-4.75-4.25,2.5-4-3.75-3.99,1-3.75-3-7,2.25
           -4.5-3-11,4.25-9.99,0.5-10.75-5.5-11.5-0.75-13.74-0.75-12.75,
           0.25-10.75-5.75-2.5-1.25-7.74,0.25-5.23-0.33,0.78,0.41,0.7-2.58
           s2-4.5,3.25-5.25c1.24-0.75,1.74-6.25,1.74-6.25l0.25-6.49,4.25,
           0.25,5.25,0.25,4.75-2.75,5.5-3.25,4,3.5,4.25,0.5-1-5.75-3.75
           -3.75-4-5.5-4.5-3.75-3.75-4.25-0.5-5.5-2-5.49-4.75-0.75-1.75
           -4.25-3-3.75,1.25-4.75,2.5-6.75-7.74-2.25-8-1.75-1.5-6" />
      <path id="Steiermark" fill-opacity="{(wahlbeteiligung/steiermark div 100)}" 
	d="M671.81,263.78l1.18,2.05,2.74,2.24,3-2.49,7,0.25,2.75,0.49,2,
           1,4,3.5s1.75,0.25,3.25,0.5,3.25-1.25,3.25-1.25l2.5-5.74,3
           -0.75,4.49-0.5,3,1.75,2.5-0.75,4.25-2.25,4.75-2,5.25-1.25,
           2-5.75,1.5-1,2.5-2.75,3.25,0.75,4-1,2.25-2.25,2.49-0.5h4
           c1.75,0,5,4.75,5,4.75l3,3.75s4.5,0.5,5.5,0.5,5,1.5,5,1.5
           l3.5,4.25,5.25-0.75h5.49l2.25,5,3,0.5,4,0.49h4.5l2.25,6.25,
           3.5,8.5,3-5.5,5.25,0.25,1.75,6.5-0.5,5,5.24-0.5,3.25,2.75,
           2.25,3.5,1.75,3.75h5,5.75l1.25,1.75,1.75,1,4.75-0.25,3-3,
           0.5,7.74,2.75,2.75,4.25,4-3.5,5.75-3.75,5.25-2.75-5.5
           h-2.5v2l-0.25,3.25-2,1.25,1.75,5.5,2.25,5.5,1.5,4.25,2.5,
           5.49,1,5.75,0.25,4.75,2,3.5,2.25,3,0.25,2.75v4.25l-1.5,5.75,
           0.75,4.49,3.99,4.25,4.25,2.75-0.25,5-2.5,3.75-2.75,5-2.74,4.5
           -2,4-1.75,0.25-3.75,3,0.5,6.49,1.75,2.5,2.75,2.5
           v3l-1.25,1.25-4,1,2,3.25v7.25l0.75,6.5,2.25,3.5,3,0.49,0.5,
           3,2.24,2v6.5h-2.24l-5.25-6.75-2.5,1-13.75-5.5-7.5,2-5.25,
           3.75-4.24,1h-2.5l-3-1.75h-3.5l-1.5,4.5-0.75,1.75-4-1.5-7,3
           v3.25,3.75l-4,3.25-5.75,0.75-3.24-3-2.5-2.5h-4.75l-12.5,
           1.75-10.5,1-5.24-2-9.75,1.75,0.91-0.78-3.41-1.97-4.25-3.5
           -3.25-1.25-0.5-2-0.75-5.75v-5.99l-1.5-4.5-1.75-2-1.5-2.75
           -0.75-4,1-3.25,2.25-4-0.25-4.5-2-3-3.75-4.75-2.75
           -3.74-2.75-4.5-2.49-3-4-2-3-3-3,1-4.5,1.75-2.5,0.75
           h-3.25l-2.75,0.25-3.5,0.5-3.75,0.25
           h-2.75l-2.99,1h-2.25l-3-0.75h-2.25l-2.25,1.25-6.25,
           0.25-2.25,0.75h-2l-2.5,1.75-2.5,2.25
           -3.25,1.74h-3.25l-1.75-0.99-1.99-4.75-1.5,0.5-5,
           0.5-3.5,0.25-3.25-0.75-1.75-3-1.5-2.5
           -2.25,0.5-2.25,0.75h-1.75l-3.25,0.5-3,1.5-4,2
           -3.99,2.5-3.75,1.5-3,2.74-1.75,3.5-1.75,
           3.25-3.5,1.75-4,3.5-1.5,3.5-5.5,2.5-2.75-1.25
           -3.5-2.5-3.25-5.25-0.74,0.25,2.99-1.25,
           2.75-3-0.25-4,2-3.74,2-4,2.5-3.5-1-6.25,1.25
           -3.5,5.5-3.75,1.5-2.25-0.25-3.25-4.75-1.25
           -2-1.25-3.25-6.74-2.5-5-2.75-4.5-3.24-6.75-3.5,
           0.25-0.75,2.75-1,1.75-5.5-1.5-2.25,2-1.5,
           1.5-5.75-3.5-4-2.75-2-1-3-10-2.75-7-1.5-5.49,1.75
           -7.5,0.5-1.5h-0.25l5,1.25,5.75,0.75,3.25,
           0.75,0.75-2.75,0.75-2.25,3.25-2.25,0.75-0.75v-4l-1
           -2.75-2.5-3-2.75-2.25-1.5-2.75-0.5-3.25
           v-3.49-4l0.25-4.5,0.5-1.25,8.25-5,5.75-3.25,4-3,
           4.49,3.25,2,0.5,4.5,0.5,1.25-0.25,1.75,1.75,
           4.75-1.25h0.5l4.25,3.75,4.25,3.75,0.5,2.5-0.25,
           3.25,2,0.25,1.5-3.5,4-0.5,3.24-0.25,1.75-2.75,
           3.5-0.75h2l3,3.5,2.75,1.75,7.75,1h3.25c1,0,3.5
           -0.75,3.5-0.75l1-2.5,3.25-5,1.75-1.5h2.74l4-0.25,
           1.75-2.5-0.25-2.5,6.25-2.5,3.25-1.25,6.75-2.5,
           4.5-2,4-4.75,2.75-2.49" />
     <path id="Oberoesterreich" fill-opacity="{(wahlbeteiligung/oberoesterreich div 100)}"
       d="M440.38,235.33v-3.5l-1.2-2.99,0.2-0.5-3.25-3
          -6.24-3.75-2.5-5.5-1.75-6.5,2.5-1.25,3.5,0.5
          -0.25-3,1.75-2.5,3.99-2,0.5-3.25v-3.25l3-1.74
          h4.5l4-0.75,3.25-0.75,1.25-2.25,2.5-4.25,
          1-2.5,3.25-0.5h3.75l2-1.25,1.5-1.5,2.74-0.25,
          2.5-2.25,4.25-2,9.75-0.25,3-1,5.5-4,3.75
          -4.25,3.5-3.75,2.5-3,0.75-2.99,0.99-2.5,0.75
          -2.5v-3.75l-0.25-3.5v-3l0.75-3,2.5-3.75
          -1.75-4.5-1.25-3.5v-2.75l2.5-2,3.5-1.49,3.75
          -1,3.25,2.25,2,1.99,3-1,1.75-0.25,2.25,
          1.75,4,0.25,1,2,1.5,1.75,3.75,2.25,2.25,1,1.74
          -2.25,0.5-6.25,3.25-0.5,4-3.74v-4l3-3.5
          -2.75-12.249,2-2.999-5.25-4.249,2.25-2.749,1
          -2.499,1-3.999,3.25,0.5,3.5,0.25,9.75,7.997,
          5,0.5,3.5,5.249,3.49,2.249v2.999l-3.74,1.75
          v2.25l2.49,2.25,0.25,2,4.5,2.5,15.25,0.25,4,
          2.25,3.75,0.25,3.25,0.5,3.25,1,3.74,2.5,3.75-4,
          2.75-3.25,3,0.25,2.25-5v-5.5l5-1.249,3,
          3.499,3.25,1.5,3.25,1.5,2.5-2.5,2.5-2,2.25,
          1.25,0.74,3h4l1.25,4,3.75,0.25,0.25-0.25v2.75
          h4.25l4.25,0.75,5,2,4.5,1.5,5.5,0.5,4.74,3-0.75,
          2.74-2.49,0.25-2.25,3.25-0.75,2.25,0.75,
          2.5,5.74,4.5,2.5,1,0.25,6.25h3v1.75l0.25,4.75
          -0.25,2.5,2,3.25,0.5,3.74-0.25,5.75,0.25,5,
          0.75,8-1.75-1-2.25-1-2-1.75-2.75,0.25-2.24,0.25
          -2.5,1.75-3.25,3.5-2.5,3.25-2.5,1-3,0.75
          -2.75,0.75-3,0.75-4.5,1.25-5-1.5-1.75-1.25-2.75
          -3-2.99-3.25-0.75-2-3.5-0.25-4.5-0.5-5,4
          -0.5,4.5,0.5,5.25-1.25,4.99,2.5,4.75-1,1.75-1.25,
          3.5-2.25,4.75,1,3.75,5,4,2.75,2.25,2.75,
          2.25,2.75,0.5,2.5,1.5,1.99,2,3.75,3,4,1.24,3,1.25
          h2.75l4,1.75,4.5,3.75,0.75,4-2,1.5v3.5
          l-1.75,3.75-1.25,2.25v3l1.75,4.75-0.75,4.5-2.75,
          2.49-4,4.75-4.5,2-6.75,2.5-3.24,1.25-6.25,
          2.5,0.25,2.5-1.75,2.5-4,0.25h-2.75l-1.75,1.5-3.25,
          5-1,2.5s-2.5,0.75-3.5,0.75h-3.25l-7.75-1
          -2.74-1.75-3-3.5h-2l-3.5,0.75-1.75,2.75-3.25,0.25
          -4,0.5-1.5,3.5-2-0.25,0.25-3.25-0.5-2.5
          -4.25-3.75-4.25-3.75h-0.5l-4.74,1.25-1.75-1.75
          -1.25,0.25-4.5-0.5-2-0.5-4.5-3.25-4,3-5.75,
          3.25-8.25,5-0.5,1.25-0.25,4.5v4,3.49l0.5,3.25,
          1.5,2.75,2.75,2.25,2.5,3,1,2.75v4l-0.75,0.75
          -3.25,2.25-0.75,2.25-0.75,2.75-3.25-0.75-5.74
          -0.75-5-1.25h0.25l-4.5-3-4-3.25-5.25-3.25-0.25
          -4.25,1.5-4.5,2.25-4-0.5-3.99-1.75-1.75,2.5-7.75,
          2.25-7-0.5-3.25-1.75-0.75-4.25-0.5-5-3-3-2.5
          v-1h10.75l1.5-1.5-0.25-2.25-6.5-2.99-9-0.75-4.24,
          0.25h-6.25l-2.5-4.75-3-9.5-2-7.75,1.75-6,6.25,
          0.25,3.25,0.25v-3.25l-2-3-5-1-5,0.75-3.25,3-8.25,
          0.25-8.49-1.25-5.5-4.99-2.5-2.5-4.75,0.25-4,
          1.25-2.75,0.25-1,2.49-1.5,4.25-7.26,1.95" />
     <path id="Burgenland" fill-opacity="{(wahlbeteiligung/burgenland div 100)}"
       d="M961.37,171.22l-3.37,3.37-3.25,3.25-1.25-1.5
          -5.5,2,1.5,4.25-0.25,4-1.5,2-2.75-2-4.99-3.5
          h-4.25l-4,3.5-3,4.25-5.25,2.99-4.75,2-3.75,2
          -0.25,5.5-1,3-3.75,2-3.25,1.5v4.25l-2.49,2.25
          -3.5,2.75-2.5-2.5-4.75-3-3,1-6.25,1.25-3.5,3
          -1.75,2.5-3.5,5,0.75,3.99,0.75,4.75-2.25,3.75
          v3.5l-3.25-0.5-2.99,2.75v5.75l1,4.25,0.75,2.25,
          2.24,3.5,2.75,2.25,4.25,4.24,1.75,2.25,0.25,
          2.75-2.25,2.75v3l-1,2.75-2.5,2-0.5,3,0.25,5,4,
          4-1.5,4-3.5,3.99-4,3.25-4.24,3.75-4.75,0.5
          -5.75,0.5,0.25,0.25-3.5,5.75-3.75,5.25-2.75-5.5
          h-2.5v2l-0.25,3.25-2,1.25,1.75,5.5,2.25,5.5,
          1.5,4.25,2.5,5.49,1,5.75,0.25,4.75,2,3.5,2.25,
          3,0.25,2.75v4.25l-1.5,5.75,0.75,4.49,4,4.25,
          4.25,2.75-0.25,5-2.5,3.75-2.75,5-2.75,4.5-2,4
          -1.75,0.25-3.75,3,0.5,6.49,1.75,2.5,2.75,2.5
          v3,0.39l2.75-1.89,4.75-3.75,4.75-1.25,4.75-7.25,
          2.49-3.24,1-4,4.5-0.5,1-2.25,1-3.25,2.5-2.5,
          1-3,0.5-3,1.75,1.5h2l4.25-1.75,3.25,1,3-1.75,
          3.75,2.25,2.25-1.75,2,0.5,4.74-0.25,1.25-1.25
          -1.25-1.75-3.49-1h-4.25l0.75-2.75,6.24-2.75,
          1.75-3.5h-3.75l-2.74-4.74,2.25-2.5,1.99-2.25,1.5
          -1,1.25-2.75-1.75-2.25-3.24,0.25-4.5,3.25-1.25
          -4.5,1.5-2-1.5-2.75h-2l-1.75-3.75,1.75-2.75,
          0.25-7.5-0.25-4.74,2-3.5-0.25-6.25-3.5-0.75,
          0.75-7-1.5-4.75,1.25-2.5h2.25l3.5,3.5,3-3.5,5.74
          -0.25,8.25-7.75,3-3.74-1.25-3.25-1-3.75,3.5-1.5,
          2.75-2.25-0.25-4.25-5.5-3.5-0.5-7-5-4.25-4.25,
          1.75-9.74-3.75-3.5,1.25-8.75-3.5,2.5-3.74h3.25
          l2.5-4.25,6-3.25-1.75-4.5,1.25-2.75h5.49
          l4-2,4,3,4.25-0.25,0.75,1.75h2.25l2,1.25,1.5,
          4,3.25,1.75,9.25,2.5,3-8.75,2.99,4.75,17.75-5.25,
          7.25-0.25-3-5,0.25-7.5-2.75-3-0.25-2.25,1.25
          -2.74-1.5-2.75-6.25-4.5v-1.5l5.75-1.25,4.25-5-0.5
          -7.75,1.25-4.25-1-2.75,5.75-8.24-2-2.5-7.25-0.25
          -1.25-5.75-0.25-5.75-0.75-3.75-1.36-1.67" />
     <path id="Niederoesterreich" fill-opacity="{(wahlbeteiligung/niederoesterreich div 100)}"
       d="M692.54,25.58l-0.5,4.255-1.5,4.004,2.75,11.494
          -0.75,3.753-0.99,3.988,0.49,3.25-0.24,2.999-1.51,
          4.758,1.01,3.25,1.74,3.251-1.49,3.25h-1.51l-2.75
          -1.508-6.5-1.004h-7.23l-1.26,9.248-7.74,8.259
          -1.76,6.736,0.5,8.747-1.74,6,0.23-0.24v2.75
          h4.26l4.25,0.74,5,2.01,4.5,1.49,5.5,0.5,4.74,3-0.75,
          2.75-2.5,0.25-2.24,3.25-0.76,2.25,0.76,2.49,5.74,
          4.51,2.5,1,0.25,6.25h3v1.75l0.25,4.74-0.25,2.51,
          1.99,3.23,0.51,3.76-0.25,5.74,0.25,5.01,0.75,8
          -1.74-1.01-2.26-0.99-2-1.76-2.75,0.25-2.24,0.25-2.5,
          1.76-3.25,3.49-2.51,3.25-2.5,1-3,0.76-2.74,0.74
          -3,0.75-4.49,1.26-5.01-1.51-1.74-1.24-2.75-3-3-3.25
          -0.76-2.01-3.5-0.24-4.49-0.5-5.01,3.99-0.48,4.51,
          0.48,5.24-1.24,4.99,2.5,4.76-1.01,1.74-1.24,3.51
          -2.26,4.75,1.01,3.74,4.99,4,2.76,2.25,2.75,2.26,
          2.75,0.49,2.5,1.5,1.99,2,3.75,3,4.01,1.25,3,1.24
          h2.74l3.99,1.76,4.51,3.76,0.75,3.98-2.01,1.51v3.5
          l-1.74,3.74-1.26,2.26v3l1.76,4.74-0.85,4.35,1.1,
          1.9,2.75,2.25,3-2.5,6.99,0.25,2.76,0.5,2,0.99,4,3.5
          s1.73,0.26,3.23,0.51,3.25-1.24,3.25-1.24l2.52
          -5.77,3-0.73,4.49-0.51,3,1.75,2.49-0.74,4.26-2.26,
          4.74-2,5.26-1.25,1.99-5.75,1.5-0.99,2.51-2.75,
          3.25,0.74,3.99-0.99,2.24-2.26,2.51-0.49h3.99
          c1.75,0,5.01,4.75,5.01,4.75l3,3.75s4.5,0.5,5.5,0.5,
          4.99,1.49,4.99,1.49l3.5,4.26,5.25-0.76h5.49l2.26,
          5,3,0.5,3.99,0.5h4.51l2.24,6.25,3.5,8.5,3-5.5,
          5.25,0.25,1.75,6.5-0.5,5,5.25-0.51,3.25,2.75,2.24,
          3.5,1.76,3.76h4.99,5.75l1.26,1.74,1.74,1,4.76
          -0.25,3-3,0.48,7.74,2.77,2.77,3.99,3.74,5.74-0.51,
          4.76-0.48,4.24-3.76,4-3.25,3.51-4,1.49-3.99-3.99
          -4-0.25-5,0.5-3,2.5-2.01,0.99-2.74v-3l2.26-2.75-0.25
          -2.75-1.76-2.24-4.24-4.26-2.75-2.24-2.26-3.51
          -0.74-2.24-1-4.26v-5.74l2.99-2.75,3.25,0.5v-3.5
          l2.25-3.75-0.75-4.74-0.74-4.01,3.5-4.99,1.74-2.5,3.5
          -3,6.25-1.25,3-1.01,4.74,3,2.5,2.5,3.5-2.75,2.5-2.25
          v-4.24l3.25-1.5,3.75-2,1.01-3,0.25-5.51,3.74
          -1.99,4.75-2,5.25-2.99,3-4.26,4-3.5h4.24l5.01,3.5,
          2.75,2.01,1.49-2.01,0.25-3.99-1.49-4.25,5.49-2,
          1.24,1.49,3.25-3.25,3.38-3.37-0.09-0.17-1.78-2.2
          h-2.24l-3-1.01-3.25-3.48-2.75-0.51-1.51-5.26-1-3.73
          -1.49-4.01v-5.74l-3.76-1.01-1-1.49-2.75-3.5-0.99
          -4.51-6.5-3.48-1.51-4.51,1.76-2.25-0.25-12.75,3-6.5,
          3-5.493,3.5-5.998-2.5-7.003v-3.737l-1.25-4.255
          -4.26-13.504-3.74-4.491-5.26,3h-7.23l-3.51-4.004-5.49
          -0.754-0.75,2.261-2.5,1.24-1.01-3.25v-4.239l-3.75-3.502
          -5.24,2.497-9.25-4.994-3.75,2.497-5-1.256-4,
          11.258-5.5,3.988-2.24-1.994h-2.25l-2.01,2.999-1.74-1.743
          h-1.26l-8.24,0.738-9-1.742-2.49,1.994h-5.5
          l-17.26-9.751-2.49-3.988-13.99-7.255h-6.76l-0.5,1.759
          -1.24,2.496-9-0.753-1.25-1.743-3-2.01-4.26
          -2.245-6.23-0.754-7.25-1.492-4.75-6.5h-5.99l-9.75-4.758
          -4.51,1.759-3.99-2.748-1.76,7.741-5.74-0.251
          -3.76,2.999-3.73-0.487,2.49-4.507-3.25-4.993h-8.74
          l-2.01-2.01-9-0.502zm181.06,111.83h0.11c0.46,0.28,
          0.96,0.5,1.39,0.82,1.13,0.34,0.99,1.38,1.01,2.33,
          0.77,1.12,0.26,2.57,0.41,3.84,1.79,1.26,3.58,2.53,
          5.34,3.84,0.23,0.34,0.46,0.41,0.66,0.33,0.43-0.18,
          0.72-1.13,0.62-1.63,0.03-0.84-0.55-1.95-0.23-2.61,
          1.57-0.18,3.1,0.35,4.43,1.17,1.27,0.46,0.3,1.46-0.03,
          2.22-0.89,1.01,0.56,1.27,0.51,2.25,1,0.32,1.25,
          1.43,2.45,1.29,0.85-0.08,1.67-0.53,2.58-0.14-0.17,
          1.59-0.85,3.07-1.16,4.63,1.13-0.06,1.16,0.89,2.12,
          0.85-0.54,1.28-0.75,2.65-0.95,4.02,0.14,1.11-0.37,
          2.06-0.84,3.03-0.55,0.81-0.76,1.68-0.41,2.62,0.45,
          0.97,0.35,1.93-0.07,2.89,0.51,0.66-0.46,1.49-0.2,
          2.42,0.2,1.1,1.95,0.37,1.4-0.55,0.26,0.02,0.43,0.06,
          0.53,0.14,0,0,0.02,0.01,0.02,0.01,0,0.01,0.01,0.02,
          0.01,0.02,0.01,0,0.02,0.01,0.02,0.01,0,0.01,0.01,
          0.02,0.01,0.02l0.02,0.02v0.01c0.21,0.42-0.7,1.28
          -0.35,1.92,0.02,0.03,0.06,0.07,0.08,0.11,0.08,0.09,
          0.19,0.17,0.33,0.25v0.01c0.01,0.2,0.19,0.61,0.41,
          0.87,0.1,0.11,0.22,0.19,0.33,0.22h0.11c0.15-0.03,
          0.31-0.15,0.44-0.46,0.05,0.17,0.12,0.31,0.19,0.4,
          0.02,0.02,0.05,0.05,0.08,0.07,0.02,0.02,0.05,0.04,
          0.08,0.05,0,0,0.02,0.01,0.03,0.02,0.01,0,0.04,0.01,
          0.06,0.01h0.06,0.08c0.32-0.03,0.72-0.31,1.2-0.55,
          1.13-0.19,1.17,1.31,0.56,1.89,0.72,0.57,0.96,1.83,
          0.47,2.49,0.22,0.75,0.22,1.19,0.06,1.43,0,0.01-0.02,
          0.04-0.03,0.05,0,0.01-0.02,0.02-0.03,0.03-0.02,0.02
          -0.04,0.03-0.06,0.05-0.01,0.01-0.04,0.02-0.05,0.03
          -0.76,0.38-2.82-1.01-3.94-1.15-2.03-0.33-2.76-2.62
          -4.52-3.44-0.9-0.9-2.08-0.33-3.08,0.04-0.92-0.31-1.4
          -0.38-2.13,0.34-0.45-0.23-0.77-0.31-1.01-0.27-0.06,
          0.02-0.12,0.04-0.17,0.07-0.03,0.01-0.06,0.03-0.08,
          0.04-0.26,0.18-0.46,0.54-0.72,0.99-0.87,0.56-1.14,
          1.5-1.98,2.01-0.94,1.5-2.54,1.24-4.19,1.23-0.9,0.36,
          0.25,1.79-0.04,2.59,0.1,0.51,0.31,0.98,0.3,1.24,0,0.01
          -0.01,0.03-0.01,0.05v0.03s-0.02,0.02-0.02,0.03
          v0.01c0,0.01-0.01,0.02-0.01,0.02-0.02,0.02-0.03,
          0.04-0.05,0.05,0,0-0.01,0.01-0.02,0.01-0.02,0.02-0.07,
          0.02-0.11,0.02-0.16,0.01-0.43-0.05-0.85-0.21-1-0.96
          -1.28,0.72-2.37,0.19-0.13,0.29-0.26,0.46-0.37,0.54
          -0.02,0-0.04,0.02-0.05,0.03-0.01,0-0.03,0.01-0.05,
          0.01-0.01,0.01-0.04,0-0.06,0-0.01,0-0.03,0.01-0.05,
          0-0.01,0-0.03-0.01-0.04-0.01-0.02-0.01-0.05-0.01-0.07
          -0.02-0.01,0-0.03-0.02-0.04-0.03-0.28-0.17-0.59
          -0.61-1.01-0.85-1.28-0.09-2.23-1.21-3.55-0.99-1.39
          -0.44-3-0.44-4.21-1.31-1.25-0.58-2.69-0.73-3.97-1.29
          -0.04,0.03-0.1,0.07-0.14,0.11-0.48,0.49-0.67,1.6-1,2.29
          -0.03,0.19-0.09,0.34-0.15,0.42-0.02,0.04-0.06,
          0.08-0.09,0.1,0,0-0.01,0.01-0.02,0.01,0,0.01-0.02,0.02
          -0.03,0.02,0,0-0.02,0.01-0.03,0.02-0.01,0-0.02
          -0.01-0.03,0-0.01,0-0.02,0.01-0.03,0.01-0.12,0.02-0.26
          -0.01-0.38,0.02-0.01,0-0.02-0.01-0.03,0-0.01,0
          -0.02,0.01-0.03,0.01-0.01,0.01-0.03,0.01-0.03,0.02-0.01,
          0-0.01,0.01-0.02,0.01-0.02,0.02-0.05,0.05-0.08,
          0.08-0.08,0.12-0.13,0.32-0.15,0.68-0.02,0.22-0.09,0.36
          -0.18,0.42-0.03,0.02-0.08,0.03-0.12,0.03-0.45,0
          -1.27-0.99-1.63-1.28,0.1-0.57-0.03-0.87-0.29-1.03-0.34
          -0.19-0.89-0.18-1.41-0.31-0.02,0.02-0.06,0.04
          -0.08,0.05-0.01,0-0.02,0.01-0.03,0.01-0.94,0.41-2.28
          -1.82-3.67-0.5-1.41,1.26-3.68-0.43-5.16,1.05-0.77,
          0.42-1.71,1.1-2.48,0.52,0.46-0.95,1.61-0.75,2.42-1.14,
          0.52-0.12,0.91-0.33,1.1-0.62,0.02-0.02,0.04-0.05,
          0.05-0.08,0.03-0.06,0.07-0.15,0.08-0.23,0.02-0.2-0.03-0.44
          -0.18-0.69-0.85,0.14-1.71,0.21-2.56,0.39,
          0.01-0.96-1.1-1.48-1.25-2.46-0.19-0.2-0.28-0.36-0.32-0.48,
          0-0.01-0.01-0.03-0.01-0.04v-0.02-0.01-0.02-0.02
          s0.01-0.01,0.01-0.01c0.01,0,0-0.01,0-0.02,0.01,0,0-0.01,0
          -0.01,0.01-0.01,0.02-0.03,0.02-0.03,0-0.01,
          0.01-0.02,0.02-0.02,0.27-0.36,1.7-0.21,2.05-0.74,0.01-0.01,
          0.03-0.03,0.03-0.05,0.01,0,0.02-0.02,0.02
          -0.03,0,0,0.01-0.02,0.02-0.03,0-0.01-0.01-0.03,0-0.04,0
          -0.02,0.01-0.04,0.01-0.05v-0.03c-1.07-0.09
          -2.13-0.22-3.19-0.4-0.19,0.1-0.36,0.15-0.48,0.16-0.04,
          0-0.09,0.01-0.13,0h-0.03c-0.01,0-0.02-0.01
          -0.03-0.01-0.01-0.01-0.03-0.02-0.03-0.02h-0.02s-0.01
          -0.01-0.01-0.02c-0.01,0-0.03-0.01-0.04-0.01,0,0
          -0.01-0.02-0.01-0.02s-0.01-0.01-0.02-0.01c0-0.01-0.01
          -0.01-0.01-0.02-0.38-0.43-0.1-1.86-0.65-2.56
          -0.1-0.13-0.24-0.25-0.42-0.31-0.81-0.07-1.16-0.21-1.26
          -0.41-0.17-0.41,0.64-1.06,0.68-1.79,0.43-0.58,
          1.27-1.13,1.62-1.79,0.69-0.41,0.57-1.56,0.73-2.32,0.34
          -0.89,0.82-1.62-0.06-2.33,0.35-0.35,0.75-0.69,
          0.9-0.97,0.01-0.02,0.02-0.06,0.03-0.08,0-0.02,0.01-0.06,
          0.01-0.08,0.01-0.02,0-0.05,0-0.06,0-0.03-0.01
          -0.08-0.03-0.11-0.01-0.03-0.04-0.07-0.06-0.1-0.01,0-0.02
          -0.02-0.03-0.03-0.11-0.1-0.29-0.19-0.57-0.28
          -0.03,0.02-0.06,0.03-0.09,0.05-0.02,0-0.05,0.01-0.06,0.01
          -0.02,0.01-0.04,0.02-0.05,0.02s-0.04,0.01-0.05,
          0.01c-0.01,0.01-0.05,0-0.06,0-0.75,0.01-1.42-1.48-0.93-1.99,
          0,0,0.01-0.01,0.02-0.02,0,0,0.01-0.01,0.01
          -0.01,0.01-0.01,0.03-0.01,0.03-0.02,0.01,0,0.02-0.01,0.02
          -0.01,0.01-0.01,0.02-0.01,0.03-0.02,0.01,0,0.03
          -0.01,0.03-0.01,0.03-0.02,0.08-0.04,0.11-0.05,0.04-0.01,0.1
          -0.01,0.14-0.02h0.15c-0.01-0.03-0.01-0.06
          -0.02-0.09,0-0.01-0.01-0.03-0.02-0.03,0-0.01-0.01-0.03-0.01
          -0.03,0-0.01-0.01-0.03-0.02-0.04-0.31-0.51
          -1.74-0.21-2.05-0.28-0.01,0-0.03-0.01-0.04-0.01h-0.01v-0.02
          -0.01-0.02-0.02c0.05-0.07,0.22-0.2,0.56-0.39,
          0.43-0.61,1.16-0.67,1.4-0.94,0,0,0.02-0.01,0.02-0.02,0.01-0.01,
          0.02-0.03,0.03-0.04,0-0.01,0.01-0.03,0.01
          -0.04,0.01,0,0-0.01,0-0.01,0.01-0.01,0.02-0.03,0.02-0.03v-0.05
          -0.05c0-0.02,0.01-0.05,0-0.08-1.19-0.8-0.91
          -2.36-0.61-3.53,0.18-0.92,0.82-1.6,1.14-2.51,0.26-0.31,0.35
          -1.03,0.57-1.38,0.04-0.06,0.09-0.13,0.14-0.16,
          0.03-0.02,0.08-0.04,0.11-0.05,0.03,0,0.08,0.01,0.11,0.02,
          0.11,0.03,0.25,0.11,0.41,0.28,1.35,0.64,2.32,
          1.74,3.31,2.83,0.44,0.01,0.77,0.18,0.96,0.44,0.24,
          0.35,0.23,0.86-0.09,1.38,0.44,1.09,1.5,0.89,2.29,0.57,
          0.32,0.08,0.47-0.01,0.56-0.16,0.14-0.25,0.13-0.68,0.25
          -0.94,0.02-0.03,0.04-0.06,0.05-0.08,0.02-0.02,
          0.04-0.05,0.06-0.07,0.1-0.07,0.24-0.09,0.46-0.04,0.67
          -0.56,0.96-1.14,1.26-1.84-0.31-0.03-0.48-0.06-0.55
          -0.11-0.01,0-0.02-0.01-0.02-0.02,0,0-0.01-0.01-0.02
          -0.01,0,0,0.01-0.01,0-0.02v-0.01c0.01,0,0-0.02,0-0.02,
          0.01-0.01,0.03-0.02,0.04-0.03,0,0,0.01-0.01,0.01-0.02,
          0.02-0.01,0.05-0.03,0.08-0.04,0.35-0.17,1.28-0.36,
          1.6-0.38,1.45,0.18,1.24-0.86,2.31-1.38,0.26-0.21,0.35
          -0.37,0.35-0.49-0.01-0.05-0.05-0.1-0.08-0.14-0.23
          -0.21-0.89-0.28-1.07-0.47-0.01-0.01-0.01-0.02-0.02
          -0.03,0,0-0.01-0.01-0.01-0.02,0,0-0.02-0.02-0.02-0.03
          v-0.05c0.01-0.05,0.06-0.11,0.13-0.18,0.39-0.72,1.31-1.12,
          2.13-1.02,0.96,0.84,2.41-0.49,2.88-1.15,0.66,
          0.25,1.21,0.24,1.58-0.09,0.03-0.03,0.07-0.07,0.1-0.1,0.09
          -0.11,0.17-0.26,0.23-0.42,0.56-0.53,2.51-0.66,
          1.75-1.6-0.12-0.14-0.17-0.26-0.18-0.33v-0.02s0.02-0.01,0.02
          -0.02v-0.01-0.02s0.01-0.01,0.01-0.01c0.01,0,0
          -0.02,0-0.02,0.02-0.02,0.05-0.03,0.07-0.05,0.37-0.17,1.71,
          0.37,1.65,1.17-0.01,0.02-0.01,0.06-0.02,0.09
          -0.01,0.02-0.02,0.06-0.03,0.08,0.91-0.2,1.75,0.98,2.53,0.49
          -0.22-0.43-0.21-0.97,0.09-1.28,0.2-0.19,0.54
          -0.3,1.02-0.22,0.23-0.02,0.36-0.09,0.41-0.2,0.19-0.46-0.79
          -1.5-0.41-2.03-0.06-0.28-0.02-0.46,0.08-0.58,
          0.24-0.27,0.81-0.2,1.07-0.31,0.07-0.03,0.11-0.09,0.12-0.16,
          0.01-0.08-0.04-0.22-0.15-0.39-0.31-0.63-0.02
          -1.49-0.55-2.18-0.13-0.36-0.06-0.61,0.11-0.79,0.36-0.38,1.16
          -0.48,1.36-0.92,0.04-0.05,0.08-0.07,0.11-0.1,
          0.02-0.01,0.05-0.02,0.07-0.03,0.01-0.01,0.04-0.01,0.06-0.02
          h0.05c0.01,0.01,0.04,0.01,0.06,0.02,0.04,0.02,
          0.1,0.06,0.14,0.09,0.35,0.32,0.74,1.17,1.46,0.96,0.59
          -0.94,1.81-1.2,2.86-1.3z"
	fill-rule="nonzero"  />
     <path id="wien" fill-opacity="{(wahlbeteiligung/wien div 100)}"
       d="M873.71,137.49c-1.07,0.09-2.36,0.33-2.97,1.3-1.04,0.31
          -1.37-1.61-1.94-0.92-0.29,0.65-1.88,0.55-1.48,
          1.71,0.54,0.69,0.25,1.56,0.56,2.19,0.74,1.11-1.44,
          0.06-1.12,1.44-0.47,0.66,1.19,2.12,0,2.23-1.23-0.22
          -1.48,0.78-1.12,1.48-0.78,0.49-1.61-0.68-2.52-0.48,
          0.41-1.19-2.4-1.9-1.52-0.86,0.76,0.94-1.19,1.07
          -1.75,1.6-0.3,0.82-1.01,0.96-1.92,0.61-0.47,0.66
          -1.91,1.98-2.87,1.14-0.83-0.09-1.75,0.31-2.14,1.03
          -0.7,0.69,1.99,0.38,0.72,1.41-1.07,0.52-0.86,1.56
          -2.3,1.39-0.54,0.04-2.78,0.51-1.15,0.65-0.3,0.71
          -0.58,1.27-1.25,1.83-1.14-0.26-0.23,1.6-1.39,1.29
          -0.79,0.32-1.84,0.54-2.28-0.55,0.57-0.92,0.18-1.8
          -0.86-1.83-1-1.09-1.97-2.18-3.33-2.82-0.92-1-0.9,
          0.75-1.33,1.28-0.32,0.91-0.96,1.6-1.14,2.52-0.29,
          1.17-0.59,2.73,0.6,3.53,0.13,0.59-0.91,0.47-1.47,
          1.26-1.89,1.07,1.51-0.17,1.6,0.93-1.48-0.09-0.32,
          2.69,0.7,2.06,1.35,0.42,0.45,1-0.25,1.71,0.88,0.71,
          0.41,1.44,0.07,2.33-0.16,0.76-0.04,1.92-0.73,2.33
          -0.34,0.66-1.19,1.2-1.63,1.78-0.05,1.1-1.87,2.01,
          0.58,2.2,1.47,0.56,0.12,3.74,1.88,2.83,1.06,0.17,
          2.13,0.3,3.2,0.39-0.06,1.08-3.18,0.28-1.85,1.64,
          0.15,0.98,1.26,1.52,1.25,2.48,0.84-0.19,1.71-0.26,
          2.56-0.4,0.48,0.83-0.05,1.4-1.05,1.62-0.81,0.39
          -1.96,0.19-2.42,1.14,0.77,0.57,1.71-0.1,2.48-0.52,
          1.48-1.48,3.75,0.2,5.15-1.05,1.45-1.37,2.83,1.11,
          3.78,0.45,0.92,0.22,1.95-0.01,1.71,1.32,0.49,0.41,
          1.82,2.1,1.92,0.84,0.09-1.57,0.9-0.15,1.1-1.39,
          0.36-0.75,0.55-2.02,1.15-2.41,1.28,0.56,2.72,0.71,3.97,
          1.28,1.21,0.88,2.82,0.88,4.22,1.33,1.32-0.22,2.25,
          0.88,3.54,0.98,0.78,0.45,1.17,1.62,1.74,0.34,1.08,
          0.53,1.37-1.17,2.38-0.2,1.6,0.62,0.96-0.19,0.77
          -1.24,0.28-0.8-0.87-2.24,0.02-2.6,1.65,0.01,3.25,0.27,
          4.19-1.23,0.85-0.51,1.12-1.45,1.98-2.01,0.55-0.94,
          0.77-1.45,1.99-0.83,0.73-0.72,1.2-0.65,2.13-0.35,1
          -0.36,2.18-0.92,3.08-0.02,1.76,0.81,2.48,3.09,4.51,
          3.43,1.58,0.19,5.05,2.9,4.07-0.44,0.48-0.67,0.23
          -1.92-0.49-2.49,0.62-0.57,0.58-2.07-0.55-1.88-0.86,
          0.43-1.51,1-1.78-0.03-0.52,1.24-1.29-0.22-1.29
          -0.62-1.51-0.81,1.1-2.39-0.67-2.52,0.56,0.93-1.21,
          1.66-1.4,0.55-0.26-0.92,0.7-1.75,0.2-2.41,0.41
          -0.96,0.52-1.92,0.07-2.88-0.35-0.94-0.15-1.81,0.4
          -2.63,0.48-0.97,1-1.92,0.86-3.04,0.19-1.36,0.4
          -2.73,0.93-4.01-0.95,0.05-0.97-0.92-2.11-0.85,
          0.31-1.57,0.99-3.03,1.15-4.63-0.91-0.38-1.72,0.06
          -2.57,0.14-1.2,0.14-1.45-0.97-2.45-1.29,0.04-0.98
          -1.4-1.25-0.51-2.25,0.33-0.76,1.3-1.76,0.03-2.22
          -1.32-0.82-2.86-1.34-4.43-1.16-0.32,0.66,0.26,1.76,
          0.23,2.6,0.15,0.72-0.52,2.41-1.29,1.3-1.75-1.32
          -3.54-2.59-5.34-3.85-0.15-1.27,0.37-2.7-0.4-3.82
          -0.02-0.95,0.11-1.99-1.01-2.34-0.44-0.32-0.94-0.55
          -1.4-0.82z" />
      </g>
    </svg>
</xsl:template>
</xsl:stylesheet>

Zu XSLT siehe auch das Buch zu Websiteentwicklung: XSLT.

SVG: