Kartenzeichen

Wie man Kartensignaturen mit SVG definieren kann

Teil 1: Mein Kartensignaturen-Verzeichnis
Teil 2: Meine Wegemarkensammlung
Teil 3: Wie man Kartensignaturen mit SVG definieren kann (Diese Seite)
Teil 4: Hintergrund – Don E. Knuth und das geniale SVG-path-ARC-Kommando

Straßenschilder
Das Trekkingpfadzeichen
Mein nächstes Kfz.-Kennzeichen: PIR ẞ1

Grundlagen zum Beschreiben von Kartensignaturen mit SVG

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

Unsere Zeichenfläche

Die Elemente

Wir benutzen 9 SVG-Elemente:

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 ...

Zum Seitenanfang