PNG in SVG umwandeln - best practice Tipps??
Matthias Scharwies
- css
- fertige layouts
- svg
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:
<g transform="translate(0,380) scale(0.1,-0.1)" fill="#000000" stroke="none">
transformiert.
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
Ich wollte ursprünglich nur eine SVG-Grafik verwenden und sie über CSS unterschiedlich färben. Dabei ergaben sich aber mehrere Probleme:
@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!Fehlende Kontraste bei manchen Akzentfarben
#09c
gewählt) sieht imho am Besten aus.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
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.)
Servus!
Danke, das sieht gut aus!
Herzliche Grüße
Matthias Scharwies
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
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