Die Vorteile der Verwendung von SVGs in der Webentwicklung sind allgemein bekannt. SVGs sind klein, können ziemlich barrierefrei gestaltet werden, sind skalierbar und behalten dabei ihre Qualität, und sie können animiert werden. Dennoch gibt es eine Lernkurve. Dinge wie ...
Eine meiner Lieblingsmethoden, um Icons zu einer Website hinzuzufügen, ist, sie als Hintergrundbilder von Data-URLs in Pseudoelementen (z. B. ::after) in meinem CSS einzufügen. Diese Technik bietet mehrere Vorteile
Es gibt viele verschiedene Möglichkeiten, SVG zu verwenden. Je nachdem, wie Sie vorgehen, ist die Taktik zum Einfärben dieser SVG in verschiedenen Zuständen oder Bedingungen – :hover, :active, :focus, Änderung des Klassennamens usw. – unterschiedlich. …
Ich habe geschrieben, dass die Verwendung von Inline-<svg-Icons das beste Icon-System ergibt. Das stimmt meiner Meinung nach immer noch. Es ist der einfachste Weg, ein Icon auf eine Seite zu bringen. Kein Netzwerkanfrage, perfekt gestaltbar.
Aber das Inlinen von Code hat...
Nicolas Gallagher
Bei Twitter habe ich den hier beschriebenen Ansatz verwendet, um die SVG-Icon-Bibliothek des Unternehmens in mehreren verschiedenen Formaten zu veröffentlichen: optimierte SVGs, reine JavaScript-Module, React DOM-Komponenten und React Native-Komponenten.
Es gibt keinen einzigen wahren Weg©...
Dies ist ein großartiger Einblick in barrierefreie SVG-Markup-Muster von Marco Hengstenberg. Hier ist das ideale Beispiel
<button type="button">
Menu
<svg class="svg-icon"
role="img"
height="10"
width="10"
viewBox="0 0 10 10"
aria-hidden="true"
focusable="false">
<path d="m1 7h8v2h-8zm0-3h8v2h-8zm0-3h8v2h-8z"></path>
</svg>
</button>Dieser Beitrag ist der erste in einer Reihe über die Macht von CSS.
CSS wird immer leistungsfähiger, und mit Funktionen wie …
Wenn Sie ein Stück Inline-<svg> verwenden und weder height noch width festlegen, aber viewBox festlegen, dann ist das ein Fitwigoo. Ich liebe den Namen.
Das Problem mit Fatwigoo's ist, dass die <svg> ...
Das einfache Inline-SVG scheint das einfachste und flexibelste Icon-System zu sein. Aber dieser Teil von <svg></svg> könnte einen <title></title> haben, und Sie wenden möglicherweise aus verschiedenen Gründen IDs auf beide Elemente an....
