Share
Dieser Artikel ist der zweite Teil einer dreiteiligen Serie, die die neuen Ansätze der Ikonografie zeigt, die Iconic liefern wird.
Intelligente Icons sind auf großes Interesse gestoßen, aber das Styling kann im Alltag das nützlichste sein. Icon-Sets decken ein breites Spektrum unterschiedlicher Themen ab, werden jedoch in einem einzigen visuellen Stil dargestellt. Das ist oft angebracht, wenn nicht optimal. Es gibt jedoch viele Situationen, in denen bestimmte Symbole einen bestimmten Stil haben können und sollen (Farbe, Strichstärke oder andere Attribute)..
Bei statischen Bildern war Styling nicht möglich (es sei denn, Sie geben Dateien für jede bestimmte Ästhetik aus). Icon-Fonts haben uns näher gebracht, indem sie das einfache Styling erlaubten, aber es war nicht granular, wenn Sie das Icon rot färbten ganze Das Symbol wäre rot. Mit SVG besteht die Freiheit, einzelne Elemente innerhalb eines Symbols zu gestalten, was völlig neue Möglichkeiten eröffnet.
Die Kombination von SVG und CSS ist magisch. Die Bildsprache kann ein völlig anderes Aussehen annehmen, maßgeschneiderte Behandlungen und interessante interaktive Übergänge bieten. SVG-Markup bietet Zugriff und Kontrolle auf alle darin enthaltenen Elemente. Dies bedeutet, dass ein Glühbirnen-Symbol mit CSS "beleuchtet" werden kann, das Kontrast-Symbol kann so gestaltet werden, dass es ein Symbol enthält Spezifisch Kontrast und ein Ampel-Symbol können miteinander kommunizieren gehen. In der Lage zu sein, auf elementarer Ebene zu stylen, haucht den Ikonen neues Leben ein - sie können wirklich sein einzigartig.
Der nächste logische Schritt beim Styling von Icons mit CSS besteht darin, satzweite Themen für eine konsistente Ästhetik zu erstellen. Ein Schwerpunkt unserer Arbeit für Iconic ist es, die Herausforderungen im Zusammenhang mit Icon-Themes aufzuzeigen und anzugehen. Normalerweise war es eine mühsame Aufgabe, eine Reihe von Icons zu gestalten (über das bloße Ändern der Farbe hinaus), was von den Quellvektordateien abhing. Haben sie nicht Nun, du hast kein Glück.
SVG-Symbole können dieses Problem lösen. Ich sage "kann", weil die konsistente Strukturierung einer gesamten SVG-Ikonensammlung schwierig ist. Die Symbole müssen im Hinblick auf das Thema entworfen und erstellt werden, damit die Stile über den Satz hinweg konsistent sind. Wenn es jedoch funktioniert, ist es ziemlich beeindruckend zu sehen.
Wir haben eine Demo zusammengestellt, um das Icon-Theming in Aktion zu zeigen. Es zeigt Ihnen, wie viel Sie tun können, wenn CSS-Regeln auf einen gesamten Symbolsatz angewendet werden.
Spielen Sie mit unserer Icon-Theme-Demo.
Das Icon-Styling kann viel weiter gehen als nur beliebige Farbänderungen. Dieser Ansatz gibt uns die Möglichkeit, eine weitere wertvolle Informationsebene bereitzustellen.
Denken Sie an alle Symbole, die Sie in einer Benutzeroberfläche sehen, die Kontextinformationen anzeigen. Denken Sie einfach an den Pinsel oder an die Füllsymbole in verschiedenen Anwendungen, die Ihnen mitteilen, welche Farbe Sie gerade zeichnen oder füllen möchten. SVG-Symbole, die entworfen wurden, um gestaltet zu werden, können genau das tun.
Das Kommunizieren des Zustands innerhalb eines Symbols ist oft so einfach wie das Verwenden von Farbe. Dies kann bereits mit Icon-Fonts erreicht werden, aber was wäre, wenn Sie über einen einfachen Farbwechsel hinausgehen wollten? Dies ist ein weiterer perfekter Anwendungsfall für SVG & CSS. Betrachten wir zum Beispiel das WIFI-Signalsymbol.
Hinweis: Das Beispiel unten ist immer noch ein Proof-of-Concept-Prototyp. Keiner der folgenden Codes ist endgültig, geschweige denn Beta. Wir befinden uns noch in der F & E-Phase dieses Ansatzes und wissen, dass es noch viele Probleme gibt, die noch angegangen werden müssen. Wir werden nach Abschluss der Kickstarter-Kampagne an einer konkreteren Richtung für diese Methode arbeiten.
Die Gestaltung von Icons ist recht einfach. Wenn Sie in der Vergangenheit CSS verwendet haben (was wir vermutlich voraussetzen), gibt es sehr wenig zu lernen. Das ist ein Teil dessen, was diese Methode so großartig macht - sie ist erstaunlich mächtig und nutzt die Fähigkeiten und Werkzeuge, die Sie bereits kennen. Das SVG-Styling verfügt über einzigartige CSS-Regeln, die Sie erlernen müssen. Die Konzepte sind jedoch unkompliziert und erfordern nur einen geringen Aufwand.
Die eigentliche Arbeit kommt vom Entwerfen und Konstruieren eines Symbols eigentlich sein stilfähig. Genau wie bei Smart Icons ist diese Methode darauf angewiesen, dass SVG direkt in das DOM eingefügt wird und für das Styling semantisch strukturiert ist. Dies geht weit über das Hinzufügen von Klassen zu jedem Element in Ihrem SVG-Symbol hinaus (was jedoch nicht schmerzt). Ein Symbol für das Styling zu formatieren ist immer noch eine Art Kunstform. Wir sind uns ziemlich sicher, dass dazu eine Wissenschaft gehört, und wir hoffen, in Zukunft mehr über den Prozess zu schreiben. Unser Ziel mit Iconic ist es, diesen Prozess klarer und wiederholbarer zu machen, damit andere Icon-Designer ihre Icons stilsicher gestalten können.
Nehmen wir als Beispiel das Styling des WIFI-Signals an, um die verschiedenen Zustände anzuzeigen. Sie werden schnell sehen, wie erreichbar es ist.
Zeigen Sie den Code in Aktion an
HTML
JS
Accentsconagua
$ ('. svg-inject'). svgInject (); CSS
/ * Starkes Signal * / .icon-Signal.iconic-Signal stark .iconic-Signal-Basis fill: # 569e26; .icon-Signal.icon-Signal-starke .icon-Signal-Welle * Strich: # 569e26; / * Mediumsignal * / .iconic-signal.iconic-signal-medium .iconic-signal-base fill: # efc411; .iconic signal.iconic signal medium .iconic signal wave * Stroke: # efc411; .icon-Signal.icon-Signal-Medium .icon-Signal-Wellen-Äußere Opazität: .3; Strichbreite: 0,5; / * Schwaches Signal * / .icon-Signal.iconic-Signal schwach .iconic-Signal-Basis fill: # b52808; .iconic-signal.iconic-signal-schwach .iconic-signal-wave * stroke: # b52808; .ikonisches Signal.ikonisches Signal schwach .ikonisches Signalwelle außen, ikonisches Signal.ikonisches Signal schwach .ikonisches Signalwelle mittel Opazität: .3; Strichbreite: 0,5; / * Kein Signal * / .iconic-signal.iconic-signal-none .iconic-signal-base fill: # 848484; .iconic-signal.iconic-signal-none .iconic-signal-wave * Strich: # 848484; Deckkraft: .3; Strichbreite: 0,5;
SVG: signal.svg
Nicht so schlimm, richtig? Sobald ein SVG-Symbol richtig für das Styling eingerichtet ist, geht der Rest bergab!
Wie Sie sehen können, können Sie es tun viel mit SVG und CSS, es gibt jedoch noch einige Einschränkungen. Eines der Hauptprobleme, mit denen wir konfrontiert sind, ist die Ausrichtung von Anschlägen. Alle Striche in SVG 1.1 sind zentriert, das heißt, der Strich wird gleichmäßig auf jeder Seite des Pfads aufgeteilt. Wir glauben nicht, dass dies für das Icon-Design aus verschiedenen Gründen optimal ist, einschließlich möglicher Beschneidungen bei erhöhten Strichstärken und eines komplexeren Zeichenprozesses, um zentriert ausgerichtete Striche aufzunehmen.
Glücklicherweise ist dies in SVG 2.0 behoben. Die Striche können jetzt mittig, innen und außen ausgerichtet werden. Unglücklicherweise, Es scheint, dass SVG 2.0 noch ein weiter Weg ist. Wir hoffen, dass Iconic dazu beitragen wird, mehr Interesse an SVG zu wecken und mehr zu fördern beschleunigt verarbeiten.
Das Icon-Styling wurde in Iconic ein wenig übersehen, aber wir glauben, dass es eine enorm mächtige Technik ist. Wir sind fest davon überzeugt, dass dies einen großen Einfluss auf die Art und Weise haben wird, in der Menschen in Zukunft Symbole verwenden und sehen. Das Tolle an dieser Technik ist, dass die Technologie bereits weitgehend unterstützt wird. Alles, was Sie brauchen, sind Icons, die davon profitieren können.
Das Ziel von Iconic ist es, neue Ansätze für die Ikonografie zu schaffen. Wir haben noch viel zu teilen und freuen uns auf die nächste Rate.
Bitte erwägen Sie, Iconic auf Kickstarter zu unterstützen
