[live] SVG-Icons

Die Icons haben eine Größe von 16x16 Pixeln, die in den Titelleisten von Info-Fenster 12x12 in einem 16x16-Rahmen . Wenn man sie im Browser skaliert, werden die Icons halt "gröber", wie man beispielsweise hier bei Firefox sieht:

Mir genügt das völlig. Viel besser sähe das natürlich aus, wenn man sie als SVG-Grafiken hätte. Wenn sich da also ein begnadeter Grafiker unter uns austoben möchte…

Quote from SHofmann

Viel besser sähe das natürlich aus, wenn man sie als SVG-Grafiken hätte. Wenn sich da also ein begnadeter Grafiker unter uns austoben möchte…

Alle Themes nutzen per styles.css einen identischen Satz von CSS-Styles, über die auch die Icons geladen werden. Das ist bewusst so gelöst, damit man bei GUI-Änderungen nur noch diese eine Datei pflegen und nicht – wie früher – etliche davon synchron halten muss.

Folglich wird ein einheitliches Grafikformat benötigt. Ich hatte eher daran gedacht, die aktuellen PNG-Icons als "echte" SVG-Grafiken nachzubilden, damit sie sich nahtlos skalieren lassen. Im einfachsten Fall könnten wir sie natürlich auch im SVG-Format als eingebettete Bitmaps speichern, wie etwa hier für das VDR-Logo demonstriert:

• The content cannot be displayed because you do not have authorisation to view this content.

Zwar steigt dadurch die zu übertragenden Datenmenge zum Seitenaufbau leicht an und sie verpixeln beim Skalieren noch immer. Doch könnten die Icons für alle Themes global auf das SVG-Format umgestellt werden, ohne dass anfangs (allzu viel) Aufwand entsteht. Über die Zeit ließen sich die alten Icons entweder nachmodellieren oder durch andere SVG-Grafiken ersetzen. Und wer möchte, könnte dann in "seinem" Theme beliebige Icons im SVG-Format verwenden.

Quote from rüsseltier

Ich hatte vor einiger Zeit mal SVG-Icons in einem leicht modernisierten Stil erstellt, die Resonanz war aber eher bescheiden.

Diese gefallen mir überhaupt nicht, denn mit den vielen eingebetteten "Elementen" zerfleddern sie das Erscheinungsbild. Wenn man in einem Icon einen Text wie "REC" oder "M3U" drin hat bzw. haben muss, hat es seinen Zweck nach meinem Dafürhalten eigentlich schon verfehlt.

Quote from Dumpfbacke

Die gefallen mir schonmal sehr gut, besser als die WinXP-artigen.

Was ist gegen die alten Icons einzuwenden? Sie sind klar und etabliert. Und nicht alles Moderne ist zwangsläufig besser. Wenn ich beispielsweise die Wahl zwischen diesen beiden Sätzen habe:

… dann verzichte ich gerne auf die ach-so-moderne schwarz-weiße Einheitssoße.

Quote from Dumpfbacke

In den Optionen jetzt noch die Größe festlegen, am besten noch, welche Icons angezeigt werden sollen (ich brauche z.B. keine IMDB), dann wäre das super komfortabel.

Während sich alle Themes einen gemeinsamen Satz von CSS-Styles teilen, legt für jedes Theme eine Datei themes.css die Icon-Dimensionen, Schriftarten und -größen, Abstände und Farben in Form von CSS-Properties fest. Dies alles lässt sich somit nicht per Setup ändern, wie sich auch keine Auswahl von Icons treffen lässt.

Wie von Markus vorgeschlagen, ist ein neues Theme der richtige Ansatz. Die CSS-Styles sind darauf vorbereitet und passen sich entsprechend an. Zum Experimentieren würde ich den Inspektor des Browsers verwenden und die CSS-Properties der Icon-Dimensionen mit den Cursortasten mal probehalber rauf und runter setzen, um ein Gefühl zu bekommen. In einem Theme kann man unerwünschte Icons zudem durch transparente Platzhalter ersetzen.

Wenn ihr allerdings damit anfangt, mit den Dimensionen zu experimentieren, werdet ihr ziemlich schnell feststellen, das die ganze Optik aus der Balance gerät. Dann müssten die Schriftgrößen und die Abstände aller Elemente ebenfalls justiert werden. Das ist, wie ich aus eigener Erfahrung weiß, ein Riesenaufwand.

Und jegliche Änderung nur in themes.css wohlgemerkt, denn die styles.css ist tabu! Wer für sein Theme einen Klon davon anlegt, darf diesen bei GUI-Änderungen dann auch selber pflegen. Siehst du das auch so, Markus?

Quote from Dumpfbacke

Ich hab mal alle deine svg runtergeladen, fehlen da noch welche für das aktuelle Live?

Die habe ich schon (im alten Stil) in Arbeit, zusammen mit einer verbesserten Bedienung zur Auswahl von Aufzeichnungen

Quote from MarkusE

Ich bin wegen der Icons offen. Ist halt Geschmackssache. Und ich möchte die nicht heute ändern und morgen wieder zurück. Also, wenn es eine klare Mehrheit für andere Icons gibt, ändere ich das. Wie gesagt, das ist aber dann eine Einbahnstraße.

Wer neue möchte, sollte meines Erachtens ein neues Theme dafür anlegen. Die nötigen Vorarbeiten hinsichtlich des Dateiformats können wir natürlich vornehmen.

Quote from SHofmann

Diese gefallen mir überhaupt nicht, denn mit den vielen eingebetteten "Elementen" zerfleddern sie das Erscheinungsbild. Wenn man in einem Icon einen Text wie "REC" oder "M3U" drin hat bzw. haben muss, hat es seinen Zweck nach meinem Dafürhalten eigentlich schon verfehlt.

Ich hatte das bewusst so gemacht, da der funktionale Unterschied zwischen so Dingen wie "gelbem Wiedergabesymbol" und "orangenem Wiedergabesymbol" nicht nur für Neulinge regelmäßig das Warten auf den Tooltip erfordert.
Oder das die Weltkugel zur IMDB führt und nicht etwa zur Website der Sendung o.ä.
Oder dass diese Olive mit zwei Antennen das Umschaltsymbol sein soll (wer unter 50 kennt noch Antennen auf einem TV-Gerät?)

Quote

Folglich wird ein einheitliches Grafikformat benötigt.

Ja, deswegen hatte es mir dann damals geschenkt, die alten Bitmaps einfach in SVGs einzubetten.
Ich hatte die Tage auch nochmal mit aktuellen Vektorisierungs-KIs versucht, die alten Bitmap-Symbole für SVG fit zu machen - kann man bei 16x16px als Ausgangslage vergessen.

Quote from Dumpfbacke

Mich stört z.B. von Anfang an, dass ein nicht programmierter Timer mit einem roten und ein programmierter mit einem grünen Button angezeigt wird.

Auf allen meinen Fernbedienungen ist die Taste fürs Aufnehmen eine mit einem rot gefüllten Kreis. Insofern entspricht das dem Gewohnten, wie ich finde.

Aber erstellt doch ein Theme mit einen alternativen, euch genehmen Satz von Icons. Ohne die oben skizzierten Vorarbeiten geht derzeit halt nur PNG.

Quote from rüsseltier

Oder dass diese Olive mit zwei Antennen das Umschaltsymbol sein soll (wer unter 50 kennt noch Antennen auf einem TV-Gerät?)

Das gilt auch für dieses Icon: ☎

Quote from rüsseltier

Oder dass diese Olive mit zwei Antennen das Umschaltsymbol sein soll (wer unter 50 kennt noch Antennen auf einem TV-Gerät?)

Anbei mal ein Versuch, dein Zap-Icon in das bestehende Schema einzufügen:

Mit ein bisschen gutem Willen kann man das "ZAP" gerade noch erkennen.

PS: Ich habe mal spaßeshalber die Icons um 50 Prozent (also von 16x16 auf 24x24) vergrößert:

Damit wären sie zwar besser lesbar bzw. ließen mehr Details zu. Aber mir scheinen sie die anderen Elemente ein wenig zu "erschlagen"…

Quote from SHofmann

Anbei mal ein Versuch, dein Zap-Icon in das bestehende Schema einzufügen:

The content cannot be displayed because you do not have authorisation to view this content.

bzw. im Konext

The content cannot be displayed because you do not have authorisation to view this content.

Mit ein bisschen gutem Willen kann man das "ZAP" gerade noch erkennen.

Äh, was?
Du skalierst das Icon auf 10x10px statt 16x16px und quetscht es dann noch in die alte lila Kugel?
Natürlich sieht das miserabel aus.
So sieht das in 16x16px aus:

Ich hatte damals alternativ auch mal mit einem Fernbedienungsicon experimentiert (bei 96dpi nicht mehr erkennbar) oder für die Retro-Vibes auch ein Flachbild-TV mit Antennen ausprobiert:

Quote from rüsseltier

Du skalierst das Icon auf 10x10px statt 16x16px und quetscht es dann noch in die alte lila Kugel?

Ich habe versucht, der Design-Sprache der Icons in den Themes zu folgen. Derzeit sind alle Action-Icons als runde Buttons mit Symbol ausgeführt, deshalb dieser Ansatz. Icons für Informationen sind überwiegend rechteckig.

Dein eckiges Icon wirkt für mich inmitten der anderen wie ein Stilbruch. Wie wäre es, wenn du uns mit einem eigenen Designvorschlag überzeugst und dein Lieblingstheme unter neuem Namen, etwa "marine-trendy", beisteuerst?

Quote from SHofmann

Ich habe versucht, der Design-Sprache der Icons in den Themes zu folgen. Derzeit sind alle Action-Icons als runde Buttons mit Symbol ausgeführt, deshalb dieser Ansatz. Icons für Informationen sind überwiegend rechteckig.

D.h. wenn man svg-Icons in der aktuellen Designsprache beisteuert, könnten sie übernommen werden?

Bin zwar kein "begnadeter Grafiker", aber hatte vor Kurzem mit Inkscape hantiert und könnte mir vorstellen, die vorhandenen Icons mal nachzumalen...

Leider kann man hier keine svg-Files hochladen.

Quote from heifisch

Bin zwar kein "begnadeter Grafiker", aber hatte vor Kurzem mit Inkscape hantiert und könnte mir vorstellen, die vorhandenen Icons mal nachzumalen...

Ich hatte oben ja schon angedeutet, dass man die Icons auch einheitlich auf SVG umstellen könnte. Markus würde das wohl auch unterstützen.

Mit "begnadeter Grafiker" hatte ich vor allem auf jemanden gehofft, der sich mit einem SVG-Editor wie Inkscape auskennt. Mit Farbverläufen, 3D-Effekten und dergleichen habe ich mich noch nicht intensiver befasst. Und es fehlt mir dafür auch ein wenig an der Zeit, weil wir hier ja immerhin über 67 Images (kein doppeltes Logo) sprechen. Schon die Überarbeitung des GUI hat ein halbes Jahr gedauert…

Zu beachten wäre noch, dass bei einigen Icons der Hintergrund und das Symbol getrennt sind, sodass man beim Hover einen anders gefärbten Hintergrund verwenden kann, ohne gleich das ganze Icon austauschen zu müssen. Das spart in styles.css etliche Regeln, weil man das Hover für den Hintergrund zentral an einer Stelle erledigen kann; deshalb also bitte beibehalten. Und auch bei der Transformation spart man vermutlich die eine oder andere Stunde.

Bei manchen Icons habe ich auf UTF-Symbole zurückgegriffen. Die GIMP3-Sourchen hierzu findest zu in img, mit Ausnahme des unter live/img (noch) falsch abgelegten restore.xcf. In den Sourcen sind bei den Layern mit den Symbolen auch ihre UTF-Codes vermerkt. Bei anderen Icons würde ich dir auch empfehlen, erst einmal zu schauen, was an UTF-Symbolen verwendet werden kann. Ob man sie im SVG nativ oder als Pfade speichern sollte, hängt davon ab, ob wird Plattformen ohne (vollständige bzw. veraltete) UTF-Zeichensätze noch unterstützen wollen bzw. sollen. Jedenfalls sollten die Icons bzw. ihre Symbole bei Abmessungen von 16x16 noch gut erfassbar sein.

Wenn du dir die Icons genau anschaust, haben sie alle einen Glanzpunkt oben links:

… während du diese Stelle abgedunkelt hat. Ansonsten:

Quote from heifisch

Leider kann man hier keine svg-Files hochladen.

Du musst sie dazu in ein Archiv (zip oder tar) verpacken, siehe hier.

Quote from SHofmann

Ich habe versucht, der Design-Sprache der Icons in den Themes zu folgen.

Diese Design-Sprache folgt den Vista Buttons von vor 20 Jahren - nur das die damals 32x32px hatten und man so mehr Fläche zur Darstellung hatte.
Ich hab an sich bis auf Aufnahme, Umschalten und die internen/externen Player-Symbole auch alle in dem runden Design belassen, nur eben ohne die bonbonpapierhaften Farbverläufe, die damals en vogue waren
[dass das SD-Symbol pixelig ist, scheint an einem montage-Bug in ImageMagick zu liegen]

Es kann sich gerne auch jemand meiner Icons annehmen und die monierten Aufnahme, Umschalten und int/ext. Player-Icons anpassen.
Das REC mit rotem Kreise kenne ich halt als weiterverbreite Taste von Recordern aller Art.
Und bei den zwei verschiedenen Play-Symbolen musste es letztlich irgendwas sprechendes sein - weil orange und gelb hilft einem ohne Tooltip ja sonst nicht weiter.

Quote from SHofmann

Zu beachten wäre noch, dass bei einigen Icons der Hintergrund und das Symbol getrennt sind, sodass man beim Hover einen anders gefärbten Hintergrund verwenden kann, ohne gleich das ganze Icon austauschen zu müssen. Das spart in styles.css etliche Regeln, weil man das Hover für den Hintergrund zentral an einer Stelle erledigen kann; deshalb also bitte beibehalten. Und auch bei der Transformation spart man vermutlich die eine oder andere Stunde.

In einem Web-Projekt habe ich vor kurzem svg-sprites eingesetz.
Da waren dann alle svg-Symbole in einer Datei und wurden so aufgerufen:

<svg class="icon_activities">
	<use xlink:href="img/icons/svg-sprites.svg#school"></use>
</svg>

Über css konnte die Farbe definiert werden.

.icon_activities {
  width: 55px;
  height: 55px;
  fill: #c00000 !important;
}

Das wird dann aber sicher mit mehrfarbigen Icons schlecht gehen.

Ich muss also auch versuchen diesen 3D Effekt wieder hinzubekommen damit das zu den aktuellen Theme passt?

Farbverlauf war jetzt nicht so schwierig. Aber mit dem Glanzpunkt, dass muss ich erst mal recherchieren.

Quote from rüsseltier

Es kann sich gerne auch jemand meiner Icons annehmen und die monierten Aufnahme, Umschalten und int/ext. Player-Icons anpassen.

Das schaue ich mir an. Vielleicht kann ich die an Windows Vista anpassen...

Quote from heifisch

Das wird dann aber sicher mit mehrfarbigen Icons schlecht gehen.

Die styles.css definiert nur die Icon-Images, keine Aspekte wie Farben. Das ist in themes.css geregelt. Man könnte das über CSS-Properties zwar durchreichen, aber das wird ein Riesenaufwand.

Zu Fill findest du mehr hier. Eventuell könnte man den 3D-Effekt dadurch lösen, dass man einen weißen Hintergrund definiert und die Transparenz den Glanzpunkt zur Farbe des Buttons festlegt.

Quote from heifisch

Farbverlauf war jetzt nicht so schwierig. Aber mit dem Glanzpunkt, dass muss ich erst mal recherchieren.

Dafür könnte man vielleicht einen kreisförmigen Verlauf nutzen, dessen Mittelpunkt auf dem Glanzpunkt sitzt und der die Transparenz über dem weißen Hintergrund festlegt.

Hier mal der Versuch eines Glanzpunktes:

• The content cannot be displayed because you do not have authorisation to view this content.

Um den radialen Gradienten zu ändern, musst man das Icon im Gradient Fill doppelklicken. Das Icon verfügt per Filter > Blur > Feather über einen transparenten Rahmen, den man per Filter > Filter Editor inspizieren und ändern kann. Vielleicht hilft das als Startpunkt für weitere Verbesserungen bzw. Feinarbeiten.

Ein Icon dieser Art ist eher für die Titelleisten und zum Auf/Zuklappen von Ordnern gedacht. Bei den Action-Icons links ist der Glanzpunkt vielleicht zu intensiv und es fehlt ein schöner Rahmen. Das Dumme ist nur, dass man für einen dezenteren Glanzpunkt anstatt weiß einen Farbton in der Icon-Farbe wählen muss, was beim Klonen entsprechend mehr Arbeit macht.

Ich hatte auch schon ein gutes Tutorial gefunden wie man den Farbverlauf steuern kann:

Inkscape Kugel

Ich mache dann mal paar Icons fertig und dann können wir schauen, ob das in die richtige Richtung geht.

Quote from Dumpfbacke

rüsseltier: Ich hatte ja schon geschrieben, dass ich deine Icons gut finde. Was mir etwas aus dem Design fällt, sind die leicht geschwungenen Checked-Haken und die Pfeile nach oben und unten.

Die Kanal-hoch/runter-Pfeile sind etwas, das man auch direkt in UTF lösen könnte (U+2227 und U+2228).
Ich glaube, die Symbole wurden damals auch für die Grafiken verwendet.