Table of Contents

SVG
- Software
- Aufgaben
- Codes

SVG

https://www.w3schools.com/graphics/svg_intro.asp
etwas ausführlicher http://edutechwiki.unige.ch/en/Static_SVG_tutorial
evtl. Wikipedia: https://en.wikipedia.org/wiki/Scalable_Vector_Graphics

Software

Text-Editor
Inkscape
- Auf Schulcomputern: (Auf C:\ einen Ordner inkscape anlegen, darin folgendes Archiv entpacken): https://inkscape.org/release/inkscape-1.1.1/windows/64-bit/compressed-7z/dl/
Ihr eigenes Python-Script.

Aufgaben

Zeichnen Sie in Inkscape ein Herz aus 4 kubischen Bezierkurven und speichern Sie die Datei.
Extrahieren Sie Punkte und Kontrollpunkt aus der Datei (konsultieren Sie dazu die Dokumentation zum SVG Pfad-Element).
Schreiben Sie ein Python Script, das eines der folgenden Bilder (oder eigene Bilder in diesem Stil) als SVG-Code generiert und direkt in eine SVG-Datei schreibt.

Codes

SVG in HTML eingebettet:

svginhtml.py

with open("test.html", "w") as file:
    file.write('<html><body><h1>My first SVG</h1><svg width="800" height="800">\n')
 
    for i in range(30):
        file.write('<circle cx="%d" cy="%d" r="%d" stroke="green" stroke-width="2" fill="none" />\n' % (i*5, i*5, i*2))
 
    file.write('</svg></body></html>')

SVG als alleinstehende Datei:

standalonesvg.py

with open("test.svg", "w") as file:
    file.write('<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" width="800" height="800">\n')
 
    for i in range(30):
        file.write('<circle cx="%d" cy="%d" r="%d" stroke="green" stroke-width="2" fill="none" />\n' % (i*5, i*5, i*2))
 
    file.write('</svg>')