HTML-Code:
<svg width="28" height="28">
<g fill="yellow" stroke="black">
<rect fill="red" x="3" y="3" width="10" height="10" />
<g fill="blue">
<rect fill="green" x="15" y="3" width="10" height="10" />
<rect x="3" y="15" width="10" height="10" />
</g>
<rect x="15" y="15" width="10" height="10" />
</g>
</svg>
(Ergibt das bunte Windows-Logo.)
Die Standardfüllung von SVG ist schwarz. Die erste Gruppe (g) setzt die Füllung für alle Kindelemente auf gelb und die Kontur auf schwarz. Das erste Rechteck setzt die Füllung auf rot, behält aber die Kontur bei. Nachdem das Rechteck gezeichnet ist, müssen alle Eigenschaften zurückgesetzt werden, die das Rechteck gesetzt hat. Die zweite Gruppe (g) setzt die Füllung für alle Kindelemente auf blau und behält die Kontur bei. Das erste Rechteck setzt die Füllung auf rot, behält aber die Kontur bei. Nachdem das Rechteck gezeichnet ist, müssen alle Eigenschaften zurückgesetzt werden, die das Rechteck gesetzt hat. Das dritte Rechteck (zweites der zweiten Gruppe) wird nun mit der Füllung der Gruppe gezeichnet. Diese wird allerdings sofort danach ebenfalls zurückgesetzt auf die Farbe Gelb der Elterngruppe. Diese wird für das letzte Rechteck benötigt. Nach dem Ende der Gruppe ist die Füllung wieder zurück auf Standard, also schwarz.
Der Kontext muss deshalb natürlich auf dem Stapel abgelegt werden. Soweit ich den Vortrag auf den Delphi-Tagen dieses Jahr richtig verstanden habe, wird da von Delphi optimiert, damit keine Dinge kopiert werden, die man nicht schreibt.