SVG Tutorial

clip-path
Voreinstellung: none.
Mit dem Attribut clip-path können Sie ein zuvor definiertes clip-path-Element referenzieren (siehe Masken). Als Wert aktzeptiert dieses Attribut eine gültige URL oder none.

clip-rule
Voreinstellung: nonzero.
Mit der Eigenschaft clip-rule können Sie bestimmen welches die innere Fläche des zuvor mit clip-path festgelegten Pfades ist. Diese Festlegung ist von Bedeutung, wenn sich der Pfad überschneidet. Mögliche Werte sind nonzero und evenodd.

cursor
Voreinstellung: auto.
Durch Verwendung dieses Attributes können Sie die Anzeige des Mauszeigers an Ihre Wünsche anpassen. Einige mögliche Werte sind: crosshair (kreuz), default (Standard Mauszeiger des Systems), pointer (Mauszeiger für eine Verweis), busy (beschäftigt) oder help (hilfesymbol). und es gibt noch weitere vordefinierte Werte.
Außerdem akzeptiert das Attribut cursor noch eine URL als Wertzuweisung. Sie können sich Ihren Mauszeiger also selbst malen :-).
Der Adobe SVG-Viewer 3.0 unterstützt dieses Attribut aber leider noch nicht :-(.

display
Voreinstellung: inline.
Das Attribut display entspricht der gleichnamigen CSS 2 Eigenschaft. Es akzeptiert eine Reihe von Werten, wobei die wichtigsten inline (die Voreinstellung) und none sind.
Der Wert none bewirkt, das das entsprechende Element und all seine Kind-Elemente nicht am Bildschirm dargestellt werden. Wenn Sie also einem Container-Element (z.B. g) das Attribut display mit dem Wert none zuordnen, wird keines der Elemente innerhalb des Containers angezeigt.
Hierdurch unterscheidet sich die Verwendung von display vom Gebrauch des Attributs visibility (siehe unten).

filter
Voreinstellung: none.
Mit dem Attribut filter können Sie einem Element einen zuvor definierten Filter (siehe Filtereffekte) zuordnen. Das Attribut akzeptiert eine URL oder none als Wert.

image-rendering
Voreinstellung: auto.
Durch das Attribut image-rendering können Sie das Verhalten des user agents bei der Dastellung des image-Elements beeinflussen. Mögliche Werte sind auto, optimizeSpeed und optimizeQuality.
Der Wert auto errechnet automatisch einen günstigen Mittelwert zwischen Qualität und Geschwindigkeit der Anzeige, wo bei die Qualität etwas höher gewichtet wird. Mit optimizeSpeed wird die Qualität verschlechtert und die Geschwindigkeit der Anzeige erhöht. Der Wert optimizeQuality bewirkt das Gegenteil - besser Qualität, langsamere Darstellung.

mask
Voreinstellung: none.
Mit dem Attribut mask können Sie einem Element eine zuvor, durch das mask-Element definierte Maske zuordnen (siehe Masken) zuordnen. Das Attribut akzeptiert eine URL oder none als Wert.

opacity
Voreinstellung: 1.
Mit dem Attribut opacity können Sie die Durchsichtigkeit (Transparenz) eines gesamten Objekts (Füllfarbe und Randlinie) bestimmen. Zulässige Werte liegen zwischen 0 und 1. 0 bedeutet völlige Tranzparenz, 1 bedeutet keine Transparenz.

pointer-events
Voreinstellung: visiblePainted.
Wenn Sie ein Element zum Ziel von Maus-aktionen machen (z.B. durch die Definition als Hyperlink), können Sie mit dem Attribut pointer-events festlegen, wann genau das Ereignis ausgelöst werden soll. Im weitesten Sinn heißt das: über welche Fläche des Elements der Mauszeiger bewegt werden muß, um das Ereignis auszulösen.
Mögliche Werte sind visiblePainted (sichtbare Füllfarbe und/oder sichtbare Randlinie), visibleFill (sichtbare Füllfarbe), visibleStroke (sichtbare Randlinie), visible (das gesamte sichtbare Element), painted (Füllfarbe und/oder Randlinie), fill (Füllfarbe), stroke (Randlinie), all (das gesamte Element) und none (nix).

shape-rendering
Voreinstellung: auto.
Durch das Attribut shape-rendering können Sie das Verhalten des user agents bei der Dastellung SVG-eigener Formen, wie Pfade oder Grundformen, beeinflussen. Mögliche Werte sind auto, optimizeSpeed und optimizeQuality.
Der Wert auto errechnet automatisch einen günstigen Mittelwert zwischen Qualität und Geschwindigkeit der Anzeige, wo bei die Qualität etwas höher gewichtet wird. Mit optimizeSpeed wird die Qualität verschlechtert und die Geschwindigkeit der Anzeige erhöht. Der Wert optimizeQuality bewirkt das Gegenteil - besser Qualität, langsamere Darstellung.

text-rendering
Voreinstellung: auto.
Durch das Attribut text-rendering können Sie das Verhalten des user agents bei der Dastellung des text-Elements beeinflussen. Mögliche Werte sind auto, optimizeSpeed und optimizeQuality.
Der Wert auto errechnet automatisch einen günstigen Mittelwert zwischen Qualität und Geschwindigkeit der Anzeige, wo bei die Qualität etwas höher gewichtet wird. Mit optimizeSpeed wird die Qualität verschlechtert und die Geschwindigkeit der Anzeige erhöht. Der Wert optimizeQuality bewirkt das Gegenteil - besser Qualität, langsamere Darstellung.

visibility
Voreinstellung: visible.
Wenn Sie einzelne Elemente nicht darstellen wollen, können Sie diesen das Attribut visibility mit dem Wert hidden zuordnen. Der zweite mögliche Wert für dieses Attribut ist visible: normale Anzeige des Elements.
Im Gegensatz zu display vererbt sich die Eigenschaft von visibility nicht auf mögliche Kind-Elemente (siehe oben), wenn diese durch visible als sichtbar definiert werden.

Beispiel Quellcode

<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="400"
  xmlns:xlink="http://www.w3.org/1999/xlink">
<title>PresentationAttributes-Graphics</title>
<desc>Anwendungsbeispiele</desc>
<defs>
  <style type="text/css">
  <![CDATA[
    text {font-family:Verdana,sans-serif; font-size:14px;}
    ellipse {fill:lightslategray;}
    circle {fill:goldenrod; opacity:.5;}
    line {fill:none; stroke:black; stroke-dasharray:8,4;}
  ]]>
  </style>
</defs>

<!-- viermal die gleiche Gruppe: sichtbar und unsichtbar -->
  <g>
    <ellipse cx="80" cy="60" rx="70" ry="20" visibility="visible" />
    <circle cx="80" cy="50" r="30" />
  </g>
  <g visibility="hidden">
    <ellipse cx="80" cy="160" rx="70" ry="20" />
    <circle cx="80" cy="150" r="30" visibility="visible" />
  </g>
  <g visibility="hidden">
    <ellipse cx="80" cy="260" rx="70" ry="20" visibility="visible" />
    <circle cx="80" cy="250" r="30" visibility="visible" />
  </g>
  <g display="none">
    <ellipse cx="80" cy="360" rx="70" ry="20" visibility="visible" />
    <circle cx="80" cy="350" r="30" visibility="visible" />
  </g>

<!-- texte und hilflinien -->
  <text x="560" y="30" writing-mode="tb"
    style="font-size:30px; font-weight:bold;" >
    visibility und display
  </text>
  <text x="170" y="35">Gruppe: -
  <tspan x="190" dy="20">Ellipse: - </tspan>
  <tspan x="210" dy="20">Kreis: - </tspan>
  </text>
  <text x="170" y="135">Gruppe: visibility hidden
  <tspan x="190" dy="20">Ellipse: - </tspan>
  <tspan x="210" dy="20">Kreis: visibility visible</tspan>
  </text>
  <text x="170" y="235">Gruppe: visibility hidden
  <tspan x="190" dy="20">Ellipse: visibility visible</tspan>
  <tspan x="210" dy="20">Kreis: visibility visible</tspan>
  </text>
  <text x="170" y="335">Gruppe: display none
  <tspan x="190" dy="20">Ellipse: visibility visible</tspan>
  <tspan x="210" dy="20">Kreis: visibility visible</tspan>
  </text>
  <line x1="20" y1="100" x2="500" y2="100" />
  <line x1="20" y1="200" x2="500" y2="200" />
  <line x1="20" y1="300" x2="500" y2="300" />
</svg>