Einführung in SVG

Diese (einstweilen nur in deutscher Sprache vorliegende) Einführung richtet sich an absolute Newcomers, an Mitmenschen die noch keinerlei Ahnung von Skalierbarer Vektorgrafik (scaleable vector graphics, SVG) haben. Es wird versucht, von Null beginnend einige einfache Erläuterungen zu geben, die Grundlagen zu erklären und schrittweise ein Verständnis aufzubauen, damit das Lesen und Verstehen einfachen SVG-Codes möglich wird. Mit diesen Kentnissen wird auch die manuelle Erzeugung von einfachen SVG-Grafiken gelingen. Auf die verschiedenen Möglichkeiten mit klugen Werkzeugen solche Grafiken zu erstellen wird hier nicht Bezug genommen. Wie auch bei anderem, verhilft das Selbst-Ausprobieren zu viel innigerem Verständnis, als etwas nur einfach zu lesen – Praxis hilft mehr als Theorie! Deshalb wird immer wieder auf die Möglichkeit zum Variieren verwiesen.
Eine technisch exaktere und ausführlichere Einführung ist erforderlichenfalls unter SVG nachzulesen.

Allgemeine Voraussetzungen

Für jede einzelne SVG-Grafik gibt es eine eigene Datei, welche den SVG-Code enthält. Der Code der hier gezeigten Beispielgrafiken wird vom Wikimedia-eigenen Werkzeug librsvg in die sichtbaren Grafiken umgesetzt. Alle Dateien mit dem SVG-Code können aus der Wikipedia auf den eigenen Rechner heruntergeladen werden; alle Internetbrowser sind auch imstande, offline den SVG-Code von so einer Datei als sichtbare Grafik anzuzeigen. Statt eine Grafik anzuzeigen, kann der Code selbst angezeigt, editiert und gespeichert werden.

1. Das Herunterladen ist konfigurationsabhängig, im allgemeinen bewirkt das einfache Anklicken einer Grafik den Wechsel vom Artikel zur Datei. Beim Rechtsklick öffnet sich ein Menue, ein Punkt davon wird "Ziel speichern unter ..." oder ähnlich lauten. Bei der Auswahl dieses Menuepunktes kann ggf. der Dateiname und der Speicherort modifiziert werden, was aber i.a. nicht erforderlich sein wird.
2. Auch der weitere Umgang mit der nunmehr heruntergeladenen Datei kann eine einmalige Konfigurationseinstellung erforderlich machen: mit einem Doppelklick wird aufgrund der Zuordnung der Dateiendung ".svg" zum eigenen Browser dieser veranlasst, den SVG-Code zu interpretieren und die Grafik anzuzeigen. Bei Rechtsklick gibt es wieder ein Menue: "Öffnen" ohne Angabe wird wie vorhin den Browser aufrufen, "Öffnen mit" bringt ein Submenue in dem wieder der Browser aufscheint (oder nun konfiguriert werden kann), oder ein Texteditor (der ggf. nun konfiguriert wird).

Als Texteditor ist besonders für SVG-Code Notepad++ zu empfehlen, der unentgeltlich aus dem Internet bezogen werden kann.

Mit diesen Voraussetzungen bzw. Konfigurationen kann alles gemacht werden, von den einfachsten Versuchen bis zu den komplexesten Arbeiten.

Grundlagen

Der Code für ein Grafik kann gültig oder ungültig sein. Zur Gültigkeit ist das Einhalten genau festgelegter Regeln erforderlich. Da ein sehr weiter Spielraum für gültige Codierungen besteht, beschränkt sich diese Einführung auf das Erforderliche – ohne zu verschweigen, dass immer eine Vielzahl zusätzlicher Angaben möglich ist, und überhaupt auch die einfachste Darstellung auf unendlich viele verschiedene Arten codiert werden kann.

Jede SVG-Codierung besteht aus drei wesentlichen Teilen: der Anfangsdeklaration, dem eigentlichen Code und der Schlussdeklaration.

1. Die Prämbel kann sehr umfangreich sein, im einfachsten Fall definiert sie in der ersten Codezeile die SVG-Version, und in der zweiten Zeile den Namensraum und die Abmessungen der Grafik:
   000<?xml version="1.0"?>
   000<svg xmlns="http://www.w3.org/2000/svg" width="258" height="128">
   Diese beiden Kommandozeilen sind für diese Einführung (und weit darüber hinaus) ausreichend; lediglich die Abmessungen müssen je nach der Grafik gewählt werden. Die Verwendung einfacher (') oder doppelter (") Hochkommata ist wahlfrei, solange sie paarig gesetzt werden.
   Die Zeilenbegrenzungen und die Parameter version=, xmlns=, width= und height= sind so zu schreiben; Abmessungen ohne Einheitenangabe gelten in der Einheit pixel "px".
2. Der Code kann aus einer bis sehr vielen SVG-Kommandozeilen bestehen.
3. Der Abschluss besteht nur aus dem schließenden </svg>

In diesem festgelegten Rahmen werdem wir uns im Rahmen dieser Einführung bewegen. Die erwähnten "Zeilen" müssen nicht durch Vorschübe separiert werden (SVG ist das egal), da aber wir den Code lesen können wollen, hilft eine solche Strukturierung sehr. Darüber hinausgehende Strukturierungen, wie zusätzliche Zwischenräume, Einrückungen, Leerzeilen, Zeilensplittungen sind stets möglich.

Der Code

Alle Punkte in einer Grafik werden durch Koordinatenpaare festgelegt. Es kann ein planes Koordinatensystem vorgestellt werden mit einer x-Achse in horizontaler und einer y-Achse in vertikaler Richtung. Der Nullpunkt beider Koordinaten befindet sich in der linken oberen Ecke der Grafik, die positiven Äste reichen nach rechts bzw. nach unten.

SVG/ Grundformen

Eine Anzahl von Grundformen können mit ihren englischen Namen abgerufen werden; die Codierung ist stets <grundform parameter/>, wobei die Parameter bzw. Attribute auch umfänglich sein können. Von den Grundformen line, rect, circle, ellipse, polyline, polygon und path behandelt diese Einführung kurz rect und circle, und vor allem das path Element. Mit den Koordinaten wird die Lage einer Form in der Grafik spezifiziert; die Attribute beschreiben u.a. die Farbe (oder auch Transparenz) einer Form, Strichstärken von Linien und viele weitere Eigenschaften. Es gibt eine Reihe von Standardwerten, welche die Angabe von Koordinaten und Attributen ersparen kann.
Beispiel 1: Die Grundform rect erfordert die Parameter x= und y= für die Distanz (der linken obere Ecke des Rechtecks) zum Usprung "0,0" sowie die Abmessungen mit width= und height=. Für das Koordinatenpaar x,y gilt der Standardwert "0,0", also die linke obere Ecke der Grafik. width und height sind obligatorische Parameter.
Als Attribut kann die Farbe vereinbart werden, der Standardwert ist hier schwarz. Wenn kein Rand oder Rahmen vereinbart ist, wird auch keiner gezeichnet - sonst kann eine Strichstärke (Standardwert ist "1") und eine Strichfarbe (Standardwert ist transparent) vereinbart werden.

Beispiel 1a

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" width="80px" height="40px">
<rect width="50px" height="20px"/>
</svg>

In einer Grafik mit den Außenmaßen 80 × 40 (px) ist links oben ein schwarzes Rechteck in den Maßen 50 × 20 eingeschrieben. Die Einheit (px) muss nicht, aber kann expliziert werden - die Angabe solcher Standardwerte ändert nichts; deshalb ist es am sinnvollsten sie wegzulassen. 1 px ist auf Bildschirmen zB mit 0,3 mm darstellbar.
Falls man sich Probleme aufhalsen will, kann man es auch mit anderen Einheiten versuchen.

Beispiel 1b

Mit dem Attribut "fill=" kann so einer Form Farbe verliehen werden. Die Definition einer Farbe kann per Namen erfolgen, oder in unterschiedlichen Notationen mit ihren rot-grün-blau Anteilen. Das wird an diesem Quadrat gezeigt.
Außerdem wird noch ein roter (stroke="red") Rand gezeichnet, und das Quadrat (mit x="6" y="3") ein wenig vom Rand abgerückt:

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="40">
<rect fill="chartreuse" x="6" y="3" width="30" height="30" stroke="red"/>
</svg>

Beispiel 2: Die Grundform circle erfordert die Parameter cx= und cy= für den Usprung (den Mittelpunkt des Kreises) und r= für den Radius; für das Koordinatenpaar cx,cy gilt wieder der Standardwert 0,0, also die linke obere Ecke der Grafik.

Beispiel 2a

Wie zu erwarten ist, wird bei fehlender Ursprungangabe ein Kreisviertel in der oberen linken Ecke hängen, denn drei Viertel sind zwar vorhanden aber außerhalb des sichtbaren Bereiches der Grafik: generell kann beliebig viel außerhalb dieses Bereichs gezeichnet werden - es bleibt eben verborgen!
Diesmal wurde mit fill="none" die Transparenz gewählt, und eine Umrandung stroke="aqua" in der Strichstärke 6 stroke-width="6":

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="40">
<circle fill="none" r="30" stroke="aqua" stroke-width="6"/>
</svg>

Beispiel 2b

Im folgenden Beispiel sind zwei Kreise gezeichnet, davon der rechte mit einem Rand.

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="40">
<circle fill="lime" cx="25" cy="20" r="12"/>
<circle fill="gold" cx="55" cy="20" r="12" stroke="cyan" stroke-width="6"/>
<path stroke="red" stroke-width=".2" d="M20,8h40m0,24H20"/>
</svg>

Obwohl beide Kreise mit demselben Radius r="12" gezeichnet sind, wird der rechte durch den Rand stroke="cyan" insofern verändert, dass die Mitte dieser Umrandung auf dem Umfang liegt. Von den stroke-width="6" liegen 3 px innerhalb des Kreises, der nun den Radius 12 - 3 = 9 px hat, während 3 px außerhalb liegen und die Gesamtgröße nun den Radius 12 + 3 = 15 px hat. Dies kann im Vergleich mit dem daneben liegenden linken Kreis gesehen werden, noch verdeutlicht durch die roten Tangenten.

Farben in SVG

In SVG kann jede Fläche und jede Linie individuell koloriert werden. Zu allen dem System bekannten Farbnamen gibt es eine tabellarische Darstellung dieser Farbnamen.

Viel mehr Möglichkeiten bietet die hexadezimale Codierung der RGB-Farbwerte. Jede der drei Grundfarben rot, grün und blau wird durch eine Wert zwischen 00 und FF dargestellt, im Format "#rrggbb"; es gibt noch einige andere, weit kompliziertere Codierformen für beliebig feinere Differenzierung der drei Farbkanäle, wie "rgb(16.8627%, 0.78431%, 95.3%)" statt "#4302F3" für die Farbe     .

Hingegen kann diese Darstellung auch vereinfacht werden: meist ist es vollkommen ausreichend, statt der bis zu 16,7 Mio. (256 * 256 * 256 = 16 777 216) unterschiedlichen Farben mit einer Teilmenge zu kolorieren; dazu kann das Format "#rgb" verwendet werden, mit dem „nur“ 4.096 verschiedene Farben (16 * 16 * 16) definierbar sind. Die drei Farbziffern werden intern durch Verdoppelung auf sechs erweitert: #b02 wird als #BB0022 interpretiert. Auch dazu gibt es eine (umfangreichere) Tabelle aller Farbkurzcodes. Nach der oben erfolgten Vorstellung der Farbnamen wird sich diese Einführung im Weiteren auf diese hexadezimalen Kurzcodes beschränken.

SVG/ Pfade

Alle Grundformen und überhaupt jedes Element einer SVG-Zeichnung kann mit dem Pfadelement path gezeichnet werden, das also die allgemeine Form einer SVG-Codeanweisung darstellt. Diese Einführung wird sich auf die einfacheren Pfadkommandos beschränken, da sie mit zunehmender Komplexität sehr unanschaulich werden.

Der allereinfachste Pfad definiert mit einem Anfangs- und einem Endpunkt die Linie dazwischen; das erfolgt mit dem Attribut d= des path-Elements. Jeder Punkt kann nicht nur mit seiner absoluten Koordinatenposition definiert werden, sondern (außer natürlich dem allersten) auch relativ als die beiden Distanzen zur vorhergehenden Position.

Generell werden absolute Positionen mit Pfadkommandos in Grossbuchstaben beschrieben, relative Distanzen hingegen mit Kleinbuchstaben. Die folgenden Schreibweisen definieren alle die selbe Linie, von (20,30) nach (44,16):

<path d="M 20, 30 L 44, 16"/> 0 kann auch mit kleinem "m" codiert werden

<path d="M 20, 30 44, 16"/> 00 nach Beginn mit großem "M" wird (fehlendes) "L" impliziert

<path d="M 20, 30 l 24, -14"/>0 (kleines L) relativ: 20 + 24 = 44, 30 - 14 = 16

<path d="m 20, 30 24, -14"/> 0 nach Beginn mit kleinem "m" wird (fehlendes) "l" impliziert

<path d="m20,30 24-14"/> 000 die zusätzlichen Zwischenräume und Kommata dienen eventuell der Lesbarkeit, sind aber nicht erforderlich

Die Pfadkommandos sind "M" für den Pfadbeginn, "L" für die nächste Position; weiters "H" und "V" für horizontale / vertikale Positionen, bzw "h" oder "v" für solche Distanzen: "h22" ist äquivalent mit "l22,0".
Das Kommando "Z" oder "z" beendet oder schließt einen Pfad, indem zum Anfangspunkt zurückgekehrt wird.
Es gibt mehrere Kommandos um Kurven zu zeichnen (Q, T, C, S), hier wird einstweilen nur "A" erwähnt, damit können Kreise und Ellipsen bzw. deren Segmente gezeichnet werden.

Beispiel 3a

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="40">
<path stroke="red" d="m6,32 8-22"/>
<path stroke="blue" d="m19,32 8-22 6,15"/>
<path stroke="#F0F" d="m38,32 8-22 6,15 -4,4" fill="none"/>
<path stroke="#08F" d="m56,32 8-22 6,15-4,4h12v4" fill="none"/>
<path stroke="lime" d="m9,38h62"/>
</svg>

Hier wird mal (in rot) eine Schräglinie gezeichnet. Diese Linie wird (in blau) fortgesetzt: weil keine Füllfabe angegeben ist, wird die davon definierte Fläche schwarz ausgefüllt. in der dritten Figur (in pink) wird diese Füllung verhindert, und eine weitere Fortsetzung angefügt; der vierte Linienzug (in blau) hat horizontale und vertikale Anhängsel. Zuletzt wird noch eine untenliegende horizontale Gerade (in grün) gezeichnet.

Beispiel 3b (Kommando "z")

Hier wird die Funktion des "z"-Kommandos demonstriert. Es wird auch die globale Definition von Attributen gezeigt
(in diesem Beispiel mit nur einem Pfad ohne Vorteil gegenüber der lokalen Definition im Pfad selbst).

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="40" stroke="#F0F" stroke-width="3" fill="#FCF">
<path d="m4,9v20h18V9m8,0v20h18V9H30m26,0v20h18V9z"/>
</svg>

In dieser Schreibweise "m4,9v20h18V9m8,0v20h18V9H30m26,0v20h18V9z" ist die Codierung schwer lesbar, deshalb werden zur Erläuterung die drei Teilpfade separiert:

1. Figur: m4,9 v20 h18 V9 oben offen (aber die Füllung der Fläche wird immer geschlossen)
2. Figur: m30,9 v20 h18 V9 H30 oben geschlossen, aber nicht vollständig - es müsste mit H28.5 erfolgen (ausprobieren!)
3. Figur: m56,9 v20 h18 V9 z das Kommando "Z" schließt die Figur richtig

Weder vertikal noch horizontal ist die Gesamtheit der drei Figuren exakt zentriert. Was wäre dafür zu ändern?

Weitere Pfad-Eigenschaften

Neben fill (Farbe der umschriebenen Fläche), stroke (Farbe des Linienzuges) und stroke-width (Linienbreite) gibt es weitere Gestaltungsmöglichkeiten:

Beispiel für stroke-linecap:
1. Linie: stroke-linecap="butt"
2. Linie: stroke-linecap="round"
3. Linie: stroke-linecap="square"

• stroke-opacity die Durchsichtigkeit, ein Wert von 0 (unsichtbar) bis 1 (Defaultwert: voll opak)
• stroke-dasharray zahlreiche Möglichkeiten der Strichpunktierung, codiert als Paare von Linienlängen und Zwischenräumen
• stroke-linecap zur Gestaltung der Linienenden (z.B. standard (ohne Angabe oder "butt"), gerundet, quadratisch)
• stroke-dashoffset, stroke-linejoin, stroke-miterlimit als weitere Eigenschaften (presentation attributes).

Beispiele

Ein ganz einfacher, gerader Strich lässt sich als Pfad zeichen:

1. <path fill="none" stroke="#F0F" stroke-width="4" d="m8,20h60"/>
   wobei die fill-Anweisung hier überflüssig ist. Diese Linie kann auch als Rechteck gezeichnet werden:
2. <rect fill="#F0F" stroke="none" x="8" y="18" width="60" height="4"/>
   oder (stroke ist in beiden Fällen redundant)
3. <path fill="#F0F" stroke="none" d="m8,18h60v4H8"/>
   und als Linie bei Vertauschung von Länge und Strichstärke
4. <path fill="none" stroke="#F0F" stroke-width="60" d="m38,18v4"/>

Es wird in allen Fällen dieselbe Linie gezeichnet!

Bei Anwendung weiterer Eigenschaften kann es aber zu unterschiedlichen Ergebnissen führen. Mit stroke-linecap="round" wird die Linie mit einer Rundung, einem Halbkreis, abgeschlossen.

Beispiel 4a (linecap)

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg"
width="80" height="40" stroke-linecap="round">
<path stroke="#00F" stroke-width="60" d="m38,18v4"/>
<path stroke="#F00" stroke-width="4" d="m8,20h60"/>
</svg>

Die Grundstruktur ist in beidemale dieselbe Linie, aber der Radius der blauen Halbkreise ist 30, der roten 2.

stroke-dasharray ermöglicht das Unterbrechen einer Linie:

Beispiel 4b (dasharray)

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" width="80"
height="40" stroke-dasharray="2,8">
<path stroke="#00F" stroke-width="62" d="m39,8v30"/>
<path stroke="#F00" stroke-width="3" d="m8,19h62"/>
<path stroke="#0F0" d="m8,36h62" stroke-dasharray="8,3,4,1,1,1,1,2"/>
</svg>

Das rote Beipiel zeichnet eine einfache gestrichelte Linie, in Blau wird gezeigt wie ggf. viele parallele Linien zu erzielen sind. In Grün wird eine kompliziertere Strichpunktierung gezeigt; siehe auch viele weitere Beispiele.

Mit stroke-linecap kann ein rundes oder eckiges Linienende erzielt werden. Mit Linien der Länge Null und stroke-linecap='round'
werden nur die Linienend-Halbkreise gezeichnet, es ergibt sich ein Kreis mit dem Durchmesser der stroke-width.
Im Zusammenwirken mit stroke-dasharray kann eine Serie von Kreisen gezeichnet werden.

Beispiel 4c (linecap + dasharray)

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" width="80"
height="40" stroke-dasharray="0,22" stroke-linecap="round">
<path stroke="#000" stroke-width="20" d="m12,10h44m0,20H12"/>
<path stroke="#FF0" stroke-width="18" d="m12,30h44"/>
</svg>

Hier werden mit dieser Methode sechs schwarz gefüllte Kreise gezeichnet; anschließend werden kleinere Kreise mit anderer Füllfarbe in drei davon eingeschrieben. Diese Methode ist sehr leistungsfähig, wenn eine größere Zahl von Kreisen oder Quadraten (stroke-linecap='square') benötigt wird; siehe auch die beispielhaften Anwendungen.

Kreise und Ellipsen

Während für die Grundformen circle und ellipse der Mittelpunkt definiert werden muss, benötigt das Pfadkommando einen Punkt des Umfanges, von dem der Kreisbogen begonnen wird. Es bedarf folgender Parameter (siehe das Beispiel: Ellipse, um -15° gedreht)

1. Anfangskoordinatenpaar des Umfangspunktes (x,y)
2. Radienpaar in x- und y-Richtung, für einen Kreis sind beide Zahlen gleich
3. Gradzahl des Winkels, um den die Struktur gedreht wird
4. 0/1-flag (Wahrheitwert), 0 für den kleinen und 1 für den großen Bogen, falls zwei Bogengrößen möglich sind
5. 0/1-flag für die Drehrichtung des Bogens, 1 für Drehung ↻ im Uhrzeigersinn
6. Endkoordinatenpaar des Umfangspunktes (x,y), bei Kommando A absolute Werte, bei a relativ zum Anfangspunkt.

Der sichtbare Teil des Kreisbogens von Beispiel 2a kann als Pfad so gezeichnet werden
<path fill='none' stroke='#0FF' stroke-width='6' d='m0,30a30,30 0 0,0 30-30'/>
(ausgehend von (0,30) der kleinere Bogen nach (30,0) im Gegenuhrzeigersinn). Ebenso möglich ist
d='m30,0a30,30 0 0,1-30,30' (ausgehend von (30,0) der kleinere Bogen nach (0,30) im Uhrzeigersinn).
Der jeweils größere Bogen entspräche dem außenliegenden Teil. Sofern ein Halbkreis gezeichnet wird, ist natürlich nur eine Bogengröße möglich.

Die klassische Methode zur Zeichnung eines vollen Kreises setzt diesen aus zwei Halbkreisen zusammen; solche Pfade werden von SVG immer ohne Knick geschlossen. Es ist am anschaulichsten, einen solchen Kreis bei 12 Uhr oder bei 9 Uhr zu beginnen; 6 Uhr oder 3 Uhr sind ebenso einfach zu codieren.
Beispiel: Kreis mit Radius 40 und Mittelpunkt (90,60), Beginn links Mitte (9 Uhr)
d="m45,60a40,40 0 0,0 80,0 40,40 0 0,0-80,0z" (das z-Kommando schließt hier nichts, aber gewährleistet den glatten Übergang).
Es kann von jedem anderen Punkt des Umfanges begonnen werden, von den vier erwähnten Punkten ist es am einfachsten. Das a-Kommando vor dem zweiten Radienpaar (40,40) kann, aber muss nicht wiederholt werden. Mit absoluten Werten sähe es so aus:
d="M45,60A40,40 0 0,0 125,60 40,40 0 0,0 45,60z" auch bei diesem Beispiel ist die relative Schreibweise etwas kompakter, vor allem aber sind relativ codierte Elemente problemlos verschiebbar, durch Änderung lediglich des Startpunktes. Die absolute Codierung mag hingegen etwas anschaulicher sein.

Diese klassische Methode mit zwei Halbkreisen zeichnet einen vollkommen perfekten Kreis. Mit einer nicht so streng exakten Methode läßt sich ein Kreis auch mit nur einem Bogen zeichnen; je nach der geforderten Exaktheit kann diese Vorgangsweise aber ausreichend genau sein, jedenfalls ist an einem so gezeichneten Kreis kein Unterschied zu sehen zu einem perfekten Kreis. Die Stelle der Unexaktheit kann auch beliebig verkleinert werden.
Die Idee beruht darauf, einen nur fast geschlossenen Kreis zu zeichnen, d.h. das Endkoordinatenpaar sehr nahe dem Anfangskoordinatenpaar zu definieren; wenn diese Positionen zusammenfallen, weigert sich SVG den Kreis zu ziehen, obwohl vollkommen klar ist was gewollt wird - wenn aber ein beliebig geringer Unterschied in der Größe eines Pixelbruchteils besteht, wird das Kommando ausgeführt. Je nach dem Radius ist eine offene Stelle von ein oder zwei px, die per z-Kommando geschlossen wird, in der fertigen Zeichnung nicht als gerade Linie erkennbar. Wenn der Radius sehr klein ist, oder eine höhere Genauigkeit erforderlich scheint, kann eine wesentlich geringere Distanz gewählt werden, damit auch bei starker Vergrößerung die vorhandene Unsauberkeit nicht mehr erkenbar ist.

Beispiel 4e

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="40"
fill="none" stroke="#000" stroke-width="2">
<path d="m18,2a18,18 0 1,0 4,0"/>
<path d="m59.8,2a18,18 0 1,0 .4,0"/>
</svg>

Das Beispiel 4e zeigt diese Methode an zwei Kreisen, mit den Mittelpunkten (20,20) und (60,20), bei beiden wurde das schliessende "z" weggelassen, damit der Restspalt bei der 12-Uhr-Position sichtbar bleibt – sehr deutlich am linken Kreis mit 4 px, kaum mehr rechts mit 0,4 px. Ein Spalt von 0,2 px ist nicht mehr zu erkennen, auch ohne die z-Überbrückung.