Einheit 7: Export als SVG

Das SVG-Format kann verwendet werden, um vektoriell beschriebene Bilder zu speichern. Diese Bilder können auch von Web-Browsern problemlos angezeigt werden. Der Vorteil ist ein kleiner Speicherbedarf und eine perfekte Anzeige, unabhängig von der Auflösung. Diese Vorteile erkauft man sich aber durch mehr Rechenaufwand auf dem anzeigenden Gerät.

Hier ist ein Beispiel:

<?xml version="1.0" encoding="UTF-8"?>
<svg id="ssa" width="210mm" height="297mm"
      version="1.1" viewBox="0 0 210 297"
      xmlns="http://www.w3.org/2000/svg" viewport-fill="white">
  <g id='laby' transform='translate(20.00 63.50) scale(56.67)'
       style="fill:none;stroke:#000000;stroke-opacity:1;stroke-linecap:round;stroke-width:0.0124">
    <path d='M 0 0 h 1'/>'
    <path d='M 0 0 v 1'/>'
    <path d='M 0 1 v 1'/>'
    <path d='M 0 2 h 1'/>'
    <path d='M 0 2 v 1'/>'
    <path d='M 0 3 h 1'/>'
    <path d='M 1 0 h 1'/>'
    <path d='M 1 0 v 1'/>'
    <path d='M 1 2 h 1'/>'
    <path d='M 1 3 h 1'/>'
    <path d='M 2 0 h 1'/>'
    <path d='M 3 0 v 1'/>'
    <path d='M 2 1 v 1'/>'
    <path d='M 3 1 v 1'/>'
    <path d='M 3 2 v 1'/>'
    <path d='M 2 3 h 1'/>'
  </g>
</svg>

In VS-Code, im Verzeichnis labyrinth, legen Sie eine neue Datei test.svg an.
VS-Code wird sich beschweren, dass das Bild nicht angezeigt werden kann (weil ja noch nichts in der Datei steht) und anbieten, die Datei im Text-Editor zu öffnen. Tun Sie das.
Kopieren Sie obigen Code in die Datei test.svg und speichern Sie.
Betrachten Sie das Bild auf eine der folgenden Arten:
- Mit dem VS-Code live-Server (Rechts-Klick auf die Datei test.svg → Open with Live Server)
- Installieren Sie Inkscape, z.B. auf der Kommandozeile mit winget install inkscape, oder via der offiziellen Webseite: https://inkscape.org/. Öffnen Sie dann die Datei test.svg mit Inkscape.
- Evtl. haben Sie bereits in Programm installiert, das SVG-Dateien anzeigen kann. Versuchen Sie es mit Doppelklick im Windows Datei-Manager.
Mit der folgenden Info-Box, studieren Sie die Datei test.svg:

Erste Zeile besagt, dass es sich um ein XML-Dokument handelt (ähnlich wie HTML, aber mit strengeren Regeln)
Die nächsten drei Zeilen definieren dass es sich um ein SVG-Dokument handelt. Dabei wird auch die Grösse vom Bild festgelegt (hier A4 Hochformat).
<g> definiert eine Gruppierung von Elementen. Dabei wird auch eine Verschiebung und Skalierung (Vergrösserung) sowie der Linienstil festgelegt, die dann auf alle inneren Element angewandt werden.
<path> definiert einen Pfad. Hier werden nur drei folgenden Kommandos verwendet:
- M x y Move absolute: Verschiebt den «Stift» zur angegebenen Koordinate.
- h x Horizonal line relative: Zeichnet vom aktuellen Punkt aus eine horizontale Linie mit Länge x.
- v y Vertical line relative: Zeichnet vom aktuellen Punkt aus eine vertikale Linie mit Länge y.

In der Datei test.svg fügen Sie zwei Pfade so hinzu, dass das mittlere Feld komplett eingeschlossen ist.

Im Weiteren geht es noch darum, so eine SVG-Datei direkt in Python aus dem berechneten Labyrinth zu generieren:

Speichern Sie die Datei svgexport.py im Verzeichnis labyrinth.
Öffnen Sie die Datei in VS-Code und versuchen Sie den Code in der Datei zu verstehen.
In der Datei main.py importieren Sie die Funktion svgExport.
Am Ende der Datei, rufen Sie die Funktion wie folgt auf. Passen Sie gegebenenfalls den Ausgabedateinamen herz.svg an:

svgExport(laby, "herz.svg")

Führen Sie die Datei main.py aus und betrachten Sie das generierte Bild.

Empfohlene Auflösung

Mein Sohn sagte mir, 3.5mm - 4mm grosse Zellen eignen sich gut, um den Weg mit Leuchtstiften nachzuzeichnen.

Auf einem A4 mit 20mm Rändern macht das eine horizontale Auflösung von 40-50 Pixeln, und vertikal von 65-75 Pixeln.