lehrkraefte:blc:informatik:glf24:laby:svgexport

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

lehrkraefte:blc:informatik:glf24:laby:svgexport [2025/05/15 18:00] – created Ivo Blöchligerlehrkraefte:blc:informatik:glf24:laby:svgexport [2025/05/16 06:44] (current) – Ivo Blöchliger
Line 1: Line 1:
 ====== Einheit 7: Export als SVG ====== ====== 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:
 +<code xml>
 +<?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>
 +</code>
 +
 +  * 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'':
 +<WRAP info>
 +  * 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.
 +</WRAP>
 +
 +  * 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 {{lehrkraefte:blc:informatik:glf24:laby: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:
 +<code python>
 +svgExport(laby, "herz.svg")
 +</code>
 +  * 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. Mein Sohn sagte mir, 3.5mm - 4mm grosse Zellen eignen sich gut, um den Weg mit Leuchtstiften nachzuzeichnen.
  
  • lehrkraefte/blc/informatik/glf24/laby/svgexport.1747332055.txt.gz
  • Last modified: 2025/05/15 18:00
  • by Ivo Blöchliger