OSM-Karten, SVG und mehr

Ich lese ein Buch, das über lohnende Locations für Fotografie in München berichtet. Es ist die eBook Version. Solche elektronischen Bücher nutzen die Möglichkeiten und Stärken von eBooks meist leider nicht. So auch hier. Das als Bitmap-Grafik eingesetzte Karten-Material ist selbst auf meinem iPad Pro schwer lesbar. Karten im Vektorgrafik-Format SVG wären sicher wesentlich geeigneter. In diesem Format ließen sich die Karten stufenlos zoomen.

Aber wie kommt man zu einer Karte im Vektorgrafikformat SVG? Diese Frage beantworte ich in diesem Beitrag. Anhand einer konkreten praxisnahen OpenStreetMap-Karte gehe ich ergänzend auf verschiedene Grafik-Formate und deren Vor- und Nachteile ein.

OpenStreetMap Karten

OpenStreetMap-Karten (OSM-Karten) sind frei verfügbar und sind online und offline nutzbar. Die Verwendung des Kartenmaterials erfordert einen Hinweis auf die OpenStreetMap-Lizenz, z.B. per Link auf diese Lizenz und/oder Hinweis „© OpenStreetMap-Mitwirkende“. Dies gilt auch, wenn das Kartenmaterial weiterbearbeitet wird.

Ein OSM-Dialog ermöglicht es, aus dem Kartenmaterial SVG-Dateien über die Website OpenStreetMap.org herunterzuladen. Neben diesem Format werden auch PNG, JPG und PDF unterstützt. Auf Eigenschaften und Einsatzbereich der Formate gehe ich unten näher ein.

Im Abschnitt „Export als Vektordatei“ enthält die OSM Wiki-Seite "DE:Karte als Vektordatei" einen Link auf eine Seite, die eine OSM Weltkarte anzeigt. Mittels Zoomen (+/- Funktion im Panel auf der rechten Seite) und Verschieben positioniert man in die Region, aus der man einen Ausschnitt im gewählten Format erzeugen möchte. Hier ein Beispiel eines Teils der Altstadt Münchens.

Ich entscheide mich, einen Ausschnitt im Format SVG zu speichern. Rechts im Funktionspanel klicke ich den Teilen-Button (geschwungener Pfeil) an. Der daraufhin erscheinende Dialog bietet mir einige Parameter-Optionen. Unter anderem die Wahl eines Export-Formats. Im dazu angebotenen Dropdown-Menü selektiere ich das Export-Format SVG.

Da ich es auf einen bestimmten Ausschnitt abgesehen habe, setze ich im Feld "Ausschnitt festlegen" ein Häkchen. Nun kann ich den grau angezeigten Ausschnitt feinjustieren. Ein Klick auf den den Button "Herunterladen" erzeugt die Datei im gewünschten Format und speichert sie auf meinem Rechner.

Hier die erzeugte Karte im SVG-Format (Karte scrollbar):

Diese aus Vektorgrafik-Elementen bestehende SVG-Datei kann ich anschließend mit graphischen Zielpunkten, Routen, OSM-Copyright etc. in einem Programm wie Affinity Designer ergänzen oder auch modifizieren. Abb. 3 (siehe unten) zeigt hierfür ein Beispiel.

Für graphische Arbeiten setze ich die Affinity Suite (Publisher, Designer und Photo) ein. Sie ist kostengünstig, leistungsfähig und unterliegt keiner monatlichen oder jährlichen Lizenzgebühr. Es können Dateien verschiedenster Formate und Größe importiert und exportiert werden. So läßt sich der Workflow zum digitalen Buchdruck optimal beliefern. Selbstverständlich können auch perfekte Grafiken und Bilder in beliebiger Größe für FineArtPrint, Internet, eBooks, Diashows und Videos generiert werden.

Copyright sichtbar machen

Wie eingangs erläutert ist das Copyright bzw. Urheberrecht des OpenStreetMap-Materials bei Verwendung, Bearbeitung, Veröffentlichung und Verbreitung sichtbar zu machen.

Daher ergänze ich einen entsprechenden Hinweis unter dem Bild und/oder ergänze den Copyright-Hinweis „© OpenStreetMap-Mitwirkende, CC BY-SA“ rechts unten im Bild, unabhängig davon, um welches Bildformat es sich handelt.

Bei den Formaten PNG-, JPG- und PDF-Dateien hinterlege ich meist passende XMP-Metadaten. Sie bilden den kleinsten gemeinsamen Nenner der betrachteten Datei-Typen.

[XMP] Rights: © OpenStreetMap-Mitwirkende
[XMP] Credit: https://www.openstreetmap.org/copyright
[XMP] Source: https://www.openstreetmap.org/#map=6/51.330/10.453
[XMP] UsageTerms: CC BY-SA

Hierzu setze ich die OpenSource App Exiftool ein. Das Werkzeug ist für Windows, MacOS und Linux kostenlos verfügbar. Bevor die untenstehenden Befehle in der Kommandozeile eines Terminal-Fensters aufrufbar sind, muss Exiftool auf dem genutzten Rechner ausführbar installiert sein.

Für schnelle Anwendung habe ich kurze Bash-Skripte für MacOS geschrieben. Die Skripte sind im Verzeichnis der Grafikdateien aufzurufen und enthalten die unten dargestellten exiftool-Befehle.

Anwendungsfall: Die genannten XMP-Tags in die Bild-Dateien der Typen jpg, png und pdf einfügen (Mauszeiger über Box erlaubt rechts bzw. links Scrollen):

exiftool -xmp:Source="https://www.openstreetmap.org/#map=6/51.330/10.453" -xmp:Credit="https://www.openstreetmap.org/copyright" -xmp:Rights="© OpenStreetMap-Mitwirkende" -xmp:UsageTerms="CC BY-SA" -ext jpg -ext png -ext pdf . 

Anwendungsfall: Alle XMP-Daten löschen (für den Fall, dass man falsche oder fälschlicherweise Daten in die Dateien eingefügt hat):

exiftool -xmp= -ext jpg -ext png -ext pdf .

Anwendungsfall: Metadaten der Dateien anzeigen, um sie prüfen:

exiftool -e -a -u -G -s2 -struct .

Die Exiftool-Kommandos legen eine Sicherheitskopie mit Postfix "_original" an. Möchte man das vermeiden, ist der Parameter "-overwrite_original" in die Anweisung aufzunehmen.

Speicherbedarf Beispiel OSM-Karte

Zur Überprüfung des Speicherbedarfs der verschiedenen Export-Formates des OSM-Dialogs, erzeuge ich bei identischem Kartenausschnitt (vgl. Abb. 3) je Format eine Datei. Im MacOS Finder werden für mein Beispiel folgende Speichergrößen angezeigt.

Hinsichtlich des erforderlichen Speicherbedarfs gibt es für das betrachtete Karten-Beispiel einen klaren Gewinner: JPG!

Das Ergebnis kann bei anderem Basis-Material allerdings deutlich anders ausfallen und andere Formate haben andere Stärken und Schwächen. Neben den genannten Formaten gibt es zahlreiche weitere wie z.B. TIFF und Kamera-Raw-Formate. Auf diese gehe ich in diesem Beitrag nicht ein.

Eigenschaften und funktionale Aspekte der betrachteten Formate beschreibe ich im nachfolgenden Kapitel.

Eigenschaften der Grafikformate

Welches Format man einsetzen sollte, hängt letztlich vom Einsatz-Zweck ab. Die funktionalen Anforderungen sind dabei ausschlaggebend.

Soll der Hintergrund eines Bildes durchscheinen, scheidet JPG aus, da es keine Möglichkeit gibt, Bereiche des Bildes transparent zu gestalten. Das funktioniert mit PNG und SVG. Will ich durch Klick auf einen Bildbereich eine Webseite aufrufen, bieten sich SVG oder PDF an. Soll eine bestehende Grafik auf Basis von Internet-Technologien animiert werden, dann geht das nur mit SVG. "Horses for Courses" wie die Briten sagen.

Es folgt eine etwas genauere Betrachtung der Grafik-Formate.

JPG (Joint Photographics Experts Group)

• 8 Bit RGB-Format im Pixel- bzw. Rastergrafikformat
• Hervorragendes Verhältnis von Bildqualität zu Speicherbedarf
• Verlustbehaftete wählbare Kompression
• Mit jeder Speicherung geht ein Qualitätsverlust einher. Daher weniger geeignet für nachträgliche Bildbearbeitung.
• Standard-Bildformat von Digital-Kameras. Ist Nachbearbeitung der Aufnahmen vorgesehen, sollte im Raw-Format der jeweiligen Kamera fotografiert werden. RGB-Bilder entwickelt der Fotograf nachträglich in einem Raw-Konverter. Anschließend ist ein Export in jedes vom Raw-Konverter unterstützte RGB-Format möglich.
• Unterstützt Metadaten verschiederer Art (EXIF, IPTC, XMP)
• Vergrößerung mit sichtbaren Raster-Treppenstufen

PNG (Portable Network Graphics)

• Bis zu 16 Bit RGB-Format im Pixel- bzw. Rastergrafikformat.
• Erzeugung von Transparenz via Alpha-Kanal je Farbkanal. Benötigt z.B. für Farbverläufe und Transparente Bildbereiche durch die der Hintergrund sichtbar sein soll.
• Verlustfreie Komprimierung
• Unterstützt Metadaten verschiederer Art (EXIF, ITPC, XMP)

SVG (Scalable Vector Graphics)

• XML- und somit text-basiertes Vektorgrafik-Format
• Jeder aktuelle Browser "versteht" SVG kann das Format ohne weitere PlugIns anzeigen. SVG gehört zu den Internet Standard-Technologien, die übrigens auch durch eBook-Formate wie epub unterstützt werden.
• Ohne Qualitätsverlust beliebig skalierbar. Eine SVG-Datei in eine HTML-Seite eingebettet, kann direkt im Browser mit den Standard-Funtionen gezoomt werden.
• In einfachem Texteditor und SVG-unterstützenden Anwendungen bearbeitbar. Es können beispielsweise Hyperlinks manuell in einem Text-Editor ergänzt werden. Dies habe ich bei der OSM-Karte der SVG-Version mittels eines HTML <a>nchor-Tag getan, nachdem ich den Text "Karte im SVG-Format" und das "Copyright-Panel" rechts unten in Affinity Designer ergänzt und die Karte im SVG-Format exportiert hatte. In einem Browser geöffnet, leitet ein Klick auf den Copyright-Hinweis zur oben genannten OSM Copyright-Webseite weiter. Zum Test kann das folgende Bild über Kontext-Menü in neuem Browser-Fenster oder -Tab geöffnet und anschliessend per Klick auf den Copyright-Hinweis rechts unten im Bild auf die entsprechende OpenStreetMap-Seite verzweigt werden.

• In einer SVG unterstützenden App sind SVG-Grafiken leicht erstell- und auch nachträglich änderbar
• SVG bietet Animationsfunktionen
• Mittels CSS- und Java-Script maschinell veränder- und steuerbar, z.B. zur Erstellung komplexer Animationen. Dazu sind CSS-id's zu definieren und den betreffenden HTML-Tags der SVG-Grafik zuzuweisen. Über diese Referenzen kann man dann mit JavaScript die Objekte gezielt adressieren und Veränderungen vornehmen.
• In Standard-Versionsmanagement versionierbar, da textbasiert

PDF (Portable Document Format)

• Format, in das verschiedenste Grafikformate eingebettet werden können. Dazu gehören sowohl Pixel- bzw. Rastergrafiken als auch Vektorgrafik-Formate.
• Unterstützt unterschiedlichste Dokumenten-Technologien
• Unterstützt Nutzung von Metadaten (XMP)
• Vektorgrafik-Inhalte ohne Qualitätsverlust beliebig skalierbar
• Keine native Unterstützung von HTML5-Technologien für die flexible Nutzung im Internet wie sie SVG bietet
• Im Vergleich zu SVG sehr kompakt (evtl. mittels Kompressionstechnologie). Um zu sehen, welche Größe die Beispiel OSM-Karte im SVG-Format nach Konvertierung in PDF hat, exportiere ich das SVG-Dokument via Affinity Publisher als PDF-Dokument. Ergebnis: die exportierte Datei weist eine ähnlich kompakte Größe wie das direkt via OSM-Seite erzeugten PDF-Dokument aus. Einen Informationsverlust scheint es bei der Konvertierung nicht zu geben.

Fazit & Ausblick

Die Ergebnisse meiner "Forschungen" zeigen, dass SVG aufgrund des Speicherbedarfs für Kartenmaterial möglicherweise nicht optimal ist. Alternativ liesse sich eine JPG- oder PNG-Datei mit geeigneter Vergrösserung erzeugen. Hier die Schritte:

1. OSM-Karte im SVG-Format von der OSM-Website herunterladen
2. SVG-Datei in ein Vektorgrafikprogramm importieren
3. SVG-Datei mit vergrösserten Details als JPG- oder PNG-Datei exportieren
4. Die detaillierte Rastergrafik- bzw. Bitmap-Karte im eBook wie auf einer Webseite in ein scrollbaren <div>-Bereich einbetten. Der Betrachter sieht dann zwar immer nur einen Karten-Ausschnitt. Dieser ist jedoch gut lesbar, lässt sich im Fenster scrollen bzw. verschieben und benötigt vermutlich weniger Speicher als eine komplex aufgebaute SVG-Grafik.

Nachteil dieser Lösung: es kann kein Link an das "Copyright"-Objekt gehängt werden. Alternativ könnte man die ganze Grafik mit dem Copyright-Link versehen.

Ich beschäftige mich neben der Fotogafie häufig mit verschiedenen Aspekten der Website-Entwicklung und eBooks. Dabei suche ich immer nach Möglichkeiten, meinen Workflow zu optimieren. Die obenstehende Beschreibung ist Ergebnis von Recherchen und konkreter Erfahrung in der Implementierung. Über meinen aktuellen Workflow und die darin von mir eingesetzten Werkzeuge wird meiner kommenden Blog-Beiträge berichten.