Handschrift als SVG

April 2022: A handwritten, English version of this document is in preparation...

Inhalt

Worum geht es?

Ursprünglich handgeschriebener Text kann eingescannt und dann vektorisiert werden. Das Ergebnis ist ein Bild in einem Vektorgrafik-Format, bestehend aus mehreren Kurven (oder Konturen).

Abhängig davon, wie die Kurven erzeugt werden, kann jedes einzelne Wort zu einer einzigen Kurve oder Kontur werden, was seine Formatierung unabhängig vom Rest des Bildes erlaubt.

Mit Hilfe des Bildbearbeitungsprogramms Inkscape habe ich versucht, das Verfahren zu optimieren. Dabei war das Ziel, handschriftliche Inhalte in eine Form zu bringen, die zur Veröffentlichung geeignet ist. Das SVG Format erlaubt das Anlegen von Hyperlinks und den Einbau anderer Bilder in die Datei. Damit kann eine SVG Datei als Web-Seite dienen, obwohl für den textuellen Inhalt keinerlei Font verwendet wurde.

Warum?

Eigentlich habe ich nur mit Inkscape gespielt.

Oft schon habe ich mir gewünscht, meine Handschrift zu verbessern und einfach leserlicher zu schreiben. Es fehlt mir allerdings an Gelegenheit zum Üben. Die erste vektorisierte Textseite war im Din-A 5 Format und sollte die grundsätzliche Machbarkeit beweisen (oder widerlegen). Dabei habe ich kein konkretes Ziel verfolgt und war auch nicht sicher, dass diese Idee einen Sinn hat.

Jetzt weiß ich nicht, ob handgeschriebene Web-Seiten vielleicht eine Überlegung wert sind. Bis April 2021 (auch bis Februar 2022) bin ich damit nicht weitergekommen.

Allgemeines – Schwierigkeiten und Abhilfe

Einige Probleme und ihre Lösungen sind von der verwendeten Software unabhängig. Vier dieser Sachverhalte kann ich hier bereits ansprechen.

Dateigröße

Eine Bild-Datei enthält ein beliebiges Volumen von Daten, die beschreiben, wie beim Interpretieren der Datei ein Bild erzeugt wird. Einfach einen handgeschriebenem Text zu scannen und zu vektorisieren erzeugt sehr große Dateien. Allerdings ist eine große Menge der Informationen, die sich dabei ansammeln, unwesentlich oder komplett entbehrlich.

Buchstaben, die Leerraum einschließen

Buchstaben wie a, e, b, P, Q werden wie alle anderen in Kurven umgewandelt, sollten aber leeren Raum einschließen. Beim Vektorisieren wird die Oberfläche des gesamten Buchstabens zu einem Objekt und der umschlossene Raum ein anderes. Da jede Fläche eine Linien- und eine Füllfarbe besitzt, überlappt die kleinere Fläche mit der größeren. Weil aber die große Fläche der Ausdehnung des gesamten Buchstabens entspricht, wird der Leerraum nur sichtbar, wenn er im Vordergrund gehalten wird. Anderenfalls, sehen diese Buchstaben nach dem Vektorisieren so aus: .

Vereinfachung

Anders als ein Foto, bei dem wir so viele Details wie möglich fest in der Datei verankern wollen, muss Text nicht sehr vielen Vorgaben entsprechen, um Information zu transportieren. Die wichtigste Bedingung für die Lesbarkeit eines Textes ist die Unterscheidbarkeit der Buchstaben. Fast alles andere ist entweder eine Übereinkunft, die aus der Benutzung einer bestimmten Sprache resultiert, oder Vorliebe des Autors. Beides ist aber bereits Bestandteil des (eventuell handgeschriebenen) Originals. Einscannen und Vektorisieren haben keinen Anteil an der Handhabung von Syntax, Grammatik und Rechtschreibung.

Um die Dateigröße einer Vektorgrafik zu verringern, stehen uns viele Wege offen und – was Handschrift betrifft – alles ist akzeptabel, soweit es die Lesbarkeit einzelner Buchstaben nicht beeinträchtigt. Insbesondere hat die Verringerung der Knotenanzahl einen überraschenden Einfluss auf die Dateigröße

Kombinieren und Vereinigung einzelner Wörter

Das Problem der missgestalteten Buchstaben wird gelöst, indem die kleine Fläche des Leerraums in die große Fläche so integriert wird, dass die dabei entstehende, einzige Kontur den Leerraum innerhalb des Buchstabens ausschließt. Dies kann auf verschiedene Weisen bewerkstelligt werden; bei komplexeren Kurven kann der Aufwand aber gewaltig sein. Vektorgrafiken aus mehreren Ebenen sollten besser vermieden werden.

Inkscape – Handschrift zu Hypertext

Die im vorigen Absatz angesprochenen Aktionen werden in Inkscape durch spezifische Programmfunktionen erledigt.

Ich ziehe es indes vor, ein annähernd komplettes Verfahren zur Erzeugung von SVG-Grafiken aus handschriftlichem Text zu beschreiben. Was folgt, ist die Schilderung meiner eigenen Vorgehensweise und keineswegs als “Best Practice” misszuverstehen. Der Zeitaufwand ist immer noch zu hoch.

Ausgangssituation

Eine Seite mit handgeschriebenem Text wurde eingescannt und in einem der von Inkscape importierbaren Bitmap-Formate gespeichert (BMP, PNG, JPEG, TIFF etc...) Tipp

Vektorisieren

Um das Bild ins Vektorgrafik-Format SVG umzuwandeln, wird es zunächst in Inkscape importiert:
Menübefehl Datei|Importieren...,
Tastaturkürzel Strg+I.

Dann werden die folgenden Aktionen ausgeführt:

1. Bild durch Mausklick selektieren, damit der nächste Schritt überhaupt einen Effekt hat.
2. Menübefehl Pfad|Bitmap nachzeichnen...
   Umschalt+Alt+B
   
   Der Dialog bietet viele verschiedene Möglichkeiten an, die leider zu sehr unterschiedlichen – und sogar unbrauchbaren Ergebnissen – führen können.
   Normalerweise genügt es, den Einmaligen Scan zu wählen und die Methode Autotrace mit wenigen Filterschritten oder nur einem einzigen auszuführen Tipp.
   Tipp: Am besten eignen sich Originalmanuskripte, die wenig oder keine Farbnuancen aufweisen.
   
   Wer eine sehr schöne, leicht lesbare Handschrift hat, kann auch Strichzeichnung vektorisieren anstelle von Autotrace auswählen..
3. Zurück auf der Zeichenfläche muss zur Überprüfung das neu erzeugte Bild vom Original wegbewegt werden. Die Vektorzeichnung befindet sich im Vordergrund, das Original bleibt im Hintergrund zurück.
4. Wenn das Ergebnis zufrieden stellt, kann die Pixelgrafik entfernt werden (Selektion mit der Maus und entfernen).
   Anderenfalls wird die Vektorgrafik entfernt und das Originalbild erneut vektorisiert. Die Vorgehensweise ist jetzt aber schwer zu bestimmen und hängt stark von den Eigenschaften des Dokuments ab. Sie können die Einstellungen variieren und auch Mehrere Scans probieren. Achtung! Damit werden ggf. sehr komplizierte Vektorgrafiken erzeugt, die schwierig nachzubearbeiten sind.

Speichern als SVG/SVGZ

Die erste vektorisierte Version des Textes kann jetzt in einer Datei gespeichert werden. Auch hierfür stehen mehrere Optionen offen. Solange die Veröffentlichung des Dokuments noch warten muss und Nachbearbeitung nötig ist, sollte vielleicht einfach das Standardformat Inkscape-SVG , wie vom Dialog Speichern unter... (Umschalt + Strg + S) vorgeschlagen, akzeptiert werden.

Später kann das Format Optimiertes SVG für kleinere Dateien sorgen, die auf einem Web-Server weniger Platz in Anspruch nehmen und schneller übertragen werden. Tipp

Zerlegen des Bildes in Kurven oder Konturen

Die aktuelle Vektorgrafik kann als Einheit verschoben und bearbeitet werden, aber das ist nicht das Ziel. Vielmehr sollen die Wörter des Manuskripts individuell zu manipulieren sein. Dazu muss zunächst das Bild selektiert und mit Pfad|Zerlegen in einzelne Kurven aufgeteilt werden.

Wie oben bereits angekündigt, werden beim Zerlegen viele Konturen erzeugt, sich gegenseitig verdecken können – oder überlappen, falls die Vektorisierung über mehrere Scans erfolgt ist.
Dabei wird der Leerraum, den einzelne Buchstaben einschließen als eigene Kontur behandelt und wahrscheinlich in den Hintergrund geschickt. Dem hilft der nächste Bearbeitungsschritt ab. Speichern Sie aber jetzt auch die aktuelle Zwischenversion mit Strg + S.

Kombinieren und Vereinigen

Pfad|Kombinieren und Pfad|Vereinigen sind beide Menübefehle, die geeignet sind, die Kurven eines einzelnen Wortes in ein einziges Objekt zu überführen. Der theoretische Unterschied zwischen den beiden Funktionen ist, dass die ursprünglich separierten Kurven (die jeweils eine Kontur bilden können) entweder als solche erhalten bleiben (Kombinieren) oder in eine einzige, neue Kurve transformiert werden (Vereinigen). In der Praxis sollte das nur selten eine Rolle spielen: Das Ziel der Aktion ist, Wortteile, deren Linie nach dem Schreiben nicht durchgängig ist, dennoch gemeinsam (als Wort) zu behandeln.

Wenn mehrere Scans benötigt werden, um einen Text zu vektorisieren, wird alles viel komplizierter und es kann nützlich sein, einer der beiden Funktionen den Vorzug zu geben. Das müssen Sie im Einzelfall – und sogar von Wort zu Wort verschieden – entscheiden. Tipp

Unterlängen in der nächsten Zeile

Untertitel dieses Abschnitts: Großer Mist!: Vermeiden Sie Situationen, in denen Buchstaben den Text der nachfolgenden Zeile berühren oder sogar mit ihm überlappen.

Das betrifft die Buchstaben G, g, J, j, f, p, q, ß und eventuell andere, wenn es zu Ihrem Schreibstil gehört. Wenn das passiert, müssen Sie die Kurven in der Knotenansicht bearbeiten, Verbindungen zwischen Knoten lösen und neue Verbindungen erzeugen, damit die Buchstaben und Wörter zeilenweise getrennt werden. Ich möchte das an dieser Stelle nicht im Detail erklären.

Vereinfachen: Knotenzahl reduzieren.

Mit Pfad|Vereinfachen (Strg + L) wird die Zahl der Knoten einer Kurve oder Kontur reduziert. Wenn dabei behutsam umgegangen wird, büßt das Schriftbild nicht an Qualität ein und verändert sich optisch kaum oder gar nicht. Dagegen profitiert die Größe der fertigen SVG-Datei stark von der Prozedur, da sie erheblich kleiner wird: Ein Din A-5 Dokument hat mehr als die Hälfte seiner Dateigröße nur durch das Vereinfachen der Kurven eingebüßt!

Im hier gezeigten Beispiel wurde die Knotenzahl durch einmaliges Vereinfachen von 130 auf 69 verringert. Wenn Sie genau hinschauen, bemerken Sie Veränderungen, besonders in den letzten drei Buchstaben des Wortes mode . Dieses Phänomen wird verstärkt auftreten, wenn längere Wörter oder ganze Wortgruppen auf einen Schlag vereinfacht werden. Es ist darum vielleicht besser, erst Silben zusammenzusetzen (siehe oben) und dann einzeln zu vereinfachen. Allerdings werden dann insgesamt mehr Knoten erhalten bleiben,

Einbau von Hyperlinks

Beliebige Elemente einer SVG-Grafik können mit Hyperlinks ausgestattet werden.

Selektieren Sie zuerst die Wörter, die verlinkt werden sollen. Klicken Sie dann rechts auf die markierte Selektion. Im Kontextmenü führen Sie den Befehl Verknüpfug erstellen aus.

Im angezeigten Dialog können Sie den Verweis nun definieren. Nur das Feld Href ist wirklich notwendig, da es das Verweisziel enthält. Geben Sie also hier den URL der verknüpften Seite ein.
Das Feld Titel entspricht dem Attribut title eines Hyperlinks in HTML und Ziel wird schließlich zu target .

Zur Verdeutlichung sollten Sie verlinkte Wörter einheitlich einfärben. Einerseits wird ihr Charakter damit für den Leser gleich erkennbar. Andererseits wird nach der Veröffentlichung des Manuskripts im Web auch einer Erwartungshaltung entsprochen. Selbst wenn es sich hier nur um eine SVG-Grafik handelt, kann sie nun wie jede andere Web-Seite aufgefasst werden. Tipp

Barrierefreiheit

Wenn das Konzept der Barrierefreiheit Sie beschäftigt, kann handgeschriebener Text nur eine Ergänzung zu Ihrer gewöhnlichen Redaktionsarbeit sein. Wann immer Sie solche Dokumente erzeugen, müssen Sie entweder eine alternative, eingetippte Version zur Verfügung stellen oder akzeptieren, dass Sie Menschen von der Lektüre Ihres Materials ausschließen.

Alles hängt davon ab, wie sie die Wichtigkeit Ihres Dokuments einschätzen und von der Notwendigkeit, eine Anzahl von Personen zu erreichen.

Ich werde meine eigene, persönliche Einstellung nicht beschreiben, auch, weil ich gar nicht sicher bin, eine zu haben. Allerdings behaute ich, dass das World Wide Web, als Ganzes, ständig neu bewertet werden muss. Wenn Sie der Meinung sind, dass alles wunderbar ist und genau so, wie es sein soll, dann müssen Sie auch – konsequenterweise im Rhythmus der ungefragt eingeführten Veränderungen – Ihre Gewohnheiten der Veröffentlichung häufig anpassen.

Letzte Änderungen

Sa 16. Apr 2022

Tipp zum Hyperlink erweitert um Hinweis auf pointer-events

Tipp verbreitert und undurchsichtig gemacht

Sa 9. Apr 2022

Barrierefreiheit

Sa 12. Mär 2022

Hyperlinks

Mo 7. Mär 2022

Vereinfachen

Inhaltsverzeichnis erweitert

Sa 5. Mär 2022

Zerlegen und Kombinieren

Mo 28. Feb 2022

Vektorisierung

So 27. Feb 2022

Hierarchie der Absätze umorganisiert

Verfahren in Inkscape