SVG-Icons mit stroke-Color

[Damian]

Beim Erstellen von Icons ist mir aufgefallen, dass in FW_makeImage nur fill-color ersetzt wird, aber nicht color bei stroke-Angaben.

Man kann zwar ein Icon in path wandeln lassen, aber das produziert unnötig Overhead. Es wurden z. B. aus effizienten 1,9 KByte unnötige 7,8 KByte.

Diese Ergänzung in FW_makeImage(@) würde das Problem beheben:

$data =~ s/fill="#000000"/fill="$col"/g;
        $data =~ s/fill:#000000/fill:$col/g;
       $data =~ s/stroke="#000000"/stroke="$col"/g;
        $data =~ s/stroke:#000000/stroke:$col/g;
      } else {
        $data =~ s/fill="#000000"//g;
        $data =~ s/fill:#000000//g;
        $data =~ s/stroke="#000000"//g;
        $data =~ s/stroke:#000000//g;

Mit der Änderung konnte ich keine Inkompatibilität feststellen.

[rudolfkoenig]

Mit der Änderung konnte ich keine Inkompatibilität feststellen.

Ich schon, siehe Anhang.

[Damian]

OK. Ich schau mal, ob mir noch etwas besseres einfällt. Zur Not kann ich die Ersetzung bei mir im Programm machen, denn  auch die Größe der Icons muss ich ohnehin anpassen.

Das auffällige Door-Icon  mit dem schwarzen Rahmen ist bei dunklen Screens auch jetzt schon rahmenlos

Edit: Man könnte die Ersetzung für Stroke nur bei $col vornehmen (also nur die ersten beiden Ersetzungen des Vorschlags)

[rudolfkoenig]

Edit: Man könnte die Ersetzung für Stroke nur bei $col vornehmen (also nur die ersten beiden Ersetzungen des Vorschlags)

Kann bitte jemand testen, ob das Nebeneffekte hat?
P.S: Achtung, Edits kriege ich nicht immer mit, wenn es wichtig ist, lieber einen neuen Beitrag schreiben.

Ich sehe zwei weitere Alternativen:
- in allen CSS Styles svg:fill: setzen
- alle "kaputten" SVGs anpassen.
Da das nicht meine "Herzensangelegenheit" ist, haette ich gerne ein fertige Loesung, was ich nur einbauen muss.

[Damian]

Es ist wohl nicht so einfach.

Das Hinzufügen von (äquivalent zu fill):

Code Auswählen Erweitern

  style += "svg:not([stroke]):not(.jssvg) { stroke:#"+col("link")+"; }\n";

in f18.js

führt dazu, dass überall stroke gezeichnet werde (auch bei SVG-Texten), was nicht gewollt ist, damit kann man wohl kein default für stroke setzen.

durch

Code Auswählen Erweitern

$data =~ s/stroke="#000000"//g;

in FHEMWEB

werden schwarze strokes ja nicht gezeichnet, was ebenfalls nicht gewollt ist.

lediglich:

Code Auswählen Erweitern

$data =~ s/stroke="#000000"/stroke="$col"/g

funktioniert zumindest überall, wo Icons gefärbt werden sollen, aber nur dort.

Bei den door-Icons steht:

Code Auswählen Erweitern

<path fill="none" stroke="#000000" ...

was nicht konsequent ist. Lamellen übernehmen die Standardfarbe, der Rahmen bleibt aber immer schwarz und lässt sich nicht einfärben, was bei dunklen Styles ungünstig ist - vermutlich war dem Autor die Problematik nicht bewusst.

Ein Patentrezept habe ich also nicht gefunden.

Was bei nicht eingefärbten Icons funktionieren würde, wäre statt

Code Auswählen Erweitern

$data =~ s/stroke="#000000"//g;

zu setzen:

Code Auswählen Erweitern

$data =~ s/stroke="#000000"/stroke="$defaultColor"/g

dazu müsste $defaultColor allerdings in FHEMWEB bekannt sein, was offenbar aber nicht der Fall ist.

[rudolfkoenig]

Hast Du eine Empfehlung fuer mich?

[Damian]

Hast Du eine Empfehlung fuer mich?

Tja, offenbar sind die Defaultfarben auf der JS-Seite, das Patchen der Icons aber auf der Perlseite. Um es sauber hinzubekommen, müsste man auf die aktuelle Defaultfarbe für Schrift/Icons in Perl zugreifen können. Wahrscheinlich müsste man dafür was auf beiden Seiten programmieren, so tief stecke ich aber auf JS-Seite (noch) nicht drin.

Wie schon vorgeschlagen würde man, ohne viel kaputt zu machen, mit

        $data =~ s/stroke="#000000"/stroke="$col"/g;
        $data =~ s/stroke:#000000/stroke:$col/g;

wie bei fill auch stroke einfärben - es wäre nur konsequent alle Elemente eines Icons einfärben zu können, wenn man die Farbe angibt.

Ich denke das Problem ist bisher nicht aufgefallen, weil die Leute Tools benutzen, die automatisch svgs mit path generieren, wo das Problem nicht auftritt.

[rudolfkoenig]

Hab dein Vorschlag getestet (kein Problem entdeckt), und eingecheckt.

[frank]

wie bei fill auch stroke einfärben - es wäre nur konsequent alle Elemente eines Icons einfärben zu können, wenn man die Farbe angibt.

ergibt das denn nun, dass stroke immer die fill farbe bekommt?

also ein gelb eigefärbtes icon auf gelbem background, das vorher mit schwarzem stroke daher kam, ist nun nicht mehr zu erkennen, oder?

[Damian]

ergibt das denn nun, dass stroke immer die fill farbe bekommt?

also ein gelb eigefärbtes icon auf gelbem background, das vorher mit schwarzem stroke daher kam, ist nun nicht mehr zu erkennen, oder?

Nein, nur wenn du es selber so einfärbst.

Abgesehen davon, wer mit schwarz etwas bisher definiert hat, der sollte davon ausgehen, dass es gefärbt wird, so war immer die FHEM Vorgabe.

[rudolfkoenig]

also ein gelb eigefärbtes icon auf gelbem background, das vorher mit schwarzem stroke daher kam, ist nun nicht mehr zu erkennen, oder?

Es geht hier um des explizite Faerben mit dem @yellow Suffix vom Benutzer, und nicht um das Faerben via Style/CSS.
Es macht in meinen Augen wenig Sinn, auf gelben background ein Icon gelb faerben zu wollen.
Auf der anderen Seite werden auf dunklen Hintergrund diese Striche jetzt damit sichtbar.
Eigentlich muessten die von mir bemaengelten Icons repariert werden.

[Damian]

Es geht hier um des explizite Faerben mit dem @yellow Suffix vom Benutzer, und nicht um das Faerben via Style/CSS.
Es macht in meinen Augen wenig Sinn, auf gelben background ein Icon gelb faerben zu wollen.
Auf der anderen Seite werden auf dunklen Hintergrund diese Striche jetzt damit sichtbar.
Eigentlich muessten die von mir bemaengelten Icons repariert werden.

Eigentlich dürfte es keine Icons geben, die irgendetwas schwarzes haben, wenn schwarz nicht die Default-Farbe ist. Dass es z. Zt. so ist, ist eher ein Bug als ein Features. Und man kann sie nur "reparieren", wenn man sie ggf. in ein ungünstiges Format wandelt (da wird z. B. ein Kreis mit path aufwändig nachgebildet), das kostet nicht nur Platz, sondern auch Performance.

[justme1968]

angenommen ich möchte z.b. ein warnschild das ich einfärben kann (farbiger kreis). damit ich es auf jedem hintergrund erkennen kann bekommt es einen schwarzen rand oder anderen schwarzen details. das geht mit dem aktuellen patch nicht mehr.

für neue icons löst kann man das lösen in dem man dunkelgrau 010101 verwendet. den unterschied sieht man sicher nicht.

aber für alte icons hat sich das verhalten geändert. ob das ein problem ist und ob es bereits icons gibt die jetzt anders aussehen weiss ich nicht,

[rudolfkoenig]

angenommen ich möchte z.b. ein warnschild das ich einfärben kann (farbiger kreis). damit ich es auf jedem hintergrund erkennen kann bekommt es einen schwarzen rand oder anderen schwarzen details. das geht mit dem aktuellen patch nicht mehr.

Falsch.
Erstens ist dein Warnschild (mit stroke!) auf schwarzen Hintergrund auch jetzt nicht sichtbar, zweitens betrifft diese Aenderung _NUR_ Faelle, wo du als Benutzer warnschild@gruen schreibst. Wenn Du das mit deinem gruenen Hintergrund machst, dann bist du mAn selbst Schuld, dann ist 99.5% aller FHEM-Icons jetzt auch unsichtbar, da sie kein stroke verwenden (nur fill).

[frank]

angenommen ich möchte z.b. ein warnschild das ich einfärben kann (farbiger kreis). damit ich es auf jedem hintergrund erkennen kann bekommt es einen schwarzen rand oder anderen schwarzen details. das geht mit dem aktuellen patch nicht mehr.

genau das meinte ich.

seit der umstellung von png auf svg ist die erkennbarkeit der icons stark abhängig von der farbe des hintergrunds geworden.

wenn nun die füllfarbe eine bestimmte information darstellen soll, und dadurch festgelegt ist, ist das in manchen styles "unmöglich".
bsp1) mülltonne: gelber sack => icon@yellow => im default style schlecht möglich.
bsp2) ampelfarben zur visualisierung einer funktionskontrolle: grün/ok, gelb/warnung, rot/alarm.
bsp3) lampenicon, dass mit der gewählten RGB farbe eingefärbt wird.

Eigentlich dürfte es keine Icons geben, die irgendetwas schwarzes haben

dann hat das svg konzept ein problem.
es gibt ja wenig infos zum svg "konzept". bisher hatte ich verstanden, dass nur die teile gefärbt werden, die eine bestimmte grundfarbe haben.
daher hatte ich schon überlegt entsprechende icons mit farbigem rand zu erstellen


vorschlag:
wie wäre es, anstatt den stroke grundsätzlich mit der füllfarbe zu färben, ihm auch eine eigene farbe zuweisen zu können.
icon@farbe             => füllung und rand bekommen die selbe farbe.
icon@farbe1:farbe2 => füllung bekommt farbe1 und rand bekommt farbe2.