SVG/Tutorials/Standalone-SVGs

[Matthias Scharwies]

Herzlichen Glückwunsch zum Tag der richtigen Berufswahl!

Ich habe mal den Abschnitt zu Standalone-Tags und das "Laterne, Sonne Mond und Sterne"-Tutorial von @Samuel fiedler zusammenkopiert:

• SVG/Tutorials/Standalone-SVGs

Ich habe in den letzten Wochen gehirnt und immer wieder an Formulierungen gearbeitet:

1. Namensraumangabe

Dort findet sich im 3. Abschnitt etwas zur Namensraumangabe und zur Einbindung von XLink:

xmlns:xlink="http://www.w3.org/1999/xlink"

Das wird nötig, wenn Du innerhalb des SVG-Dokuments referenzieren willst; z.B. mit einem use-Element.

Grundgerüst mit Namensraumangabe knackiger formuliert.

2. Laterne, Sonne, Mond und Sterne ^[1]

ist jetzt mit „Screenshots“ visualisiert. Dabei habe ich die Laterne zu einer Kerze verändert. Das ganze Tutorial ist kontextualisiert, d.h. unser Weihnachtsbaum zieht sich durch's ganze Tutorial.

Es gibt eine Mischung aus kurzen Code-Snippets (ohne Beispiel-Vorlage!) und den SVGs rechts. Mit Klick auf das SVG und dann auf Original-Datei kann man das Markup untersuchen oder kopieren. Umständlich? - Dazu später mehr!

3. Viewport und Viewbox

Hier gibt's wieder ein SVG mit Blick durch's Schlüsselloch und eine Infografik, die Viewport und viewBox erklärt und dann eine viewBox-Animation.

In diesem SVG ist bei der png-Vorschau der Text verschoben.

Sowohl bei der viewBox-Animation und der CSS-Animation ist die png-Vorschau eben nicht animiert. (Die CSS-Animation bleibt ganz schwarz! 😟 ) Deshalb habe ich die Original-Datei direkt in der Bildbeschreibung verlinkt.

@Der Martin @Camping_RIDER Wir müssen unbedingt das Wiki-Makeover durchziehen und die NativeSVGHandler-Extension installieren.

4. Animation mit JavaScript

ist noch ne Baustelle

5. Programme

Zum Schluss habe ich die ehemals schlecht verlinkte Seite "SVG/Grafiken erstellen" hier integriert und die externen Links überprüft.

@Samuel fiedler Könntest Du das mal durchlesen und dein Feedback geben? @all Was meint ihr?

Herzliche Grüße

Matthias Scharwies

---

1. Sollte man den Kapitelnamen anpassen? Wenn ja, wie? ↩︎