Kartenzeichen

Kartenzeichen extra

Teil 3: Wie ich meine Kartensignaturen in SVG definiere

Teil 1: Mein Kartensignaturen-Verzeichnis
Teil 2: Meine Wegemarkensammlung
Teil 3: Wie ich meine Kartensignaturen in SVG definiere (Diese Seite)
Teil 4: Hintergrund

Straßenschilder
Das Trekkingpfadzeichen
Über das große ẞ
Terrainkurwege Kurort Rathen

Grundlagen zum Beschreiben von Kartensignaturen mit SVG

Benötigte Software: Ein Texteditor und ein Webbrowser, der SVG versteht.

Unsere Zeichenfläche

Ein Pixel sei immer 1/100. mm groß.
Die Zeichen werden grundsätzlich auf einem Bild mit 800×800 Pixeln aufgebaut. Damit ist unsere „Grundfläche“ standardmäßig 8×8 mm groß.
Die Koordinaten laufen kartesisch, d. h. x=Rechtswert, y=Hochwert.
Das Zeichen wird standardmäßig mittig angeordnet, d. h. die Koordinaten laufen von -400,-400 bis 400,400.
Der Mittelpunkt 0,0 ist genau die Signaturposition, d. h. der Punkt der dem Kartenort zugeordnet wird.
Standardmäßig wird immer mit einer runden Zeichenspitze mit 10 Pixeln Durchmesser = 0,1 mm gezeichnet (früher war das einmal die Graviernadel den Signaturgravierpantografen.)
Standardmäßig gibt es eine Strichfarbe und eine Füllfarbe. Die Standardstrichfarbe ist schwarz, die Standardfüllfarbe „nicht füllen“.

Die Elemente

Wir benutzen 9 SVG-Elemente:

das Pfad-Element als grafisches Universalelement,
die Elemente Rechteck, Kreis, Ellipse, Strecke, Polylinie und Polygon als grafische Primitivelemente, sowie
die beiden Elemente Gruppe und SVG-Hauptelement, die der Verwaltung dienen.

Jedes der Elemente hat spezifische Attribute (Parameter), denen Werte zugewiesen werden können. Diese Werte können Zahlen beinhalten ("num"), Farben ("col"), Koordinatenlisten ("list"), Pfaddaten ("pathdata"), identifizierende Namen-Zeichenketten ("id"), Matrizen ("mat") oder XML-Namensraumangaben ("xxx") sein. Die Attribute stroke, stroke-width und fill treten meist gemeinsam auf und legen Linienfarbe, Linienstärke und Füllfarbe fest. Die Elemente im Einzelnen sind:

Der Pfad (genaue Beschreibung der Pfaddaten hier):

<path
  data="pathdata"
  zx="num"
  zy="num"
  stroke="col" stroke-width="num" fill="col">

Das Rechteck:

<rect
  x="num"
  y="num"
  width="num"
  heigth="num"
  stroke="col" stroke-width="num" fill="col">

Der Kreis:

<circle
  cx="num"
  cy="num"
  r="num"
  stroke="col" stroke-width="num" fill="col">

Die Ellipse:

<ellipse
  cx="num"
  cy="num"
  rx="num"
  ry="num"
  stroke="col" stroke-width="num" fill="col">

Die Strecke oder Linie:

<line
  x1="num"
  y1="num"
  x2="num"
  y2="num"
  stroke="col" stroke-width="num">

Die Polylinie:

<polyline
  points="list"
  stroke="col" stroke-width="num">

Das Polygon:

<polygon
  points="list"
  zx="num"
  zy="num"
  stroke="col" stroke-width="num" fill="col">

Das Gruppen-Element:

<g
  id="name"
  transform="matrix(1,0,0,-1,400,400)"
  stroke="col" stroke-width="num" fill="col">

Das SVG-Hauptelement schließlich kapselt die gesamte Beschreibung:

<svg
  xmlns="http://www.w3.org/2000/svg"
  width="num"
  height="num"
  stroke="col" stroke-width="num" fill="col">

Das ist schon alles.

Die Attribute

Die Attribute bedeuten:

 x="num"            ... Startpunkt X (Rechteck)
 y="num"            ... Startpunkt Y (Rechteck)
 x1="num"           ... 1. Punkt X (Strecke)
 y2="num"           ... 1. Punkt Y (Strecke)
 x2="num"           ... 2. Punkt X (Strecke)
 y2="num"           ... 2. Punkt Y (Strecke)
 cx="num"           ... Mittelpunkt X (Kreis/Ellipse)
 cy="num"           ... Mittelpunkt Y (Kreis/Ellipse)
 r="num"            ... Radius (Kreis)
 rx="num"           ... Halbachse X (Ellipse)
 ry="num"           ... Halbachse Y (Ellipse)
 zx="num"           ... Füllstartpunkt X (Pfad/Polygon, Zusatzattribut außerhalb des SVG-Standards)
 zy="num"           ... Füllstartpunkt Y (Pfad/Polygon, Zusatzattribut außerhalb des SVG-Standards)
 width="num"        ... Breite (Rechteck/Gesamtbild bei svg-Element)
 height="num"       ... Höhe (Rechteck/Gesamtbild bei svg-Element)
 stroke="col"       ... Linienfarbe (Alle Elemente)
 stroke-width="num" ... Linienstärke (Alle Elemente)
 fill="col"         ... Füllfarbe (Füllbare Elemente)
 points="list"      ... Punktliste (Polylinie/Polygon)
 data="pathdata"    ... Pfadbefehle (Pfad-Element)
 id="name"          ... Identifikator oder Name (g-Element)
 transform="mat"    ... Transformationsmatrix, in erster Näherung "matrix(1,0,0,-1,400,400)" (g-Element)
 xmlns="xxx"        ... XML-Namensraum, ist immer auf "http://www.w3.org/2000/svg" zu setzen. (svg-Element)

Die Werte

Die Attribute können folgende Werte enthalten:

"num"       ... Zahlen, z. B. "100", die eine Koordinate oder Länge in 1/100 mm angeben
"col"       ... HTML-gerechte Farbangaben, z. B. "red", "#446688" oder "rgb(10,20,30)"
"list"      ... Koordinatenliste, z. B. "0 0 100 0 100 100 0 100 0 0"
"pathdata"  ... Pfadkommando, z. B. "M 100 100 L 0 100 L 0 0 Z"
"id"        ... Identifizierende Zeichenkette; zulässige Zeichen: Kleinbuchstaben,
                Ziffern und Minusstrich, z. B. "laubbaum-hervorragend"
"mat"       ... Matrix mit 6 Transformationskoeffizienten, die die Bildkoordianten
                ab „links oben“ in kartesisch mittig transformieren, bei
                800×800 also "matrix(1,0,0,-1,400,400)"
"xxx"       ... ist stets auf "http://www.w3.org/2000/svg" zu setzen.

Muster-Rahmencode

Um Internet-Kompatibilität herzustellen, sollte die eigentliche Zeichendefintion wie folgt in einem svg- und einem g-Element gekapselt werden. So wird die Signatur in jedem SVG-fähigen Internet-Browser korrekt dargestellt:

<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800"> [ XML-Namenraum und Bildfläche 800×800 definieren]
  <g fill="none"                              [ Standard: nicht füllen              ]
    transform="matrix(1,0,0,-1,400,400)"      [ Koordinatensystem transformieren    ]
    stroke-width="10"                         [ Standardstrichbreite 0,1 mm         ]
    stroke-linejoin="round"                   [ Zeichenstift immer rund             ]
    stroke-linecap="round">                   [ Ecken immer ausrunden               ]
    <!-- Hier kommt der eigentliche Signatur-Quelltext hin -->
  </g>
</svg>

Die Zeichenfläche kann auch andere Größen, z. B. 1200×1200 aufweisen. Dies wird erreicht, indem man das width- und das heigth-Attribut des svg-Elementes entsprechend ändert. Ausserdem müssen dann die Werte 400,400 in der Matrix des transform-Attributes des g-Elementes geändert werden, und zwar auf width/2 und heigth/2.

So, nun kann damit begonnen werden, alle Signaturen abzucoden ...

Hier noch einige Programmquelltexte:

Dokumentation Elliptic Arc von Endpoint in Centerpoint parametrization umparametrieren (http://www.w3.org/TR/2003/REC-SVG11-20030114/implnote.html)
Quelltext meines SVG-Parser-Codes
Quelltext meiner graphische Unterprogrammbibliothek Plotlib (Die o. g. Umparametrierung befindet sich in der Subroutine SUBPltArc)

Der Code läuft seit über 20 Jahren stabil und verschleißt einfach nicht, im Gegenteil – er wird immer besser. Während am Anfang nur ganz wenige Browser SVG verstanden haben, ist SVG mittlerweile ein selbstverständlicher internetgängiger Standard. Vorteilhaft ist, dass für meine Signaturen nur eine kleine SVG-Untermenge genutzt wird.

Letzter getesteter Generierungsstand: 12.04.2023.

Etwa 2002 habe ich mit der Implementation von Vimage-SVG begonnen
12.12.2006 Implementation Plotlib abgeschlossen
23.02.2017 Nach 10 Jahren alles umfassend getestet und es läuft und läuft ...
12.04.2023 Nach 16 Jahren alles erneut umfassend getestet und es läuft und läuft ...