Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.

--- faecher:informatik:oberstufe:codierung:bilder:sgv:start [27.09.2022 12:55] – sbel
+++ faecher:informatik:oberstufe:codierung:bilder:sgv:start [10.10.2023 15:05] (aktuell) – Frank Schiebel
@@ Zeile 27: / Zeile 27: @@
 in einer Datei mit der Endung „SVG“ und öffnet man sie per Drag&Drop in einem Browser, so erscheint folgendes Bild:
+{{ :faecher:informatik:oberstufe:codierung:bilder:sgv:svgbild.png |}}
+Ausgangszeichenpunkt P(x|y) für Rechteck (rect) und Text (text) ist ihre linke obere Ecke (x- und y-Attribut). Die Position einer Ellipse wird durch ihren Mittelpunkt (cx- und cy-Attribut) festgelegt, ihre Radien durch rx- und ry-Attribut.
+Hintergrund- bzw. Rahmenfarbe werden mit den Universalattributen "fill" bzw. "stroke" festgelegt. Ihre Standardwerte sind "schwarz" bzw. "weiß".
+Polygone (Vielecke) werden durch eine Liste von Punkten festgelegt, die in der angegeben Reihenfolge miteinander verbunden werden. Der letzte Punkt der Liste wird mit dem ersten verbunden. So erzeugt der Tag
+<code>
+<polygon points="50,50 50,200 300,300 400,200 450,70" fill="#FFCC00"/>
+</code>
+die folgende Grafik:
+{{ :faecher:informatik:oberstufe:codierung:bilder:sgv:svg2.png |}}
+Die folgende Tabelle fasst die grundlegendsten SVG-Befehle zusammen, weitere sind unter https://wiki.selfhtml.org/wiki/SVG/Tutorials/Einstieg/Grundformen zu finden:
+^ Objekt  ^ Tag-Beispiel ^
+|Strecke  |''<line x1="100" y1="50" x2="500" y2="400" stroke="#FF0000"/>'' |
+|Rechteck  | ''<rect x="100" y="100" width="500" height="200"/>  '' |
+|Kreis  | ''<circle cx="100" cy="50" r="40"/>'' |
+|Ellipse | ''<ellipse cx="300" cy="80" rx="100" ry="50"/>'' |
+|Text  | ''<text x="100" y="50">SVG ist super!</text>'' |
+|Polygon  | ''<polygon points="50,50 50,200 300,300 400,200 450,70"/>'' |
+Ein Online-Editor, in dem man direkt SVG Befehle eingeben und ausprobieren kann, findet sich hier:
+https://wiki.selfhtml.org/extensions/Selfhtml/frickl.php/Beispiel:SVG-Anw-Flaggen-1.html#view_result
+----
+{{:aufgabe.png?nolink  |}}
+=== (A1) ===
+Erstelle folgendes Bild im SVG-Format (Breite: 300 Pixel, Höhe: 150 Pixel):
+{{ :faecher:informatik:oberstufe:codierung:bilder:sgv:flagge.png |}}
+----
+{{:aufgabe.png?nolink  |}}
+=== (A2) ===
+Erstelle die beiden folgenden Bilder im SVG-Format. Wende für den "verschwommenen" Stern einen der unter https://wiki.selfhtml.org/wiki/SVG/Tutorials/Filter beschriebenen Filter an (Breite und Höhe: 200 Pixel).
+{{ :faecher:informatik:oberstufe:codierung:bilder:sgv:auswahl_001.png |}}