Servus! Ich arbeite immer noch an den [fertigen Layouts](http://wiki-test.selfhtml.org/wiki/CSS/fertige_Layouts). Bei [Design 2](http://jsr-hersbruck.de/design02/) wollte ich eigentlich den Blues Brothers Mann als SVG-Grafik auch über den Styleswitcher färben. Zuerst mein **Grundproblem beim Umwandeln**: * Ich benutze bisher immer online-Umwander wie [convertio.co](https://convertio.co/de/png-converter/) Der wandelt aber nur die dunkle Fläche um, dabei wird sie mit` <g transform="translate(0,380) scale(0.1,-0.1)" fill="#000000" stroke="none">` transformiert. - Kennt ihr da eine Alternative, die evtl. mehrfarbige SVGs umwandelt? - Wie könnte man die Pfaddaten selbst spiegeln/ umrechnen? - Wie könnte man Teile eines Pfades (die Sonnenbrille) kopieren oder extrahieren? - Mein Lösungs**um**weg: Grafik spiegeln und dann konvertieren, in Grafik nur die Sonnenbrille auswählen, Auswahl umkehren- löschen und speichern - dann nur die Sonnenbrille konvertieren -alles in einer Datei zusammenfügen; das müsste doch einfacher gehen, bloß wie??? Es wäre gut, wenn ich soviele Ideen, Anregungen und Verbesserungsvorschläge erhielte, dass man [SVG/Grafiken_konvertieren](https://wiki.selfhtml.org/wiki/SVG/Grafiken_konvertieren) ausbauen könnte. **Anwendung im Beispiel** Bisher bestanden die diversen Themes aus unterschiedlichen HTML-Dateien. Die Farben wurden meist über png-Grafiken dargestellt. Ich habe jetzt eine HTML-Datei mit Styleswitcher und mehreren CSS-Dateien. * multiple backgrounds - Wie findet ihr den Kontrast des Verlaufs und der Figur? - Soll der Mann auf großen Viewports mittiger positioniert werden? - Könnte man sonst etwas besser machen? * Ich wollte ursprünglich nur eine SVG-Grafik verwenden und sie über CSS unterschiedlich färben. Dabei ergaben sich aber mehrere Probleme: - SVG-Inline-Grafik würde das Markup eines Beispiels für Anfänger aufblähen - würdet ihr das doch so machen? - SVG als Fragment eines HTML-Dokuments kann wohl nicht in allen Browsern als Hintergrundgrafik geladen werden. - SVG-Dokument würden zwar über `@import` externe Stylesheets laden können, ich bräuchte da aber dann den Styleswitcher in JS. Theoretisch ebenfalls möglich, aber für Anfänger zu komplex! - mehrere SVG-Grafiken, die über die jeweils anderen Stylesheets geladen werden. Nicht elegant, aber hoffentlich fool-proof. Was meint ihr? * Fehlende Kontraste bei manchen Akzentfarben - Das Standardtheme in Blau (von mir `#09c` gewählt) sieht imho am Besten aus. - Grün (`lime`) und besonders gelb leiden darunter, dass man keinen guten Kontrast zu weiß hat. Während ich es bei Grün noch so gelassen habe, habe ich das yellow-Stylesheet entsprechenden geändert. Der Text-shadow bei den Überschriften sieht nicht wirklich gut aus - ich würde das als abschreckendes Beispiel aber mit drinlassen und in der Erklärung ansprechen. * Kennt ihr für das Banner eine freie Schrift(art) (evtl. als mitgelieferte/ mitzuliefernde) woff-Datei), die sehr schmal ist? Herzliche Grüße Matthias Scharwies -- Es gibt viel zu tun: *[ToDo-Liste](http://wiki.selfhtml.org/wiki/Kategorie:ToDo)*{: style="display:list-item;list-style-type:disc;font-style:normal;margin:1em 0 0 2em;"}

Servus! Ich arbeite immer noch an den [fertigen Layouts](http://wiki-test.selfhtml.org/wiki/CSS/fertige_Layouts). Bei [Design 2](http://jsr-hersbruck.de/design02/) wollte ich eigentlich den Blues Brothers Mann als SVG-Grafik auch über den Styleswitcher färben. Zuerst mein **Grundproblem beim Umwandeln**: * Ich benutze bisher immer online-Umwander wie [convertio.co](https://convertio.co/de/png-converter/) Der wandelt aber nur die dunkle Fläche um, dabei wird sie mit` <g transform="translate(0,380) scale(0.1,-0.1)" fill="#000000" stroke="none">` transformiert. - Kennt ihr da eine Alternative, die evtl. mehrfarbige SVGs umwandelt? - Wie könnte man die Pfaddaten selbst spiegeln/ umrechnen? - Wie könnte man Teile eines Pfades (die Sonnenbrille) kopieren oder extrahieren? - Mein Lösungs**um**weg: Grafik spiegeln und dann konvertieren, in Grafik nur die Sonnenbrille auswählen, Auswahl umkehren- löschen und speichern - dann nur die Sonnenbrille konvertieren -alles in einer Datei zusammenfügen; das müsste doch einfacher gehen, bloß wie??? Es wäre gut, wenn ich soviele Ideen, Anregungen und Verbesserungsvorschläge erhielte, dass man [SVG/Grafiken_konvertieren](https://wiki.selfhtml.org/wiki/SVG/Grafiken_konvertieren) ausbauen könnte. **Anwendung im Beispiel** Bisher bestanden die diversen Themes aus unterschiedlichen HTML-Dateien. Die Farben wurden meist über png-Grafiken dargestellt. Ich habe jetzt eine HTML-Datei mit Styleswitcher und mehreren CSS-Dateien. * multiple backgrounds - Wie findet ihr den Kontrast des Verlaufs und der Figur? - Soll der Mann auf großen Viewports mittiger positioniert werden? - Könnte man sonst etwas besser machen? * Ich wollte ursprünglich nur eine SVG-Grafik verwenden und sie über CSS unterschiedlich färben. Dabei ergaben sich aber mehrere Probleme: - SVG-Inline-Grafik würde das Markup eines Beispiels für Anfänger aufblähen - würdet ihr das doch so machen? - SVG als Fragment eines HTML-Dokuments kann wohl nicht in allen Browsern als Hintergrundgrafik geladen werden. - SVG-Dokument würden zwar über `@import` externe Stylesheets laden können, ich bräuchte da aber dann den Styleswitcher in JS. Theoretisch ebenfalls möglich, aber für Anfänger zu komplex! - mehrere SVG-Grafiken, die über die jeweils anderen Stylesheets geladen werden. Nicht elegant, aber hoffentlich fool-proof. Was meint ihr? * Fehlende Kontraste bei manchen Akzentfarben - Das Standardtheme in Blau (von mir `#09c` gewählt) sieht imho am Besten aus. - Grün (`lime`) und besonders gelb leiden darunter, dass man keinen guten Kontrast zu weiß hat. Während ich es bei Grün noch so gelassen habe, habe ich das yellow-Stylesheet entsprechenden geändert. Der Text-shadow bei den Überschriften sieht nicht wirklich gut aus - ich würde das als abschreckendes Beispiel aber mit drinlassen und in der Erklärung ansprechen. Herzliche Grüße Matthias Scharwies -- Es gibt viel zu tun: *[ToDo-Liste](http://wiki.selfhtml.org/wiki/Kategorie:ToDo)*{: style="display:list-item;list-style-type:disc;font-style:normal;margin:1em 0 0 2em;"}