SVG-Symbol eine gute Wahl für Icons

Suchen Sie nach einer besseren Methode für SVG-Icons? Inline-SVG könnte Ihre beste Wahl sein, worüber Sie in diesem neueren Beitrag mehr erfahren können.

Sie könnten eine Icon-Sammlung entwerfen, bei der alle Icons exakt das gleiche Seitenverhältnis haben. Aber das wird wahrscheinlich nicht typisch der Fall sein. Der Container um ein kleines Becher-Icon könnte hoch und schmal sein. Der Container um einen kleinen Fisch vielleicht kurz und lang. Sie sollten darüber wahrscheinlich nicht zu viel nachdenken müssen, aber leider müssen Sie es doch irgendwie, wenn Sie ein SVG-Icon-System verwenden, wie ich es in der Vergangenheit beschrieben habe, da Sie das Attribut viewBox verwenden müssen, um diesen Container/Seitenverhältnis zu beschreiben.

Eine Verbesserung ist die Verwendung des -Elements in SVG anstelle der direkten Referenzierung von Formen (oder eines ), da Sie das viewBox direkt auf dem definieren können und dann keines benötigen, wenn Sie es später in einem verwenden.

Ein Beispiel ist angebracht.

Hier sind zwei Icons mit sehr unterschiedlichen Seitenverhältnissen, wie Sie am Zeichenbrett in Illustrator erkennen können.

Wir könnten sie so anpassen, dass sie alle innerhalb eines konsistenten Seitenverhältnisses platziert werden, aber ich finde es flexibler und praktikabler zu wissen, dass die Ränder Ihrer Icons genau dort sind, wo die Formen aufhören, nicht mit einem willkürlichen Leerzeichen darum herum.

Der „alte“ Weg

Wenn wir den Weg der -Blöcke gehen, könnten wir sie kombinieren zu

Dann verwenden Sie sie wie

Das legt eine beträchtliche Bürde auf den Implementierer, die viewBox-Attribute im Markup korrekt zu setzen. Das ist ein Grund, warum man versuchen möchte, all diese Icons mit einer konsistenten viewBox="0 0 100 100" (oder etwas Ähnliches) zu versehen, aber dann haben wir diese Art von willkürlichem Leerraum-Problem.

Der „neue“ Weg

Hier kommen Fabrice Weinberg und TxHawks ins Spiel. Fabrice arbeitet an grunt-svgstore, einem Grunt-Plugin zur Erstellung von SVG-Sprites aus einem Ordner von SVG-Dateien. Diese Art von Ding macht den SVG-Icon-Workflow schnell und einfach. Das heißt, abgesehen von der Tatsache, dass Sie viewBox für jedes Icon kennen müssen, bevor Sie es verwenden.

TxHawks schlug vor, dass grunt-svgstore zumindest data-*-Attribute auf die -Elemente setzen sollte, die jedes Icon umschließen, damit ein programmatischer Zugriff auf das Wesentliche möglich ist. Aber leider erlaubt SVG diese nicht (es hätte wahrscheinlich funktioniert, aber man kann genauso gut ein Build-Tool-spezifikationskonform machen). Aber es spielt keine Rolle, denn bald darauf schlugen sie vor, stattdessen zu verwenden, was sich als ziemlich gute Idee herausstellt.

Anstatt zu verwenden, um alle Icon-Formen zu umschließen, verwenden Sie , so:

Beachten Sie, dass die viewBox für jedes Icon definiert ist und Sie sie definieren, während Sie sie erstellen, im Gegensatz zu dem Zeitpunkt, an dem Sie sie verwenden. Das bedeutet, die Verwendung wird einfacher

Einfacher und weniger fehleranfällig.

Und es wird noch besser: Sie können
original-file's-desc hinzufügen




grunt-svgstore macht das jetzt, dank TxHawks und Fabrice!

Warum <symbol> besser für Icons ist

Nur um es auf den Punkt zu bringen

1. Die viewBox kann auf dem Symbol definiert werden, sodass Sie sie nicht im Markup verwenden müssen (einfacher und weniger fehleranfällig).
2. title- und desc-Tags können innerhalb des hinzugefügt werden und sie „fahren mit“, wenn das Symbol verwendet wird, was die Barrierefreiheit erleichtert.
3. Symbole werden nicht angezeigt, wie Sie sie definieren, sodass kein -Block erforderlich ist.
4. Dafür wurde wahrscheinlich sowieso erfunden.

Demo

Es funktioniert

Siehe den Pen Hwcxp von Chris Coyier (@chriscoyier) auf CodePen.