Matthias Scharwies: PNG in SVG umwandeln - best practice Tipps??

Beitrag lesen

problematische Seite

Servus!

Ich arbeite immer noch an den fertigen Layouts.

Bei Design 2 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 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ösungsumweg: 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 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