kurse:ef05a-2021:svg:start

Differences

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

Link to this comparison view

Both sides previous revision Previous revision
kurse:ef05a-2021:svg:start [2022/01/25 11:40] – [Codes] Ivo Blöchligerkurse:ef05a-2021:svg:start [2022/01/25 12:05] (current) – [SVG] Ivo Blöchliger
Line 1: Line 1:
 +====== 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>