SVG-Icons - viel und mit Stil


    Eine kleine Geschichte darüber, wie unser Team beschlossen hat, Ikonen im kommenden Projekt zu organisieren. Ein kleiner historischer Ausflug, ein Blick (auf PNG- und Vektorschriften) und eine Geschichte darüber, wie wir uns am Ende alle niedergelassen haben.

    Wir verwenden Symbole, und zwar aktiv - ein ausgewähltes Symbol ersetzt Wörter und Sätze (und ein Symbol mit Feigen kann als QuickInfo verwendet werden, aber lassen Sie uns nicht über traurige Dinge sprechen).

    Im Allgemeinen gibt es Symbole (und sie werden weiterhin erstellt). Sie müssen sie auf eine Webseite stellen. Wir müssen dies tun, damit der Kopf für den Rest des Projekts und für ein paar Jahre in der Unterstützung nicht weh tut. Naja, es gibt noch weitere Wunschzettel:
    • Ich möchte einen Vektor. Okay, Vektor ist ein Mittel, kein Zweck. Das Ziel ist es, sich keine Gedanken über Größenänderungen und Retina-Displays zu machen und Bilder in verschiedenen Formaten für verschiedene Zwecke zu speichern.
    • Ich möchte die Icons stilisieren. Weil wir mindestens zwei Themensätze (hell und dunkel) oder sogar einen Kontrast für Menschen mit minderwertigem Sehvermögen haben, oder sogar einen orangefarbenen, der dem neuen Jahr näher kommt ... Im Allgemeinen dasselbe Das Symbol sollte je nach dem auf der Seite ausgewählten Thema etwas anders aussehen.
    • Ich möchte eine dynamische Stilisierung der Icons. Statik reicht uns nicht. Dies ist ausreichend für Screenshots und Broschüren, nicht jedoch für Live-Benutzer. Und wir wollten das Leben! Wir wollten einen Schwebeflug! Wir wollten Auswahl !!! Und deaktivieren, deaktivieren Sie alle! .. Sorry.
    • Ich möchte nicht, dass JavaScript in irgendeiner Form oder Manifestation daran teilnimmt. Symbole sind das Erscheinungsbild von HTML + CSS. Okay, ich bin bereit, die ausgewählte Klasse an die Elemente zu hängen, aber dies ist die letzte Grenze ...

    Es gibt Faktoren, die die Aufgabe erleichtern. Icons, die jetzt (2015, Herbst, Schneebeginn) in Mode sind, sind flach und streng. Waren die Icons vor fünf Jahren voller Farben, so ist sie jetzt unter dem Einfluss von MS, Apple, Design Material ... entstanden

    . Achtung. Die nächsten Abschnitte befassen sich mit der Verbreitung von Ideen auf dem Baum und in der Breite mit einer Übersicht über Lösungen (einschließlich erfolgloser) und einer Katze aus verschiedenen Blickwinkeln.
    Wenn Sie technische Details zu den Ergebnissen haben möchten, klicken Sie hier .

    Welche klassischen Lösungen nicht befriedigten


    • Wir können eine Reihe von Png-Icons erstellen und diese in die Image-Tags einfügen. Und bei JS-Ereignissen mit der Maus darüber fahren. Als ich die Seite in meinem dritten Jahr erstellte, funktionierte diese Methode wirklich. Es war gut und es war nicht nötig, sich um die vielen Verbindungen zum Server zu kümmern. Vielleicht, wenn sich der Kreis schließt und HTTP 2.0 gewinnt ... in der Zwischenzeit ist es übertrieben. Lass uns weiter gehen.
    • PNG-Sprites + CSS / Hintergrundbild - gut, aber nicht genug. Unsere Kollegen von DevExtreme haben einige Zeit so gelebt ... aber sie sind auf die Notwendigkeit gestoßen, zumindest ein wenig zu stylen . Schließlich können Sie mit dem PNG-Symbol den Client nicht einmal rot anmalen ! Sie wechselten zu Font Icons, und wir? ..
    • Die Verwendung von Schriftarten-Symbolen zum Schreiben einer Anwendung (nicht einer großen Bibliothek, dh einer Anwendung) erwies sich als etwas unpraktisch. Das Ändern von Symbolen erfordert einige Wartungsarbeiten (Sammeln von Symbolen, Speichern in einer Schriftartdatei, alle Arten von Hinweisen ...). Wenn das Internet bereits über alle Symbole verfügt, die Sie als Teil von Font Awesome benötigen, sollten Sie keine bessere Option suchen. Aber wenn Sie Ihre eigenen Symbole benötigen ... sind wir noch weiter gegangen.
    • Unicode-Zeichen für Symbole. Er scherzte, er lachte.
      Obwohl ...
      obwohl ich nicht anders kann als anzumerken, dass ich Pts liebe, um sie in der Entwicklung zu verwenden, bevor sie entworfen und veröffentlicht werden. Schnell, einfach, Strg + C, Strg + V, Schriftgröße, Farbe,: Hover, .Ausgewählt {Farbe:} - und hier haben Sie ein wunderschönes Symbol mit Hover und Auswahl kostenlos, ohne SMS ...

    • SVG + CSS / Hintergrundbild - wir haben normale Skalierung. Wir haben nicht die Stilisierung der Ikone selbst. Nein, wir können das abrunden - der Schwebezustand wird im Grunde genommen durch Ändern der Hintergrundfarbe und der deaktivierte Zustand wird in gewissem Maße durch Ändern der Deckkraft hergestellt. Dies ist eine funktionierende Version. Dies war unsere erste Version, die in das Repository hochgeladen wurde. Aber wir können die Zeichnung selbst nicht stilisieren. Weil er nicht im DOM ist. Und wenn im Haus etwas
      fehlt , ist es eine Katastrophe ... Für das, was nicht Teil des Dokuments ist, wenden Sie keine CSS-Stile an, Sie tönen nicht, Sie ändern es nicht.


    Und lassen Sie uns SVG in das HAUS setzen?


    Natürlich können wir das tun. Kopieren Sie die einzelnen Symbole, fügen Sie sie ein und fügen Sie sie an der gewünschten Stelle in jedes HTML-Markup ein.

    Katzencode


    Die Katze selbst liegt hier .
    Das heißt, es wird vorgeschlagen, dies alles in das Dokument aufzunehmen.

    Und wenn es sich ändert, fügen Sie es erneut an allen Verwendungsorten ein.
    Oder tun Sie so, als ob Sie für unser Projekt eine hochspezialisierte Lösung schreiben würden, die während der Montage, während der Bereitstellung oder während der Ausführung anhand magischer Attribute erkennt, dass ein Symbol vorhanden sein sollte, und den Inhalt eines Symbols injiziert (injiziert, ich weiß nicht, wie er übersetzt wird) Datei innerhalb des Inhalts einer anderen Datei.
    Es klingt sehr lustig und nervig in der Unterstützung.

    Leider oder zum Glück passt dieser Weg in DevExpress per Definition nicht zu uns. Wir schreiben keine (fast) endgültigen Softwarelösungen, wir schreiben, was andere Menschen bei ihren Entscheidungen verwenden werden.
    Wir stellten uns die Gesichter dieser Leute vor, denen wir unsere SVGs mit Stiften auf die Seiten injizieren wollten, und gingen abrupt zur nächsten möglichen Lösung über ...

    Und wenn Sie es in das DOM stellen, aber ein bisschen oder besser automatisch?


    Nun, das heißt, eine Art Speicher mit unserem Dokument zu verbinden, ein Analogon eines Sprites mit Symbolen, in dem alle Symbole liegen würden.

    Und wo sie gebraucht werden, sagen wir - und geben uns, lieber Browser, das Kotik-Icon!

    Ja, du kannst es tun, und die Leute tun es. Wir sammeln alle unsere Icons Datei für Datei und legen sie alle in einem großen SVG-Sprite ab, das nur Icon-Vorlagen enthält. Technisch wird hierfür das Symbolelement verwendet .
    Pro-Symbol
    Dieses Element ist als Vorlage konzipiert. Sehr autark, was die Funktionen angeht - fast wie eine kleine SVG-Datei. Hier können Sie Ihre bedingten "Größen" - viewBox definieren, auf die die Koordinaten der Elemente angewendet werden. Das heißt, das Problem des Vergleichs unserer Größen mit den Abmessungen des Symbols wird vollständig verschwinden, was ein Plus ist. Ein bisschen Detail . Jetzt sofort mit Bulldozern mit Schluck- / Grunzfunktion unterstützt .

    Symbolische Katze
    Das Ergebnis des Verpackens einer Katze in ein Symbol mit dem Plugin gulp-svgstore . Eigentlich hat sich fast nichts geändert.


    Dieser Artikel wird nicht überall angezeigt - von Entwurf. Es ist nur eine Maske für zukünftige echte Ikonen.
    Wir können diese Vorlage nehmen und auf die Seite setzen, indem wir vom use- Element darauf verweisen .

    Das war's, Katze hier.

    Weißschwanz, häufig.

    Und wir können es interessanter machen. Vorlage - er ist schon zu Hause. Ich meine im DOM. Und es kann schon ganz wie ein echter gestylt werden. Mit den Namen von SVG-Elemente ( path, circle, rectetc.), können wir ihnen die CSS-Regel anwenden und ändern Sie die Attribute (Farbe durch fillund stroke, Dicke und Linienstil)
    .tail { color: orange; }
    

    Und jetzt werden alle Katzen, die auf diese Vorlage verweisen, zu orangen Schwänzen. Unsere letzte Methode hat uns bereits zwei der drei Punkte unserer Wunschliste gegeben. Als ich jedoch versuchte, eine bestimmte Ikone zu stabilisieren, war ich zunächst enttäuscht.






    Wundergeschichten über Nutzung, xlink: href und Bäume zusammen


    Sobald wir versuchen, eine aufgenommene Katze in der Stirn anzupassen, funktioniert alles nicht mehr.

    #barsik .tail {
        fill: orangered;
    }
    

    Leider ist Barsiks Schwanz nicht Ingwer.
    Der Grund dafür ist interessant. Barsika ist eigentlich nicht da.
    Barsik ist im Schatten.

    HAUS DER SCHATTEN


    Shadow DOM - das Ding ist nicht mehr neu. Die Hersteller von Browsern haben damit begonnen, input type = datebox auszublenden, aber wir wussten nichts davon. Zu diesem Zeitpunkt waren sie sich noch nicht bewusst, dass sie das Shadow DOM verwenden, er bekam den Namen und die Form etwas später ...

    Das use-Element verwendet - in modernen Begriffen - genau das, was das Shadow DOM ist.

    Die Elemente, die wir * klonen * innerhalb * der Wurzel * verwenden, werden in unserem DOM abgelegt ... aber nicht vollständig.
    Insbesondere können CSS-Regeln nicht auf sie angewendet werden.

    Aber die Wurzel des Schattenbaums , das Element - es ist einerseits in unserem Hauptbaum und andererseits - ist der Vorfahr von allem, was im Baum liegt.
    Von der ersten Seite werden wir CSS-Stil darauf anwenden.
    Andererseits wird er die ihm gegebenen CSS-Eigenschaften an seine Nachkommen weiterleiten. Wenn wir der Vorlage sagen, dass sie sie anhören soll.
    //явно указываем на уровне шаблона, что хвост должен унаследовать цвет заливки от своего предка
    .tail {
        fill: inherit;
    }
    //стилизуем предка
    #barsik use {
        fill: orangered;
    }
    

    So bekommt Barsik eine orange Farbe und Vaska wird rauchig weiß. (Es sei denn, die Teile und Elemente seines katzenartigen SVG-Körpers sind anders angegeben. Die Priorität der geerbten CSS-Eigenschaften ist unter den Attributen und mit Sicherheit unter den anderen Regeln, die auf die Vorlage angewendet werden, ziemlich niedrig. Die Vorlage befindet sich ohne Einschränkungen vollständig im DOM. Details unten ) Und dann können wir schon irgendwelche Variationen verwenden.



    .cat-house:hover #barsik use {
         fill: red;
    }
    

    Somit können wir bereits eine Farbe völlig frei und in voller Übereinstimmung mit dem Buchstaben CSS anpassen. Das Hervorheben von Schwebeflächen ist einfach .




    Anwenden von Stilen, Eigenschaften und Attributen


    In diesem Moment wird es aus Gewohnheit unbegreiflich, und ich werde versuchen, noch einmal zu malen.
    Für mich war das ein kleiner Stolperstein.
    Erster Ansatz, kein CSS

    Ein SVG-Element kann ein Attribut haben, das seine Farbe angibt. Bei den meisten Formen (Pfad, Kreis, Auslassungspunkte) handelt es sich um gefüllte, weniger häufig verwendete Striche (um die Farbe der Ränder der Form anzugeben).

    Wenn ein Element dieses Attribut nicht besitzt, versucht es, es von seinen Vorfahren abzurufen. Es geht seine Eltern hoch, bis es jemanden mit dem angegebenen Attribut findet.

    Zwei Kreise, füllen ist nicht angegeben, vom Elternteil nehmen. Sehr erfolgreich - der erste Elternteil, die Gruppe, in der sie liegen, hat eine Fülle. Beide Kreise werden blau.
    Der zweite Ansatz. Das Aussehen des Stylings

    Sobald wir Stile anwenden, gewinnen sie. Die Regel
    circle  {
        fill: orange;
    }
    

    Schaltet beide Kreise orange. Es ist nur stärker ...

    Der dritte Ansatz. Durch die Stilisierung werden Attribute gelöscht, sodass Elemente Attribute verwenden



    Dieser Code gibt uns eine lila Ellipse.
    Hinzufügen einer CSS-Regel
    ellipse {
        fill: inherit;
    }
    

    Es wird ihn seine eigene Farbe vergessen lassen und von seinen Vorfahren nehmen.
    So sieht das ganze Beispiel aus. Alle Übereinstimmungen sind zufällig. Die Ellipse wird orange. Im Allgemeinen basieren die meisten Beispiele auf diesem Trick. Es mag noch Inline-Styles geben und! Wichtig, aber da läuft schon alles nach Analogie Naja und ein bisschen mehr Magie








    Stilisierung der zweiten Farbe


    Mit einem Hack-Trick, der auf der SVG-Variablen currentColor basiert , können wir bereits zwei Farben anpassen:
    .tail {
        fill: inherit;
    }
    .body {
        fill: currentColor;
    }
    svg use {
        fill: brown;
        color: orange;
    }
    svg:hover use {
        fill: orange;
        color: brown;
    } 
    


    Irgendwie so.

    Der unsichtbare Katzentrick


    Eine weitere Kleinigkeit, die sich im Prinzip manchmal als nützlich erweisen kann, ist das Ausblenden von Bildelementen unter bestimmten Bedingungen.

    Direkt konnte ich das nicht erreichen - die Option ist visibilityso, alles oder nichts ...
    Aber ich habe es geschafft, das Element mit den gleichen Farben in einer transparenten Farbe zu malen. Sehr schön, das Wichtigste ist, den richtigen Farbton zu wählen.



    Technisches Zeug


    SVG-Sprite muss sich im DOMe befinden. Die meisten Browser können Vorlagen aus einer verknüpften Datei anzeigen, jedoch nicht aus dem Internet Explorer. Deshalb pumpen wir durch AJAX und setzen es in das HAUS ein. Es gibt einen Artikel .

    Template-Engines können komisch funktionieren. Das xlink: href-Attribut lebt in seinem Namespace (im xlink-Namespace heißt es das auch), und nicht jeder mag es. Zum Beispiel kann Knockout es nicht sofort binden. Es gibt eine Problemumgehung . Es funktioniert .

    Ich kann davon ausgehen, dass ähnliche Probleme auch bei anderen Template-Engines auftreten können. Ich kann davon ausgehen, dass sie auf ähnliche Weise gelöst werden können.

    Was ist am Ende passiert?


    • Unsere Icons werden in separaten SVG-Dateien gespeichert, klein, beliebt in VCS, verständlich in Diffs und im Browser geöffnet
    • Unsere Icons zum Zeitpunkt des Builds befinden sich in einer großen Datei - icons.svg. Was eine Datei war, wird zu einer Vorlage.
    • Diese Datei muss in das HTML-Markup eingefügt werden. Hände, Build-Tool oder Javascript
    • Mit diesem Design kann auf Symbole verwiesen werden:

      Das Design ist aussagekräftiger und semantisch korrekter als beim Erstellen eines Symbols mit einem Hintergrundbild
    • Die Symbolvorlage befindet sich im DOM und kann über CSS geändert werden
      path.tail { fill: darkgrey; }
    • Ein bestimmtes Symbol wird auf der Grundlage der Vorlage erstellt, es fällt nicht in das DOM selbst, sondern in das Schatten-DOM und kann dank der Vererbung der CSS-Eigenschaften vom übergeordneten Ankerelement verwendet werden.
      #dvorovayBreed.selected use { fill: darkgreen; }
      
    • Das Symbol kann auf Dokumentebene beliebig gestaltet werden. Legen Sie Klassen für interne Elemente der SVG fest und färben / ändern Sie das gesamte Dokument, wie Sie möchten und wie es CSS zulässt
    • Für ein bestimmtes Symbol können Sie zwei Farben ändern - genau zwei. Einer ist zivilisiert, der zweite ist auf Magie zurückzuführen. Magie ist sehr mächtig und wirkt überall, aber Magie hat ihren Preis - seien Sie vorsichtig in der Produktion!
    • JavaScript wird höchstens einmal benötigt, während der Lebensdauer wird die Seite nicht mehr benutzt

    Es stellte sich heraus, dass die Lösung nicht übermäßig an die Besonderheiten der gut gestalteten Planierraupe gebunden war.

    Funktioniert mit IE9 +, Webkits, Amazon Kindle Reader und Samsung TV.

    Alle Beispiele für das Stylen von SVG- Symbolen befinden sich auf dem Github . Ich habe Links zu den GitHub-Seiten dieses Repositorys gegeben .
    Ich hoffe, dass sich jemand für diese Geschichte interessiert.

    UPD Basierend auf den Ergebnissen der Frage habe ich eine weitere Seite hinzugefügt, die die Stilisierung von 122 echten Symbolen zeigt , nur 500 Exemplare auf der Seite.Die
    Symbole für dieses Beispiel sind auf www.flaticon.com aufgenommen

    Danksagung


    Bei der Vorbereitung eines Blogposts wurde kein einziges Tier verletzt.
    Die Katze, ursprünglich ein Raster , wurde in einem Online-Editor ( Quelle ) in SVG-Begriffe übersetzt .

    Ich habe die Fähigkeit, Siegel zu zeichnen, durch das Zeichnen von Siegeln für meinen Sohn, der sehr zufrieden mit ihnen war.
    Beschwerden über die Asymmetrie der Ohren lehne ich ab.

    Referenzliste


    Eine sehr, sehr, sehr detaillierte Geschichte über die Stilisierung von SVG-Schatten
    Über SVG-Symbole im Prinzip sowie warum das Symbol besser ist als eine Gruppe
    Die Geschichte der Themensymbole auf dem Hub - SVG, Iconfonts vs PNG
    SVG-Symbole - verschiedene Ansätze , auch bei Katzen
    So wird es gemacht Laden Sie das SVG-Sprite in die DOM-
    SVG-Diagramm-Zeichnungsbibliothek . Sie hat nichts mit Ikonen zu tun, aber es gibt auch Siegel, einschließlich meiner Katze (die mir beim Schreiben von Artikeln geholfen und als Modell für das Zeichnen gedient hat ).

    Jetzt auch beliebt: