PNG in SVG umwandeln - best practice Tipps??

[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