Icons in smartVISU

Das CSS-Styling von SVG-Icons, die mit <img>-Tags eingebunden werden, ist mit jQuery nicht machbar. Anders verhält es sich jedoch mit SVG-Icons, die direkt in die html-Struktur eingebettet sind.

smartVISU durchsucht deshalb beim Aufrufen einer neuen Seite mittels der Funktion "fx-init" sämtliche <img>-Tags, in denen ein SVG-Icon im "src"-Attribut steht und die eine der folgenden Klassen zugewiesen haben:

icon1
do-fx
icon, wenn diese in einem Link mit Klasse icon1 vorkommt.

Der Selektor lautet: $('img.icon1[src$=".svg"], img.do-fx[src$=".svg"], a.icon1 > img.icon[src$=".svg"]')

Diese <img>-Tags werden jeweils durch den zugehörigen SVG-Inhalt ersetzt, wobei die "stroke" und "fill" Attribute gelöscht werden und dem SVG eine Klasse mitgegeben wird, die aus dem <img>-Tag genommen wird und mit dem Präfix "fx-" versehen wird. <img class="icon icon1"> wird somit zu <svg class="fx-icon icon1">.

Vorteile:

jQuery kann nun die "class"-Attribute innerhalb der SVG ansteuern und Eigenschaften dynamisch ändern.

Nachteile:

zeitaufwendig
da die Umwandlung dynamisch gemacht wird, kann der smartVISU-Cache dies nicht speichern
SVGs sind nicht interaktiv, d.h. z.B. beim Anklicken wird kein Event generiert. Das muss über das übergeordnete Element gemacht werden.

Ab Version v3.3 wird das Einbetten der icons umgestellt. Die Icon-Definitionen werden durch die Twig Template Engine eingelesen und beim Rendern der Seite in den html-Code eingefügt. Das ist deutlich schneller und profitiert - weil das svg-icon schon zum statischen Teil der Seite gehört - zusätzlich vom smartVISU Cache. Für eigene Widgets können das Widget lib.svgimg fürs statische Einbinden von svgs sowie die JavaScript-Funktion fx.load für das dynamische Laden verwendet werden. Bei sehr speziellen eigenen icons (z.B. mit Graustufen) kann es sinnvoll sein, das Einbetten als svg zu verhindern. Innerhalb der smartVISU-Widgets gibt man dazu das Icon mit vollem Pfad und dem Zusatz "/ne" an. Die Verwendung von <img>_Tags ist weiterhin möglich und folgt den oben beschriebenen Regeln.

basic.stateswitch und basic.symbol legen für jeden Zustand aus der Werteliste ein eigenes Icon an. Deren Icons werden also nicht dynamisch eingefärbt, sondern dies geschieht statisch (deshalb nur für die Klasse "icon1") und es werden lediglich die nicht benötigten Icons / Buttons dynamisch ausgeblendet. Dies ist sinnvoll, da gleichzeitig für jeden Zustand auch ein individuelles Icon festgelegt werden kann und damit ein dynamisches Styling sowieso nicht möglich ist. Nur der Indikator (icon0, icon1 oder blink) wird bei basic.stateswitch dynamisch durch das Hinzufügen von Klassen realisiert.

Ab Version v3.3 können 6 Klassen icon0 bis icon5 für das Styling verwendet werden.