PNG in SVG umwandeln - best practice Tipps??

[Matthias Scharwies]

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