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

[ottogal]

Hi Matthias,

• Kennt ihr für das Banner eine freie Schrift(art) (evtl. als mitgelieferte/ mitzuliefernde) woff-Datei), die sehr schmal ist?

Seit Jahren gefällt mir Yanone Kaffeesatz ausgesprochen gut.

(Zu SVG kann ich mangels Erfahrung nichts beitragen.)

[Matthias Scharwies]

Servus!

Danke, das sieht gut aus!

Herzliche Grüße

Matthias Scharwies

[Performer]

Hi Matthias,

Unter MacOS ist mein typischer Weg, eine SVG-Datei zu verschlanken:

unsaubere SVG-Datei –> Grafic –> SVG-Cleaner –> BoxySVG –> SVG-Cleaner –> Coda (manuelle Korrekturen)

Manchmal, wie hier bei dem SVG-Mann geht es auch mal etwas kürzer, doch meist sind mehrere Programme und Bearbeitungsschritte notwendig, um am Ende eine schlanke SVG-Datei zu erhalten.

Für Windows wird es sicher vergleichbare Programme geben. Dreh- und Angelpunkt ist bei meiner SVG-Bearbeitung BoxySVG. Sehr empfehlenswert.

<?xml version="1.0" encoding="UTF-8"?>
<svg width="345" height="380" viewBox="0 0 345 380" xmlns="http://www.w3.org/2000/svg">
	<path d="m58 150h150v205h-105l-24-22-10-20-12-43-5-120z" fill="#dddddd"/>
	<g fill="#333333">
		<path d="m37 379.4c0-1.2 2.4-10.4 4.6-17.9 4.9-16.4 10.6-25.8 18.2-30.3 3.9-2.2 5.9-2.7 11.4-2.7 3.8 0 6.8-.1 6.8-.3 0-.1-2.1-2.8-4.7-5.9-6.5-8.1-9-14.4-12.9-32.8-6.7-31.6-6.3-30.5-9.5-30.5-3 0-9.1-3.4-12.8-7.2-6.2-6.2-10.9-21.4-9.7-31.4.6-5.3 4.2-14.3 6.9-17.5 3.2-3.7 8.8-7.6 12-8.4 3.1-.8 3.1-1 1.6-7-.9-3.7-.7-5.4 1.4-12.4 2.2-7.2 2.3-8.1.8-8.1-.9 0-3.2-.8-5.1-1.8-1.9-1.1-4.6-2.2-6-2.5-2.7-.7-16.7-7.2-23.5-10.9-2.2-1.2-6.6-4.8-9.8-7.8-7.7-7.5-7.7-10.2.3-16.2 3.7-2.8 12.9-6.2 19.3-7.2 2-.3 5.2-.8 7-1.1 1.7-.3 8.3-.6 14.5-.8 10.2-.2 11.3-.4 11.8-2.2.3-1.1 2.6-6.3 5.1-11.5s5.3-11.5 6.3-14 3.5-8.1 5.5-12.5c6-13 6.2-13.4 12.4-27.5 4.8-10.9 6.9-14.5 11-18.6 9.1-9.2 20.8-12.7 35.4-10.5 15.4 2.4 23.5 5.1 57.6 19.6 30 12.7 36.6 16.1 47.6 24.2 12.1 8.9 14.7 14 14.4 28.8-.1 5.5-.5 12.9-1 16.5-2.3 18.6-4 30.8-4.5 33.2-.6 3.1.6 4 17.1 12.7 12.3 6.5 17.6 10.7 19.9 16 1.8 3.9 1.8 4.2 0 10.8-2.7 9.6-8.1 15-18.9 18.8-4.4 1.6-9.1 3.2-10.4 3.7-1.7.6-2.1 1.2-1.5 2.6.5.9.9 4.2.9 7.3 0 4.8-.8 7.3-6.2 18.3-3.8 7.6-6.3 14-6.3 16 0 6.5-8.7 19.4-16.9 24.9l-2.3 1.5 3.8 5c3.1 3.9 17.2 21.4 33.4 41.2 3 3.8 37 24.4 53 32.2 21.8 10.8 23.5 11.9 27.1 19l2.9 5.8h-154c-84.7 0-154-.3-154-.6zm58.6-34.5c-1.4-1.7-2.6-3.4-2.6-3.8 0-2.1 4.5-6.1 8.3-7.5 4.8-1.7 19.7-2.9 19.7-1.6 0 .5-.4 1.9-.9 3.3-1.7 4.3 1.1 5.7 8.4 4.3 15.3-3 36.7-21.1 41.8-35.4 2.4-6.6 2.8-14.5 1.1-20.1-1.2-4-1.2-5.4.1-10.1.8-3 1.6-6.4 1.7-7.5.2-1.3 2.6-3.2 6.8-5.5 5.9-3.2 6.7-4 8.7-9 3.1-7.7 3.1-22-.1-22-.7 0-1.8 2.8-2.5 6.3-2.5 12-10.4 23.2-19.9 27.8-3.6 1.8-6.3 2.3-11.9 2.3-9.1-.1-16.3-3.4-24.5-11.2-3.2-3-5.8-5-5.8-4.5 0 2.1 3 9.5 5 12.3s2 3.1.4 10c-1.8 8.1-3.9 10.6-12.4 14.8-4.3 2.1-6.9 2.7-12 2.7-8.5 0-13.3-2.3-16.1-7.6-2.8-5.5-5.9-20.3-5-23.7.7-2.7 2.9-3 2.3-.3-.2.8-.1 2.9.3 4.8.8 4.3 5.4 7.3 11 7.3 6.7 0 8.2-1.9 13-15.2 2.1-5.9 4.6-8.1 8.8-8.1h3.2l-4.3-8.6c-3.7-7.5-5.1-11.8-7.6-23.3-.6-2.6-1-2.8-5.1-2.8-4 0-4.5.3-4.5 2.3 0 2.4-2.9 12.4-5.1 17.2-.7 1.7-3.2 5.7-5.5 9-6.9 10-15.3 15.5-26.7 17.7l-6.4 1.2 1.3 5.6c1.3 5.5 5.4 24.6 7.5 35 1.4 6.9 4.4 12.9 10.3 20.4 2.5 3.3 4.6 6.6 4.6 7.4 0 2.5 8.3 13.3 12.5 16.2 5.1 3.7 5.2 3.7 2.1-.1zm94.4-135.3v-9.3l-5.6-3.8c-9.1-6-25.2-14.1-34.6-17.4-16.1-5.6-21.9-6.4-50.3-6.6-24-.2-34.9-1.2-41-3.5-1.9-.7-2.5-.5-3 1-.4 1.3.7 3 4.2 6.3 10 9.2 13 11.6 15.5 12.6 1.3.5 11.2 1.2 21.9 1.5 10.7.4 21.2.9 23.4 1.1 2.2.3 6.2-.2 8.9-1s6.8-1.5 9-1.5c4.5 0 9.2 2 8.9 3.8-.2.6 1.8 1.4 4.5 1.7 6.7.9 10.9 2.3 17.5 5.8 6.2 3.3 15.3 12.3 16.3 16.3.4 1.5 1.3 2.4 2.5 2.4 1.7 0 1.9-.8 1.9-9.4zm-79.8-6.4c.2-4.1 0-5.2-1.2-5.3-.8 0-2.5-.2-3.6-.4-1.9-.4-2.2.2-2.8 4.2-.9 6.8-.9 6.8 3.3 6.8h3.9z"/>
		<path d="m98.1 315.5c-7.1-2-10.4-4.1-17.5-11.4-6.3-6.3-6.7-8.4-1.3-6.2 22.4 9.4 32.7 9.7 48.5 1.1 3-1.6 5.8-2.7 6.2-2.5.4.3 1.3 2.6 1.9 5.2 1.2 4.5 1.1 4.7-1.6 7.5-6.3 6.2-24.9 9.5-36.2 6.3z"/>
		<path d="m141.3 304.3c-1.6-.6-1.6-2.8-.1-5.3 1-1.5.7-3-1.5-8.6-2.9-6.8-2.9-8.6-.2-6.4 2.6 2.1 5.6 7.9 7.1 13.3 1.2 4.7 1.2 5.3-.3 6.5-1.8 1.3-2.9 1.4-5 .5z"/>
	</g>
	<g	fill="#0099cc">
		<path d="m141.5 256.2c-7.7-3.7-14.6-10.6-18.4-18.5-3.5-7.1-6.1-16.5-6.1-21.7 0-4.5 2.9-10.8 6.5-14 2.5-2.3 3.4-2.5 12.8-2.5 16.4.1 30.9 5.5 39.5 14.9 4.6 5 5.8 9.1 4.8 17-1.3 11.8-7.7 21.9-16.1 25.7-6.4 2.9-15.7 2.5-23-.9z"/>
		<path d="m50 251.5c-9.2-4.2-15-14.8-15.1-27.8-.2-14.6 11-24.3 30.6-26.7 12.7-1.5 21.8-.2 25.9 3.9 6.2 6.3 4.2 22-4.5 35.1-4.7 6.9-8.2 10.1-15.3 13.7-6.4 3.3-16.4 4.1-21.6 1.8z"/>
	</g>
</svg>

• Fehlende Kontraste bei manchen Akzentfarben
  • Das Standardtheme in Blau (von mir #09c gewählt) sieht imho am Besten aus.

Und warum? Weil Blau die einzige relativ ungesättigte Farbe innerhalb der angebotenen ist. Nimm jeweils eine verwandte Farbe aus der selfhtml-Farbpallette und jedes Theme ist brauchbar. Bitte keine abschreckenden Beispiele, das Netz ist voll davon und die Gefahr viel zu groß, dass es „gefällt“.

Ciao, Performer

[Matthias Scharwies]

Servus!

Hi Matthias,

Unter MacOS ist mein typischer Weg, [...] Manchmal, wie hier bei dem SVG-Mann geht es auch mal etwas kürzer, doch meist sind mehrere Programme und Bearbeitungsschritte notwendig, um am Ende eine schlanke SVG-Datei zu erhalten.

Danke, da versuch ich mich mal dran!

• Fehlende Kontraste bei manchen Akzentfarben
  • Das Standardtheme in Blau (von mir #09c gewählt) sieht imho am Besten aus.

Und warum? Weil Blau die einzige relativ ungesättigte Farbe innerhalb der angebotenen ist. Nimm jeweils eine verwandte Farbe aus der selfhtml-Farbpallette und jedes Theme ist brauchbar.

Stimmt, jetzt hab ich' so gemacht: Beispiel 2 mit Self-Farben

Gelb sieht immer noch schrecklich aus, aber man kann's lesen. Der "Ocker"-Ton sieht imho nur im Zusammenspiel mit den anderen Grundfarben gut aus

Bitte keine abschreckenden Beispiele, das Netz ist voll davon und die Gefahr viel zu groß, dass es „gefällt“.

Das stimmt. Ich bin jetzt grad in letzter Zeit wieder von der Selfhtml-Farbpalette abgekommen, weil Anfänger die Farbnamen (zumindest die einfacheren) besser verstanden als kryptische hex-Bezeichnungen. Bei den fertigen Layouts, gerade bei solchen Themes, sollte aber wirklich auf Stimmigkeit geachtet werden. Ich hoffe, es passt jetzt so.

Ciao, Performer

Herzliche Grüße

Matthias Scharwies