Nach Hause

Neuigkeiten

Kartenverzeichnis

Karten­aus­schnitte

Wandern

Anders Wandern

Draußensein

Kartographie

Themen

Karten bestellen

Links

Kontakt

Redaktion

• Kartenzeichen
•• Don E. Knuth und SVG
•• Kartensignaturen mit SVG be­schrei­ben
•• Meine Karten­signa­turen-Verzeichnis
•• Meine Wegemarken­sammlung
•• Straßenschilder
•• Das Trekkingpfad­zeichen
•• Das ẞ ist da

Anhang

Kartenzeichen

Kartensignaturen mit SVG beschreiben

Teil 1: Don E. Knuth und das geniale SVG-path-ARC-Kommando
Teil 2: Kartensignaturen in SVG definieren (Diese Seite)
Teil 3: Mein Kartensignaturen-Verzeichnis
Teil 4: Meine Wegemarkensammlung
Beispiel: Straßenschilder
Beispiel: Das Trekkingpfadzeichen
Beispiel: Das große ẞ

Die Vimage-SVG-Dokumentation

Da haben wir also so eine kleine Messingschablone, mit der früher Signaturen definiert worden sind. Genau dasselbe wollen wir nun „in SVG“ machen. Nun ist SVG ein durchaus sehr komplexes Format. Wenn eine Dokumentation 719 Seiten lang ist, sollte man misstrauisch werden, es könnte Hochkomplexität drohen. Aber keine Angst, weil es aber das path-Element gibt, das allein für alle Kartensignaturen ausreicht, können wir stark abrüsten. Einige Elemente werden noch hinzugefügt: Wenn man „nur mal schnell einen Kreis“ beschreiben will, ist es bequemer, das mit dem circle-Element zu tun, als mit dem Pfad.

Die Zeichenfläche

Fundamental ist es zunächst, eine „Protogeometrie“ zu beschreiben, auf der alles aufgebaut wird:

  • Ein Pixel sei immer 1/100. mm groß.
  • Die Zeichen werden grundsätzlich auf einem Bild mit 801×801 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. Das ist genau unsere „Pantografennadel“.
  • Standardmäßig gibt es eine Strichfarbe und eine Füllfarbe. Die Standardstrichfarbe ist schwarz, die Standardfüllfarbe „nicht füllen“.

Die Elemente

Es gibt die 9 Elemente Pfad, Rechteck, Kreis, Ellipse, Strecke, Polylinie, Polygon, Gruppe und SVG-Hauptelement. Mehr ist nicht erforderlich. Jedes der Elemente hat spezifische Attribute, 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 (Polylilie/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 ...


Wen es interessiert, hier noch einige Programmquelltexte:

Dokumentation Elliptic Arc von Endpoint in Centerpoint parametrization umparametrieren (http://www.w3.org/TR/2003/REC-SVG11-20030114/implnote.html)
Mein SVG-Parser-Code
Meine graphische Unterprogrammbibliothek Plotlib (Die o. g. Umparametrierung befindet sich in dem UP SUBPltArc)

Braucht man aber mittlerweile nicht mehr, weil es mittlerweile sehr viel Software gibt, die SVG versteht.


 

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

Zum Seitenanfang