44:["$","title",null,{"children":"Data-Driven Web Engineering: Einführung SVG | pmeschenmoser-hslu | Observable"}] 4c:T1033,

4d:[] 48:{"id":"4319af6ebd1bb385","slug":"intro-svg","title":"Data-Driven Web Engineering: Einführung SVG","thumbnail":"0ae02462fa018612c421a9cba6ee003b4054a47a5dd0d5b4ab5b127c0b1df346","access_level":"public","create_time":"$D2022-05-18T06:54:51.262Z","update_time":"$D2023-05-17T10:47:21.424Z","view_time":null,"first_public_time":"$D2023-05-15T15:36:51.818Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"d453c31c6f30f58d","login":"pmeschenmoser-hslu","name":"","avatar_url":"https://avatars-next.observableusercontent.com/63655b833b666ab4131690b92aedce308446ed9468293aec56b2ee71db090aaa","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":488,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5a3b6ff689928461","login":"pmeschenmoser-hslu","name":"","avatar_url":"https://avatars-next.observableusercontent.com/63655b833b666ab4131690b92aedce308446ed9468293aec56b2ee71db090aaa","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"5a3b6ff689928461","login":"pmeschenmoser-hslu","name":"","avatar_url":"https://avatars-next.observableusercontent.com/63655b833b666ab4131690b92aedce308446ed9468293aec56b2ee71db090aaa","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":11,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Data-Driven Web Engineering: Einführung SVG","cells":[{"id":0,"value":"# Data-Driven Web Engineering: Einführung SVG","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"- *Scalable Vector Graphics* ist ein Grafikformat um Vektorgrafiken zu beschreiben. Eine SVG ist beliebig skalierbar, man kann also stark hineinzommen/vergrössern: die Grafik wird nicht verpixelt.\n- Dies lässt sich sehr gut anhand dieses Beispiels und einem Browserzoom von z.B. 500% veranschaulichen.\n- Gerne dürfen Sie auch untersuchen, wie die folgende Grafik (Quelle: hier) im PNG-Format bei 500% Browserzoom dargestellt wird. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":17,"value":"

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":124,"value":"- **Aufgabe 1.1:** Weshalb ist in der folgenden Grafik kein Kreis sichtbar?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":128,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":133,"value":"- **Aufgabe 1.2**: Weshalb ist in der folgenden Grafik kein Rechteck sichtbar?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":144,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":150,"value":"- **Aufgabe 1.3**: Die Deckkraft eines SVG-Elements kann über das Attribut *opacity* angepasst werden. Dieses erwartet einen Wert aus dem Intervall [0,1]. Reproduzieren Sie die folgende Grafik mithilfe von SVG! Ungefähre Grössen, Positionen und Farben sind natürlich in Ordnung.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":157,"value":"$4c","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":172,"value":"","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":185,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":205,"value":"- Schauen wir uns noch 4 weitere SVG-Elemente an: Linien, Polylines, Polygons und Paths.\n- Eine einzelne Linie kann mithilfe des *line*-Tags erstellt werden, Start- und Endkoordinaten werden hierbei durch Attribute gegeben:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":221,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":227,"value":"- Mehrere Liniensegmente können anhand des *polyline*-Tags in einem Element zusammengefasst werden. Die Koordinaten werden im Attribut *points* gesetzt, in der Form *x1,y1 x2,y2 xn,yn*. Mit demselben Attribut aber dem *polygon*-Tag sind Polygone umsetzbar:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":233,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":239,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":250,"value":"- Nützlich sind auch *path*-Elemente, mit welchen zum Beispiel Kurven und Spiralen gezeichnet werden. Die Angabe der Pfadkoordinaten erfolgt jedoch über eine spezielle Syntax, welche im Rahmen dieses Moduls nicht weiter vertieft werden soll. Beispielsweise in der d3-Bibliothek gibt es schöne Methoden, um sich die Koordinaten eines *paths* generieren zu lassen. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":259,"value":"## 2. Gruppen und transform ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":265,"value":"- Im Code benachbarte SVG-Elemente können mithilfe des *g*-Tags gruppiert werden.\n- Für eine Gruppe können auch bestimmte Attribute (siehe auch hier) gesetzt werden, welche dann für alle Mitglieder/Kinder der Gruppe gelten. Der Code wird strukturierter und die Performanz bei Benutzerinteraktionen kann erhöht werden. Dies liegt daran, dass nur Attributswerte des Gruppenelements (und nicht von allen 3000 Kindern) angepasst werden müssen und das HTML-Dokument weniger umfangreich ist. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":269,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":285,"value":"- Wichtig: das Gruppenelement an sich ist nicht sichtbar, nur seine Mitglieder/Kinder, falls diese keine Gruppen und korrekt parametrisiert sind.\n- In der Praxis können so z.B. alle Punkte eines Streudiagramms in eine Gruppe, alle Elemente für Achsen in eine weitere Gruppe, und alle Achsenlabels in eine dritte Gruppe gesetzt werden.\n- Oft sieht man die Angabe des *transform*-Attributs für eine Gruppe. Mit diesem Attribut können SVG-Elemente translatiert, skaliert, rotiert, verzerrt werden. Die ersten zwei Transformation werden später wichtig sein, wenn die Punkte Ihres eigenen Streudiagramms interaktiv verschoben oder gezoomed werden sollen.\n- Beispiele mit Translation und Rotation:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":387,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":396,"value":"- Die Transformationen können auch aneinander gereiht werden. Im folgenden Beispiel wird die Größe jedes Gruppenmitglieds erst mit dem Faktor 1.25 skaliert, danach translatiert. Die Ausführungsreihenfolge der Transformationen ist also von rechts nach links, siehe Zeile 2 der folgenden Zelle.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":304,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":418,"value":"- **Aufgabe 2.1**: Folgendes Rechteck wurde um 45° um seinen Mittelpunkt (100,100) rotiert. Passen Sie den Wert des *transform*-Attributs so an, dass das jetzt rotierte Rechteck noch um 20 Einheiten nach oben verschoben wird. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":407,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":426,"value":"- **Aufgabe 2.2:** Erläutern Sie, weshalb das folgende Rechteck nicht rotiert erscheint.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":430,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W4d","stdlib":"1"}} 24:null