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.

[justme1968]

angenommen das icon schaut so aus:

Code Auswählen Erweitern

<?xml version="1.0" standalone="no"?>
<svg width="160" height="140" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect x="10" y="10" width="100" height="100" stroke="#000000" fill="#000000"/>
</svg>


mit @red ändere ich bisher nur das fill. d.h. ich bekomme ein rotes rechteck mit schwarzem rand. dieses ist auf rotem (als umriß) und auf schwarzem untergrund zu sehen. das verhalten würde ich nicht als fehler bezeichnen sondern beabsichtigt. genau so haben früher ja z.b. maus zeiger funktioniert.

mit der änderung bekomme ich ein rotes rechteck mit rotem rand. dieses ist auf rotem untergrund nicht mehr (d.h. auch nicht als umriß) zu sehen. d.h. das verhalten hat sich geändert.

da ganze wäre noch viel auffälliger wenn ich mit stroke noch etwas in schwarz auf die rote fläche gemalt habe.

ich hatte z.b. früher ein mülltonnen icon das einen schwarzen rand hat damit es wenn es grau (restmüll bei uns) eingefärbt wird auf den schwarzen und grauen fhemweb zeilen besser sichtbar ist.

[justme1968]

icon@farbe1:farbe2 => füllung bekommt farbe1 und rand bekommt farbe2.

die idee finde ich gut.

[rudolfkoenig]

Eigentlich(TM) sollte ein SVG weder fill noch stroke spezifizieren, das muesste im CSS jeweils gesetzt werden, auch einzelne Elemente muessten ueber CSS gefaerbt werden, und nicht ueber FHEMWEB. FHEMWEB muss nur dafuer sorgen, dass die Elemente die passenden Klassen bekommen. Aber bevor wir die Welt umbauen, schlage ich vor die Idee mit "@fill:stroke" zu implementieren, damit koennte man fill und stroke jeweils optional setzen.

@Damian: hast Du was dagegen?

[xenos1984]

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

So weit ich das sehe, wird nur #000000 ersetzt - wenn du also schwarz haben willst und stattdessen black schreibst statt numerischen Codes, bleibt es schwarz.

[Damian]

Eigentlich(TM) sollte ein SVG weder fill noch stroke spezifizieren, das muesste im CSS jeweils gesetzt werden, auch einzelne Elemente muessten ueber CSS gefaerbt werden, und nicht ueber FHEMWEB. FHEMWEB muss nur dafuer sorgen, dass die Elemente die passenden Klassen bekommen. Aber bevor wir die Welt umbauen, schlage ich vor die Idee mit "@fill:stroke" zu implementieren, damit koennte man fill und stroke jeweils optional setzen.

@Damian: hast Du was dagegen?

Ich habe nichts dagegen, hinterfrage aber den Sinn der zweiten Angaben.

Ich denke, die meisten "programmieren" nicht die Icons, sondern erstellen (malen) sie mit Programmen wie Inkscape. Was das Programm aus der Zeichnung macht, kann sehr unterschiedlich sein.

Das heißt, ob da ein stroke drinsteht oder fill, bestimmt eher die Software und nicht der User, daher ist die Option nur dann interessant, wenn man die SVG-Syntax intern kennt und sie bei der Erstellung des Icons auch beeinflussen kann - das dürfte für die meisten erstellen Icons nicht der Fall sein.

Abgesehen davon, stroke ist nicht immer nur der Rand von etwas, sondern kann z. B. ein nicht ganz gefüllter Kreis (Ring) sein, der irgendwo mitten im Bild liegt.

[justme1968]

gerade bei inkskape gibst du doch füll- und linienfarbe an. d.h. fill und stroke.

[Damian]

gerade bei inkskape gibst du doch füll- und linienfarbe an. d.h. fill und stroke.

Das finde ich gut, wenn sich da einer gut auskennt. Dann kannst du mal schauen, wie man den Ring von stroke in fill verwandelt, ohne unnötige Daten über path zu produzieren.

[rudolfkoenig]

Ich habe nichts dagegen[...]

Gut, dann habe ich es wie bestellt implementiert.

Btw. diese door_shutter_XXX.svg icons sind noch merkwuerdiger: da wird fill="none" stroke="#000000" gesetzt, mit dem Ergebnis, dass das explizite fill mit der @ Syntax nicht funktioniert (es wird nur #000000 ersetzt), aber CSS kann es umfaerben.

P.S.: Kinder, hoert auf zu streiten

[frank]

Gut, dann habe ich es wie bestellt implementiert

prima,
unerschöpfliche neue möglichkeiten.

[Damian]

P.S.: Kinder, hoert auf zu streiten

Wer streitet denn hier

Wenn du mich meinst. Ich wollte doch nur ernsthaft wissen, ob man das Icon aus Inkscape generiert mit fill statt mit stroke hinbekommt. Ich weiß nicht was ich da einstellen muss.

[habl]

kann es sein, dass die Funktion nicht mit devStateIcon kompatibel ist?
Ein:

Code Auswählen Erweitern

attr EV_WALLBOX devStateIcon Frei:ev_cssplug@green:green

führt den Befehl "green" aus, oder gibt es hier eine andere Schreibweise?

[rudolfkoenig]

kann es sein, dass die Funktion nicht mit devStateIcon kompatibel ist?

Ja: "devStateIcon: Space separated list of regexp:icon-name:cmd triples, icon-name and cmd may be empty."

Ich habe jetzt @ als alternativen Trenner zwischen fill- und stroke-Farbe hinzugefuegt.

[habl]

Ja: "devStateIcon: Space separated list of regexp:icon-name:cmd triples, icon-name and cmd may be empty."

Ich habe jetzt @ als alternativen Trenner zwischen fill- und stroke-Farbe hinzugefuegt.

Top, geht

vielen lieben Dank für schnelle einbinden!