Herzlichen Glückwunsch zum [Tag der richtigen Berufswahl](https://twitter.com/search?q=Tag%20der%20richtigen%20Berufswahl&src=typed_query)! > Ich habe mal den Abschnitt zu Standalone-Tags und das "Laterne, Sonne Mond und Sterne"-Tutorial von @Samuel fiedler zusammenkopiert: > > * [**SVG/Tutorials/Standalone-SVGs**](https://wiki.selfhtml.org/wiki/SVG/Tutorials/Standalone-SVGs) Ich habe in den letzten Wochen gehirnt und immer wieder an Formulierungen gearbeitet: # 1. [Namensraumangabe](https://wiki.selfhtml.org/wiki/SVG/Tutorials/Standalone-SVGs#Grundger.C3.BCst) > > Dort findet sich im [3. Abschnitt](https://wiki.selfhtml.org/wiki/SVG/Tutorials/Standalone-SVGs#Namensraumangabe) 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](https://wiki.selfhtml.org/wiki/SVG/Tutorials/Standalone-SVGs#Laterne.2C_Sonne.2C_Mond_und_Sterne) [^1] [^1]: Sollte man den Kapitelnamen anpassen? Wenn ja, wie? 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. [](/images/24573526-0eef-11ed-836d-b42e9947ef30.svg) 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](https://wiki.selfhtml.org/wiki/SVG/Tutorials/Standalone-SVGs#SVG_Viewport) 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. [](/images/92ef56fa-0eed-11ed-8117-b42e9947ef30.svg) 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](https://wiki.selfhtml.org/wiki/SVG/Tutorials/Standalone-SVGs#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 -- Einfach mal was von der [ToDo-Liste](https://wiki.selfhtml.org/wiki/Kategorie:ToDo) auf die Was-Solls-Liste setzen.“

Herzlichen Glückwunsch zum [Tag der richtigen Berufswahl](https://twitter.com/search?q=Tag%20der%20richtigen%20Berufswahl&src=typed_query)! > Ich habe mal den Abschnitt zu Standalone-Tags und das "Laterne, Sonne Mond und Sterne"-Tutorial von @Samuel fiedler zusammenkopiert: > > * [**SVG/Tutorials/Standalone-SVGs**](https://wiki.selfhtml.org/wiki/SVG/Tutorials/Standalone-SVGs) Ich habe in den letzten Wochen gehirnt und immer wieder an Formulierungen gearbeitet: # 1. [Namensraumangabe](https://wiki.selfhtml.org/wiki/SVG/Tutorials/Standalone-SVGs#Grundger.C3.BCst) > > Dort findet sich im [3. Abschnitt](https://wiki.selfhtml.org/wiki/SVG/Tutorials/Standalone-SVGs#Namensraumangabe) 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](https://wiki.selfhtml.org/wiki/SVG/Tutorials/Standalone-SVGs#Laterne.2C_Sonne.2C_Mond_und_Sterne) 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. [](/images/24573526-0eef-11ed-836d-b42e9947ef30.svg) 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](https://wiki.selfhtml.org/wiki/SVG/Tutorials/Standalone-SVGs#SVG_Viewport) 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. [](/images/92ef56fa-0eed-11ed-8117-b42e9947ef30.svg) 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](https://wiki.selfhtml.org/wiki/SVG/Tutorials/Standalone-SVGs#Programme) Zum Schluss habe ich die 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 -- Einfach mal was von der [ToDo-Liste](https://wiki.selfhtml.org/wiki/Kategorie:ToDo) auf die Was-Solls-Liste setzen.“