Office-Dokumente in SVG konvertieren

Eine alternative Darstellung von digitalen Belegen im Rechnungswesen-Unterricht stellen Vektorgrafiken dar. Statt einen Bildschirmabdruck als Rastergrafik in ein LMS einzubinden, wird der Code einer SVG-Datei direkt in HTML eingefügt. Daraus ergeben sich interessante Optionen in Moodle.

So muss der Beleg nicht jährlich aktualisiert werden, da das Jahr oder das ganze Datum per JavaScript generiert werden kann. Informationen über zum Beispiel Kundendaten oder Unternehmerdaten können durch die Autoverlinkung über ein Glossar angezeigt werden. Hier hat man Verknüpfungsmöglichkeiten die auch in echten Buchführungsprogrammen Anwendungen finden. Zufallswerte bei berechneten Aufgaben können direkt im Beleg angezeigt werden. SVG-Dateien können mit vorhandenen Belegen im Office- oder PDF-Format und kostenlosen Programmen wie zum Beispiel Inkscape erstellt werden.

Beispiel-Beleg als Rastergrafik und als SVG

Vorteile und Nachteile in der Übersicht

Vorteile

• Es muss keine externe Datei geladen werden.
• Manipulationen mit CSS oder JavaScript sind möglich.
• Die Autoverlinkung ist innerhalb des Belegs möglich.
• Text und Beträge können per Kopieren und Einfügen entnommen werden.
• Die Grafik kann verlustfrei auf beliebige Größen skaliert werden.
• Vorhandene Office-Dateien können benutzt werden.

Nachteile

• Der HTML-Code wird unübersichtlich, aufgebläht und unverständlicher.
• Fehler im Code können sich auf die gesamte Seite auswirken.
• Das Konvertieren einer SVG ist etwas aufwendig.
• HTML-Kenntnisse sind erforderlich.

Vorgehen in Kurzform

1. Ein Office-Dokument wird zunächst als PDF gespeichert.
2. Die PDF wird dann in Inkscape importiert bzw. geöffnet.
3. In Inkscape wird die Datei als SVG gespeichert.
4. Mit einem HTML-Editor wird JavaScript hinzugefügt.
5. Der Code wird anschließend zum Beispiel in Moodle eingefügt.

Ist die PDF notwendig?

Das direkte Kopieren von Office-Inhalten in Inkscape funktioniert ebenso. Nach meinen Tests wird der Code allerdings etwas kürzer und nach Sichtprobe augenscheinlich sauberer über den Weg der PDF.

Tabellenkalkulation oder Textverarbeitung?

Auch hier: nach meinen Tests eignen sich Tabellenstrukturen augenscheinlich besser zum Konvertieren. SVG-Codes aus Exceldaten sind kürzer und sauberer als aus Worddaten. Text-Objekte werden aus Word heraus häufiger getrennt, obwohl sich die Attribute nicht ändern. Das führt zu längerem Code und die Autoverlinkung funktioniert nicht.

Schriftarten

Bei Verwendung einer SVG kann man nicht problemlos davon ausgehen, dass alle Belege auf allen Betriebssystemen identisch aussehen (v. a. auf Android-Systemen). Die Schriftart wird über ein style-Attribut direkt im SVG-Code angegeben. Das bedeutet: man sollte mindestens auf websichere Schriftarten zurückgreifen. Das erscheint zunächst langweilig. Da wir hier aber von Belegen reden, wird zumindest eine gewisse Seriosität und Praxisnähe sichergestellt.

Auf grafische Text-Elemente muss man natürlich nicht verzichten. Mit ausgefallenen Schriftarten erzeugte Wörter sollten aber bei der Bearbeitung in Inkscape in Pfade umgewandelt werden. Der Text ist dann kein Text mehr, kann daher nicht aus dem Beleg kopiert werden und die Autoverlinkung funktioniert nicht. Allerdings wird der Teil des Belegs wie gewünscht auf allen System identisch angezeigt.

Hierzu muss der entsprechende Text markiert und mit Pfad-Objekt in Pfad umwandeln konvertiert werden:

Datum generieren

Da in der SVG die Positionierung des Textes mit x-y-Koordinaten angegeben wird, sollte bereits im Office-Dokument der Platzbedarf angegeben werden. Dazu trägt man einfach ein Platzhalter-Datum ein, mit der aber dann endgültigen Datumsformatierung:

Der JavaScript-Code wird erst in der erstellten SVG-Datei eingefügt. Dazu sucht man in einem HTML-Editor den Platzhalter und tauscht ihn mit dem JavaScript-Code aus. Vorschläge sind in der Notion-Sammlung zu finden. Möglich wäre nur das Jahr oder das ganze Datum automatisch aktualisieren zu lassen.

Anpassungen im HTML-Code

Empfehlenswert ist folgende Anpassung:

• Die SVG in einen Container einbinden.
• Die maximale Breite beschränken, zum Beispiel auf 500px.
• Width der SVG auf 100 % setzen.
• Height entfernen.

Autoverlinkung

Für die Autoverlinkung wird in Moodle ein Glossar erstellt und Autolink aktiviert. Bei Anklicken einer Verlinkung öffnet sich der entsprechende Eintrag direkt über dem Beleg.

Video: Beispiel-Beleg mit Zufallswert in der Aktivität Test