uebung_05.md

Übung 5

Erstelle SVG-Grafiken für Media Player Controls.

Anweisung

Erstelle SVG-Grafiken von Hand. In der nächsten Stunde soll ein Videoplayer mit selbst erstellten Navigationselementen entstehen. Die Bedienelemente sollten Start und Pause, eventuell auch Stop enthalten, sowie Grafiken für Skip, bzw. Fast Forward. Sie sollen als SVG-Grafiken umgesetzt werden und am besten den bekannten Formen entsprechen:

Die Grafiken sollen in dieser Aufgabe auf quadratischen Grundflächen der Maße 100×100 Pixel aufgebaut werden.

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
</svg>

Die fertigen Dateien sollen in ein HTML-Dokument eingebunden werden, vorzugsweise in einem <nav> Element und einer Liste <ul>.

Das geht entweder über ein <img>-Element, oder indem man den SVG-Code direkt ins HTML an die entsprechende Stelle einfügt. (Beides hat Vor- und Nachteile.)

Auf diese Weise lässt sich das Dokument später leicht um das benötigte Video-Element erweitern.

Gib den SVG-Elementen sinnvolle Klassennamen, um sie später mit CSS leichter gestalten zu können. In der Regel empfiehlt sich hier, eine Klasse für die Füllfarbe des Hintergrunds, eine für die Linienfarbe und eine mit dem Fill der Linienfarbe vorzusehen.

Bonusaufgabe:

• Eventuell macht es je nach deinem gewählter Form Sinn, sich das <path> Element mit seinen Beziertools oder das <use> Element etwas genauer anzuschauen. Damit lassen sich Kurven bzw. sich wiederholende Elemente umsetzen.

Dauer und Abgabe

Die veranschlagte Bearbeitungszeit für diese Aufgabe beträgt 7 Tage, bis zur nächsten Kursstunde.
Die Abgabe dieser Aufgabe ist nicht vorgesehen und dient lediglich deiner eigenen Übung.

Referenzen und weiterführende Links

Bücher

• Practical SVG (A Book Apart, englisch)

MDN

• SVG Tutorial (englisch)
• Pfade
• <use> (englisch)

Path Editor

• Cubic Bézier Curve Example
• jxnblk.github.io/paths
• editor.method.ac
• SVG Warp Tool
• Ssshape
• SVG Path Visualizer

Verschiedene

• SVG (Wikipedia)
• An in-depth SVG tutorial (englisch)
• A Primer on Bézier Curves (englisch)
• The Beauty of Bézier Curves (english, 25m video)
• SVG Path Visualizer (english)
• The Bezier Game
• An illustrated guide to the path syntax
• StackOverflow: Is the xmlns parameter needed?
• Using Javascript with SVG (SVG -> Javascript interface options)