Versionen dieses Beitrags

PNG in SVG umwandeln - best practice Tipps??

Avatar 1 Matthias Scharwies
  • PNG in SVG umwandeln - best practice Tipps??
  • 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.
  • - 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;"}