SVG Icon erstellen das auch die Farben ändern kann?

[schuma]

Gibt es eigentlich eine Anleitung wie man ein SVG Icon erstellen kann, so dass auch die Farben geändert werden?
Ich hatte bis jetzt nur eine etwas ältere Anleitung gefunden, die nur sehr vage beschreibt wie es geht und bei mir auch nicht funktioniert.

https://knx-user-forum.de/forum/supp...elche-software
Liegt natürlich an mir, aber ich würde schon gerne noch ein paar Icons erstellen


Marc

[bmx]

Was genau funktioniert denn nicht bei Dir?

[smai]

Ich habe mit SVGO bzw. der Online-Version SVGOMG gute Erfahrungen gemacht.
Wenn du die Icons da durchlaufen lässt, werden sie verkleinert und sollten die Angaben im richtigen Format haben.

Entscheidend für die Einfärbbarkeit ist, dass stroke und fill nicht als CSS-Style sondern als Attribute definiert sind (also z.B. <path fill="#fff" und nicht <path style="fill: #fff")

[schuma]

bmx : Das einfärben
smai : Teste ich heute Abend mal.

Danke erstmal!

[schuma]

Also funktioniert!

1. Auf der Seite
https://www.google.ch/url?sa=t&rct=j...CJ8R23ZbjWE2Hh

Die erstellte SVG hochladen und gleich wieder downloaden

2. Mit notepad++ die runtergeladene Datei öffnen und die vorher erstellte Farbe (Hier [grün in HEX #0b0] durch [weiss HEX #fff] ersetzen (bei den weissen Icons bei den sw Icons natürlich durch schwarz). Es können je nach komplexität der Icons auch noch mehrere solcher Einträge vorhanden sein!

Beispiel runtergeladenes SVG-Icon:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="20 20 321 321"><g fill="none" stroke="[COLOR=#FF0000]#0b0[/COLOR]" stroke-width="10"><path d="M166.14 280.167c0 3.313-2.687 6-6 6h-95.5c-3.312 0-6-2.687-6-6v-180c0-3.313 2.688-6 6-6h95.5c3.314 0 6 2.687 6 6v180z"/><path d="M93.64 94.667v-14c0-3.313 2.687-6 6-6h25.5c3.313 0 6 2.687 6 6v14"/></g><g fill="#00f000"><path d="M309.37 257.924c-.98-4.696-2.54-8.908-5.014-9.594-5.97-1.66-23.057-9.582-23.057-9.582v.02c-8.145-18.517-24.542-21.45-43.45-21.45-24.267 0-44.398 4.838-48.25 41.26-1.85 1.88-3 4.453-3 7.3 0 5.48 4.253 9.92 9.63 10.318.005-1.37.176-2.7.472-3.983 1.84-7.954 8.956-13.89 17.47-13.89 8.513 0 15.63 5.936 17.47 13.89.3 1.307.477 2.663.477 4.06h34.346c0-1.402.175-2.753.477-4.06 1.61-6.96 7.26-12.355 14.35-13.603 1.015-.178 2.052-.29 3.118-.29.567 0 1.127.036 1.678.086 7.76.72 14.074 6.38 15.793 13.807.302 1.303.478 2.658.478 4.055h.382c3.343 0 6.285-1.603 8.19-4.055h.053l-.002-.067c1.334-1.75 2.156-3.904 2.156-6.272.006-3.208-1.48-6.04-3.766-7.95z"/><path d="M227.99 276.272c0-1.41-.214-2.772-.61-4.055-1.736-5.645-6.998-9.76-13.204-9.76s-11.47 4.113-13.206 9.76c-.395 1.283-.61 2.644-.61 4.055 0 7.62 6.198 13.817 13.818 13.817 7.615-.003 13.813-6.2 13.813-13.818zm-21.365 0c0-1.498.448-2.884 1.2-4.055 1.34-2.097 3.675-3.492 6.35-3.492 2.672 0 5.005 1.397 6.347 3.492.752 1.17 1.2 2.562 1.2 4.055 0 4.17-3.38 7.55-7.548 7.55-4.17 0-7.55-3.38-7.55-7.55zM298.234 276.272c0-1.41-.215-2.772-.61-4.055-1.542-5.012-5.873-8.806-11.168-9.593-.667-.1-1.34-.167-2.035-.167-1.073 0-2.112.134-3.12.37-4.796 1.113-8.65 4.72-10.087 9.39-.394 1.283-.61 2.644-.61 4.055 0 7.62 6.2 13.817 13.818 13.817 7.62 0 13.814-6.2 13.814-13.818zm-21.368 0c0-1.498.45-2.884 1.202-4.055.78-1.223 1.9-2.194 3.23-2.802.952-.434 2.003-.69 3.117-.69.818 0 1.587.163 2.324.4 1.67.548 3.09 1.635 4.022 3.092.752 1.17 1.2 2.562 1.2 4.055 0 4.17-3.38 7.55-7.547 7.55s-7.55-3.38-7.55-7.55zM280.86 227.06c0 1.14 1.24 1.38 2.282 1.38h4.84c1.52 0 3.21-.565 3.21-1.38v-10.135c-1.674.314-3.393.498-5.164.498-1.77 0-3.49-.184-5.164-.498v10.136zM301.52 171.03c0-1.383-1.12-2.503-2.5-2.503h-3.26c-1.383 0-2.503 1.12-2.503 2.502v16.09h8.264v-16.09zM278.795 171.03c0-1.383-1.12-2.503-2.5-2.503h-3.262c-1.382 0-2.5 1.12-2.5 2.502v16.09h8.262v-16.09zM261.666 191.253c.852 9.985 7.82 18.25 17.13 21.032.675.202 1.365.37 2.065.512 1.56.318 3.17.494 4.82.494 1.9 0 3.737-.245 5.51-.66.702-.166 1.392-.358 2.067-.583 8.958-2.977 15.613-11.06 16.44-20.794h-48.03z"/></g><path d="M60.805 254.63h102.013" fill="none"/><path d="M64.15 267.965v-12.582H160.724v25.162H64.15v-12.58z" fill="[COLOR=#FF0000]#0b0[/COLOR]"/></svg>

Beispiel mit notepad++ geändertes SVG-Icon:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="20 20 321 321"><g fill="none" stroke="[COLOR=#FF0000]#fff[/COLOR]" stroke-width="10"><path d="M166.14 280.167c0 3.313-2.687 6-6 6h-95.5c-3.312 0-6-2.687-6-6v-180c0-3.313 2.688-6 6-6h95.5c3.314 0 6 2.687 6 6v180z"/><path d="M93.64 94.667v-14c0-3.313 2.687-6 6-6h25.5c3.313 0 6 2.687 6 6v14"/></g><g fill="#00f000"><path d="M309.37 257.924c-.98-4.696-2.54-8.908-5.014-9.594-5.97-1.66-23.057-9.582-23.057-9.582v.02c-8.145-18.517-24.542-21.45-43.45-21.45-24.267 0-44.398 4.838-48.25 41.26-1.85 1.88-3 4.453-3 7.3 0 5.48 4.253 9.92 9.63 10.318.005-1.37.176-2.7.472-3.983 1.84-7.954 8.956-13.89 17.47-13.89 8.513 0 15.63 5.936 17.47 13.89.3 1.307.477 2.663.477 4.06h34.346c0-1.402.175-2.753.477-4.06 1.61-6.96 7.26-12.355 14.35-13.603 1.015-.178 2.052-.29 3.118-.29.567 0 1.127.036 1.678.086 7.76.72 14.074 6.38 15.793 13.807.302 1.303.478 2.658.478 4.055h.382c3.343 0 6.285-1.603 8.19-4.055h.053l-.002-.067c1.334-1.75 2.156-3.904 2.156-6.272.006-3.208-1.48-6.04-3.766-7.95z"/><path d="M227.99 276.272c0-1.41-.214-2.772-.61-4.055-1.736-5.645-6.998-9.76-13.204-9.76s-11.47 4.113-13.206 9.76c-.395 1.283-.61 2.644-.61 4.055 0 7.62 6.198 13.817 13.818 13.817 7.615-.003 13.813-6.2 13.813-13.818zm-21.365 0c0-1.498.448-2.884 1.2-4.055 1.34-2.097 3.675-3.492 6.35-3.492 2.672 0 5.005 1.397 6.347 3.492.752 1.17 1.2 2.562 1.2 4.055 0 4.17-3.38 7.55-7.548 7.55-4.17 0-7.55-3.38-7.55-7.55zM298.234 276.272c0-1.41-.215-2.772-.61-4.055-1.542-5.012-5.873-8.806-11.168-9.593-.667-.1-1.34-.167-2.035-.167-1.073 0-2.112.134-3.12.37-4.796 1.113-8.65 4.72-10.087 9.39-.394 1.283-.61 2.644-.61 4.055 0 7.62 6.2 13.817 13.818 13.817 7.62 0 13.814-6.2 13.814-13.818zm-21.368 0c0-1.498.45-2.884 1.202-4.055.78-1.223 1.9-2.194 3.23-2.802.952-.434 2.003-.69 3.117-.69.818 0 1.587.163 2.324.4 1.67.548 3.09 1.635 4.022 3.092.752 1.17 1.2 2.562 1.2 4.055 0 4.17-3.38 7.55-7.547 7.55s-7.55-3.38-7.55-7.55zM280.86 227.06c0 1.14 1.24 1.38 2.282 1.38h4.84c1.52 0 3.21-.565 3.21-1.38v-10.135c-1.674.314-3.393.498-5.164.498-1.77 0-3.49-.184-5.164-.498v10.136zM301.52 171.03c0-1.383-1.12-2.503-2.5-2.503h-3.26c-1.383 0-2.503 1.12-2.503 2.502v16.09h8.264v-16.09zM278.795 171.03c0-1.383-1.12-2.503-2.5-2.503h-3.262c-1.382 0-2.5 1.12-2.5 2.502v16.09h8.262v-16.09zM261.666 191.253c.852 9.985 7.82 18.25 17.13 21.032.675.202 1.365.37 2.065.512 1.56.318 3.17.494 4.82.494 1.9 0 3.737-.245 5.51-.66.702-.166 1.392-.358 2.067-.583 8.958-2.977 15.613-11.06 16.44-20.794h-48.03z"/></g><path d="M60.805 254.63h102.013" fill="none"/><path d="M64.15 267.965v-12.582H160.724v25.162H64.15v-12.58z" fill="[COLOR=#FF0000]#fff[/COLOR]"/></svg>

3. Danach diese Datei in das Verzeichnis der smartVISU: var/www/html/smartVISU/icons/ws hochladen

fertig ist das neue Icon!

Vielen Dank, Marc

[schuma]

smai : Ist es irgenwie möglich, einzelne Teile eines SVG Icons in einer Farbe statisch zu lassen?
Ich hatte das probiert und den Teil im Icon (ein kleines Auto) rot gelassen. Das funktioniert im prinzip auch ganz kurz beim Seitenaufruf. Dann wird das rot aber durch das weiß ersetzt. kann man das irgendwie ändern?

[smai]

Ja, indem du das umgekehrte machst von oben und das style-Attribut verwendest.

[schuma]

Ahhh, cool!
Danke. (Hätte man auch selber drauf kommen können)