kurse:ef05a-2021:svg:start [https://fginfo.ksbg.ch Fachgruppe Informatik der KSBG]

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== 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.

{{:kurse:ef05a-2021:svg:pasted:20220119-112542.png}} {{:kurse:ef05a-2021:svg:pasted:20220119-112613.png}} {{:kurse:ef05a-2021:svg:pasted:20220119-112806.png}}


===== Codes =====
SVG in HTML eingebettet:
<code python 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>')
</code>

SVG als alleinstehende Datei:

<code python 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>')
</code>