Wenn Sie ein Icon-System für eine Website erstellen, haben Sie einige Optionen. Wenn Sie wissen, dass die Icons Rasterbilder sein müssen, verwenden Sie wahrscheinlich CSS Sprites. Wenn die Icons Vektorgrafiken sind (heutzutage viel üblicher), haben Sie einige Optionen. Zwei davon sind die Verwendung von Inline-SVG und die Verwendung von Icon Fonts.
Lassen Sie uns vergleichen.
Icons sind Vektoren
Es gibt große Vorteile bei Vektor-Icons: Sie sind ohne Qualitätsverlust beliebig skalierbar, auf Retina-Displays extra scharf und haben eine kleine Dateigröße.
| Icon Font | Inline SVG |
|---|---|
| Browser betrachten es als Text, daher werden die Icons entsprechend antialiased. Dies kann dazu führen, dass die Icons nicht so scharf sind, wie Sie es vielleicht erwarten. | Direkter Vektor |
In einem aktuellen persönlichen Beispiel waren einige der Icon Fonts beim Konvertieren von Fonts zu SVG auf CodePen merklich weniger scharf als die konvertierten.
CSS-Steuerung
| Icon Font | Inline SVG |
|---|---|
Sie können Größe (über font-size), color, Schatten, Rotation usw. per CSS steuern. |
Sie haben die gleiche CSS-Steuerung wie bei einer Schriftart, aber besser, da Sie 1) einzelne Teile eines mehrteiligen Icons steuern können und 2) SVG-spezifische CSS wie Kontur-Eigenschaften verwenden können. |
Der große Vorteil von Inline-SVG sind wahrscheinlich mehrfarbige Icons.
Positionierung
| Icon Font | Inline SVG |
|---|---|
Es kann frustrierend sein, ein Icon Font zu positionieren. Die Icons werden über ein Pseudo-Element eingefügt, und es hängt von line-height, vertical-align, letter-spacing, word-spacing, dem Design des Font-Glyphen ab (hat es natürlich Platz drumherum? Hat es Kerning-Informationen?). Dann beeinflusst der display-Typ der Pseudo-Elemente, ob diese Eigenschaften Auswirkungen haben oder nicht. |
SVG hat einfach die Größe, die es hat. |
Seltsame Fehler
| Icon Font | Inline SVG |
|---|---|
|
Eine Icon-Schriftart kann fehlschlagen, weil 1) sie domänenübergreifend ohne die richtigen CORS-Header geladen wird und Firefox dies nicht mag, 2) die Font-Datei aus irgendeinem Grund nicht geladen werden kann (Netzwerk-Hickup, Serverfehler etc.), 3) es einen seltsamen Chrome-Bug gibt, der @font-face entfernt und stattdessen eine Fallback-Schriftart anzeigt, 4) eine überraschend Browser @font-face nicht unterstützt. Fehler bei Schriftarten sind aus einer Vielzahl von Gründen ziemlich häufig. Außerdem, wenn Sie versuchen, etwas Kluges zu tun, wie Icons auf den "Private Use Area" von Unicode zu mappen und die Schriftart fehlschlägt, kann sie etwas wirklich Seltsames tun, wie ein unerwartetes Emoji anzeigen, weil die Umgebung, in der Sie sich befinden, den gleichen Bereich für Emojis verwendet. Oder dieses Emoji könnte sogar Ihre Glyphen überschreiben! |
Inline-SVG befindet sich direkt im Dokument. Wenn der Browser es unterstützt, zeigt er es an. |
Erzwungene Fehler
| Icon Font | Inline SVG |
|---|---|
|
Selbst diese Proxy-Browser unterstützen SVG. Blocker kümmern sich nicht um SVG. |
Semantik
| Icon Font | Inline SVG |
|---|---|
Um es verantwortungsvoll zu nutzen, fügen Sie das Icon über ein Pseudo-Element auf einem (leeren) <span> ein. Entweder schlechte oder keine Semantik, je nachdem, wie Sie darüber denken. |
Icons sind kleine Bilder. Die Semantik von <svg> sagt "Ich bin ein Bild". Das erscheint mir besser. |
Barrierefreiheit (Accessibility)
| Icon Font | Inline SVG |
|---|---|
| Sie müssen mit Icon Fonts sehr vorsichtig sein, um sicherzustellen, dass Sie es barrierefrei gestalten. Sie sollten im Grunde alles in diesem Artikel tun. Sie kämpfen immer darum, sicherzustellen, dass das Icon selbst nicht gelesen wird (aber etwas anderes schon) und dass schwer zu erkennende Fehlerzustände behandelt werden. | Ich bin kein Experte, aber Recherchen deuten darauf hin, dass Sie durch die richtige Kombination von Elementen und Attributen (<title>, <desc> und aria-labelledby) gute Informationen über das Browser-Spektrum hinweg vermitteln können. Plus keine seltsamen Fehlerzustände. |
Benutzerfreundlichkeit
| Icon Font | Inline SVG |
|---|---|
| Die Verwendung einer vorgefertigten Icon-Schriftart war nie besonders verantwortungsvoll (zu viele ungenutzte Icons). Das Erstellen Ihrer eigenen Icon-Schriftart war nie übermäßig bequem. Ich denke, die besten waren Pictos Server (beschränkt auf Pictos-Icons) und IcoMoon (kostenloser Login zum Speichern von Projekten). Fontello hat eine API, die ich nicht verwendet habe, um ein gutes Build-Tool zu erstellen. | Das Inline-SVG-System ist einfacher, da Sie es bei Bedarf von Hand erledigen können. Oder verwenden Sie ein Tool wie IcoMoon (exportiert in beide Richtungen). Oder verwenden Sie ein Build-Tool. |
Browser-Unterstützung
| Icon Font | Inline SVG |
|---|---|
| Sehr tief. Sogar IE 6. | Anständig, aber Probleme sind IE 8- und Android 2.3-. Fallbacks machbar, aber nicht wunderbar. |
Gewinner
Es kommt alles auf die Browserunterstützung an. Wenn Sie IE 9+ / Android 3+ verwenden können, ist Inline-SVG bei *ziemlich allem* besser als Icon Fonts. Wenn Sie tiefere Browserunterstützung benötigen, glaube ich, dass ein Inline-SVG-Fallback zu schmerzhaft wäre, um es wert zu sein (Pflege einer PNG-Kopie, Einfügen eines zusätzlichen Elements zur Anzeige der PNG-Version, Ausblenden des SVG-Elements... es ist aufwendig).
Mann, ich würde gerne mit SVG durchdrehen, aber IE8-Unterstützung ist für mich immer noch ein Muss. Es ist verdammt schade.
Wenn Sie immer noch ein schnelles Werkzeug für benutzerdefinierte Social-Icons benötigen. http://perfecticons.com/ ist eine großartige Ressource.
Ich hoffe, irgendwann eine Inline-SVG-Version zu haben.
@ivan – Ihr Link funktioniert nicht
@Aaron Hall – Seltsam. Scheint Verkehr zu bekommen. Erreichen Sie mich unter @jivinivan mit weiteren Details.
Wussten Sie, dass Microsoft Windows XP EOLiert hat? Das bedeutet, dass IE8 hoffentlich bald eingestellt wird. Sie können sich die Folien aus meinem Vortrag hier ansehen: http://wojtiku.pl/speaking/ie8/, um einige Argumente für die Ablösung zu erhalten. Es lohnt sich wirklich!
Es ist ein Muss für uns (war), aber wir würden die Erfahrung für diese älteren Geräte gracefully degradieren.
@wojtiku Win 7 wurde mit IE8 ausgeliefert. Es gibt viele Nicht-Techniker, die der Aktualisierung von Windows abgeneigt sind, was erforderlich ist, um Win 7-Maschinen mit IE9+ laufen zu lassen.
Für IE8- gibt es ein Polyfill namens SIE SVG, das VML als Fallback verwendet.
Hallo Jacob
Was das angeht, alles, was Sie für die Browserunterstützung tun müssen, ist, Ihren Index mit einer Modernizr.js-Datei zu verknüpfen, die Sie leicht suchen und herunterladen können. Daher werden alle Browser, einschließlich IE8, HTML5- und CSS3-Eigenschaften unterstützen.
O,
@O, Falsch.
Modernizr ist ein **Funktionserkennungs**-Skript, es ermöglicht älteren Browsern nicht magisch, HTML5- und CSS3-Eigenschaften zu unterstützen.
In Modernizr's eigenen Worten
Hallo Chris,
Ich habe versucht, Ihre Anleitungen zum Erstellen von SVG (Sprites) zu befolgen. Ich habe sie manuell erstellt, aber sie sind immer durcheinander. Z.B. sind die SVG- und Use-Elemente unterschiedlich groß. Sie scheinen nicht auf Änderungen in den CSS-Panels zu reagieren. Nur Teile davon werden angezeigt. Haben Sie Richtlinien, wie die SVGs gespeichert werden sollten, bevor sie zusammen gruppiert werden? Ich habe ein SVG von Ihrem CodePen genommen und es ausprobiert und es ist in Ordnung. Aber meine eigenen und heruntergeladene von icoMoon scheinen alle schrecklich schief zu gehen. Danke, Neil
Hallo,
Interessant! Ich werde diese IcoMoon-Funktion ausprobieren, die ich noch nicht getestet habe.
Johan
Interessanter Artikel. Ich denke, http://fontawesome.io/ ist ein ausgezeichnetes Produkt, das man verwenden kann (überrascht, dass es dort nicht erwähnt wird). Es ist sehr einfach zu bedienen und kann jede Klasse zum Anwenden verwendet werden.
Was Chris dort aufgelistet hat, waren keine "coolen Icon Fonts", sondern Wege, nur die benötigten Icon-Glyphen zu laden (anstelle der gesamten Icon-Schriftart, die Dutzende oder Hunderte von ungenutzten Glyphen enthält).
Wie sieht es mit der Leistung aus? Eine Icon-Schriftart ist eine großartige Möglichkeit, die Anzahl der HTTP-Anfragen zu reduzieren, indem eine riesige Menge an Icons in einer einzigen Datei zusammengefasst wird. Sie können die Font-Datei sogar als Base64 in Ihre Haupt-CSS-Datei einbetten.
Auch zur "Semantik": Ich betrachte ein Icon nicht als "kleines Bild" im Sinne, dass es nicht Teil des Inhalts ist. Ein Icon ist Teil der Dekoration, ein visueller Hinweis oder eine Anzeige.
**Inline-** SVG ist im Dokument eingebettet, daher fallen keine zusätzlichen HTTP-Anfragen an. Es gibt jedoch einen Nachteil, da Inline-SVG nicht für die Verwendung mit anderen Dokumenten gecached wird.
In Bezug auf Leistung/HTTP-Anfragen, können Sie nicht ein externes SVG-Dokument mit allen Icon-Definitionen haben, auf das auf der Seite über
use-Tags verwiesen wird? Dies würde die Vorteile des Caching bei minimalen HTTP-Anfragen bieten.Ah, ich habe die Antwort auf meine eigene Frage gefunden. Die Browserunterstützung für externe
use-Referenzen ist noch nicht vollständig ( Icon-System mit SVG Sprites, unter "Das wird viel besser werden" ), hauptsächlich in IE.Es scheint, dass man einen Fallback haben könnte, der das externe SVG per AJAX lädt, es ganz am Anfang nach dem
body-Tag in das DOM einfügt, dann würden dieuse-Tags korrekt funktionieren oder müssten möglicherweise aktualisiert werden, um die externe Referenz zu entfernen und nur die ID zu verwenden (von<use xlink:href="icon.svg#Menu">zu<use xlink:href="#Menu">).Das scheint ein eleganterer Fallback zu sein, als ihn mit
object-Tags auszutauschen, und würde es den Browsern ermöglichen, die Icons (Fallback oder nicht) zu cachen und die Größe des tatsächlichen HTML nicht aufblähen.Shaw, genau das mache ich, SVG per AJAX laden. Es funktioniert großartig.
jQuery
$(‘img[src*=”.svg”]’).each(function() {
var svg = $(this).attr(‘src’);
var svgClass = svg.replace(/^.+\/([^\/]+).svg/g,’$1′);
Ich widerspreche Ihrer Schlussfolgerung im Allgemeinen nicht, aber ich glaube, dass Schriftarten in einigen Fällen bei der Semantik gewinnen könnten. Ich denke hauptsächlich an Situationen, in denen das Icon das Wort begleitet, das es vermitteln soll, wie zum Beispiel: "[Hamburger] Menü."
Im Fall von SVG: Es gibt semantisch ein Bild dort, was für mich impliziert, dass das Bild mehr Informationen vermittelt als im Text enthalten ist. Visuell tut es das, indem es eine schnelle Erkennung ermöglicht, ohne das eigentliche Wort lesen zu müssen; semantisch wiederholt es einfach.
Im Fall der Icon-Schriftart: Da ist ein Span, der per Konvention semantisch neutral ist (mit anderen Worten, er erweckt nicht den Anschein, zusätzliche Informationen zu vermitteln).
Es ist eine geringfügige Kritik und wahrscheinlich eher eine Frage der Perspektive als alles andere. Und offensichtlich gilt dies nicht für Situationen, in denen das Icon allein steht oder tatsächlich zusätzliche Informationen vermittelt (wie ein Sparkline oder etwas Ähnliches).
Ich warte sehnsüchtig auf die 2020er Jahre, wenn Microsoft die Unterstützung für Windows 7 einstellt und damit auch für Internet Explorer 8.
Und Chris, danke für den Artikel! Hat mich dazu gebracht, SVG jetzt zu lernen. :D
Angenommen, Windows hält so lange :D
Ich hatte gehofft, du hättest einen Kurzcode für [cagematch] registriert.
Verwenden Sie SVG mit dem fantastischen Grunticon von Filament Group http://filamentgroup.com/lab/grunticon für eine DIY-Kommandozeilenversion oder http://www.grumpicon.com/ für die Web-App-Version.
Es macht den gesamten Fallback-PNG und CSS für Sie.
Ich benutze und liebe Grunticon (oder zumindest die Grumpicon-Web-App), aber ich habe das Gefühl, dass diese Implementierung einige der von Chris erwähnten Vorteile vermissen lässt, da die SVGs als
background-imageeingefügt werden.Nehmen Sie zum Beispiel
:hover/:active-Zustände. Mit Inline-SVG haben Sie die CSS-Steuerung vonstroke,fillusw. mit der Möglichkeit zuanimateodertransition, aber mit Grunticon sind Sie gezwungen, das Icon gegen ein anderes auszutauschen, nur um die Farbe zu ändern. Jeder dieser Zustände erhöht das Gewicht der CSS-Einbindung, da Sie mehrere Kopien desselben Icons haben.Ich würde mir ein Grunticon/Grumpicon-ähnliches Tool wünschen, um einen Ordner von SVGs in einem Dokument zu kompilieren, mit allen Icons als Definitionen, zugänglich über den
use-Tag. Genau wie Grunticon könnte das Tool auch einen PNG-background-image(Base64-kodiert) als Fallback für IE8 und Android 2.3- erstellen, dann einen externen PNG-background-image-Fallback für IE7-.Die Markup wäre wahrscheinlich etwas wie
(Entschuldigen Sie, wenn das nicht korrekt angezeigt wird. Die Vorschau hat den Code überhaupt nicht angezeigt)
In Ihrem CSS würden Sie den
spangrößen und dassvgmitwidth: 100%; height: 100%darin passen lassen (ein viewBox-Attribut könnte erforderlich sein, ich bin mir nicht sicher). Der Fallback-CSS würde denspanansprechen, um ihm das PNG-background-imagemitbackground-size: containzu geben.Hat jemand Interesse, das anzugehen? :D
Ich verstehe wirklich nicht, warum man sich mit IE 7, geschweige denn IE 8, abmühen sollte. Windows XP ist EOL und ich kann mir wirklich nicht vorstellen, warum jemand IE 8 auf Windows 7 verwenden sollte.
Die Anzahl der Benutzer, die IE 8 verwenden, ist so gering, dass ich mich nicht mehr darum kümmere. Und ja, ich bevorzuge Statcounter-Statistiken, da NetMarket Share eine WIRKLICH kleine Statistikgruppe hat (rund 45.000 Websites), hauptsächlich aus dem E-Commerce und hauptsächlich aus China. Das ist wirklich nichts, was man berücksichtigen sollte. Ein Treffer ist ein Treffer, und wenn ich wählen kann, würde ich lieber eine viel größere Statistikgruppe von Statcounter (mehr als 5 Millionen) wählen. Treffer ist ein Treffer, und wenn ich wählen kann, würde ich lieber eine viel größere Statistikgruppe von Statcounter (mehr als 5 Millionen) wählen.
Google Analytics auf den von mir verwalteten Websites zeigt mir einen noch kleineren Marktanteil für IE 8 (nicht viel mehr als 5%). Android 2.3 ist bereits tot, da diese Geräte sehr, sehr alt sind und hauptsächlich als Dummenhandys verwendet werden.
Wirklich, Leute, wir sollten nach vorne schauen, nicht zurück, und uns darum kümmern, dass Benutzer ihren Browser nicht seit 10 Jahren nicht aktualisieren können. Das ist die Steinzeit in Bezug auf Web und IT.
@jozef
Ich wäre vorsichtig, wenn ich ~5% des Traffics auf Websites, die Sie entwickeln, vergessen würde.
Was Sie stattdessen argumentieren könnten, ist, dass dies progressive Verbesserung ist (wenn es in Ihrem Fall so ist) und dass die Icons ein Nice-to-have sein mögen, aber nicht erforderlich sind und daher für IE8 fallen gelassen werden können.
Im Allgemeinen erwarte ich jedoch, dass die meisten von uns damit leben müssen, sicherzustellen, dass IE8 auf den von uns entwickelten Websites noch eine Weile nutzbar ist, nur weil Microsoft die Unterstützung für XP eingestellt hat, bedeutet das nicht, dass signifikante Zahlen von Benutzern XP noch eine Weile weiter verwenden werden.
Simon, das ist mir wirklich egal. Die letzten 2 Versionen, das ist meine Politik. Das Einzige, was ich tun will, ist, eine Warnung über alte Browser anzuzeigen, mit der Option, einen anderen, neuen herunterzuladen. Benutzern erlauben, immer noch auf die Website zuzugreifen, aber ohne Optimierungen oder Korrekturen.
Mit der Politik, neolithische Browser zu unterstützen, würden wir immer noch für IE 6 entwickeln. Wirklich, Benutzer können neuere Handys kaufen, ihre Musikplayer-App aktualisieren, das dämliche Flash, Acrobat aktualisieren, aber sie sind nicht bereit, den Browser zu aktualisieren?
Es ist gut, dass Sie auf die Unterstützung von IE8- hinweisen. Mein Posteingang ist voll von Newslettern, die die neuesten Erkenntnisse zu SVG verbreiten, aber ich kann nicht einmal anfangen, damit zu spielen, weil IE8-Fallbacks eine Qual sind. Es ist nicht ganz wie der Verzicht auf text-shadow oder border-radius unter IE8. SVGs (und ein Icon-System) würden viele Leistungsprobleme für uns lösen – mein Grafikdesigner versteht einfach nicht, womit ich mich abmühe, seine aufgeblähten Dateien zu komprimieren.
Meine große Hoffnung ist, dass mit dem Wegfall der XP-Unterstützung Unternehmen und Schulen (woher der Großteil unseres Traffics stammt) bald auf Win7|8 aufrüsten und zu IE10+ wechseln werden. Dann eröffnet sich eine ganz neue Welt an Möglichkeiten. (Oh mein Gott, ich muss mehr über ... lernen)
*<canvas>
Ich bin überzeugt! Keine Icon-Fonts mehr.
Vielen Dank für eine so gründliche Analyse.
Ein weiteres Feature von SVG, das ich mag, ist der echte Vektor-Vorteil, dass man denselben Bildcode in der Größe ändern kann. Hier: http://maxw3st.us/svgshare/share_reveal.html die Icons am oberen Rand der Seite und die unter dem "Share"-Panel sind derselbe SVG-Code, nur in der Größe verändert. Das kann praktisch sein, wenn Sie Bilder für RWD skalieren möchten, ohne mehrere Kopien des Bildes zu erstellen. Kommentare im CSS-Code erklären, wie ich es gemacht habe, einfach "Quelltext anzeigen".
Wie verwendet man SVG in einem Editor für ein CMS?
Für die meisten öffnen Sie einfach die SVG-Datei in einem Texteditor, kopieren sie heraus und fügen sie in die Textansicht Ihres Editors ein. Wenn dies entfernt wird, benötigen Sie entweder eine Erweiterung/ein Plugin, das dies zulässt, oder Sie müssen die SVGs auf Ihren Webserver hochladen und sie wie jedes andere Bild aufrufen.
Ich stimme allem zu, was Sie gesagt haben, aber Sie (absichtlich?) lassen einige Aspekte aus
– Leistung
Kein Cache für Inline-SVG (dasselbe Icon wird auf jeder Seite geladen)
Ein weiterer Treffer für Schriftart
Deeper und komplexeres DOM mit SVG => Langsameres Parsen / CSS-Rendering
Gesamtgewicht: 37kB SVGs => 6kB .woff-Datei (Stand meines aktuellen Projekts)
– Stil
Möglichkeit, die Farbe des Icons per CSS-Farbe zu ändern, aber nur eine Farbe
Komplexität der Änderung der SVG-Farbe per CSS, aber Flexibilität der Farben
– Rendern
SVG hat immer noch seltsame Renderfehler (unscharf unter IE, ...)
Definitiv! Daumen hoch!!
Es gibt ein paar Auslassungspunkte in diesem Beitrag.
+1
WOFFs sind komprimiert und SVGs standardmäßig nicht. Vergleichen Sie komprimierte Größen.
Sie können SVG-Sprites verwenden – nur eine Anfrage mit allen Icons.
CSS-Parsing ist heutzutage sehr schnell, keine Sorge.
Vergessen Sie die Animation nicht. Mit Icon Fonts können Sie nur das gesamte Icon animieren, aber mit SVG können Sie einzelne Komponenten animieren.
Kennt jemand robuste Fallbacks für Inline-SVG.... zum Beispiel Fallback auf einen PNG-Sprite?
Ich würde ein Element mit SVG im src-Attribut verwenden. AJAX lädt es inline für das Caching und mit Modernizr Fallback auf .png (nur um die Erweiterung von svg in .png im img-Element zu ändern), falls Inline-SVG falsch ist.
Ja, das könnte ein Problem sein, wenn Sie es einfärben wollen, aber in diesem Fall würde ich auch eine .no-inline-svg-Klasse im Stylesheet verwenden.
Für Barrierefreiheit und Semantik, was ist falsch daran, eine Ligaturen-basierte Icon-Schriftart zu verwenden und sie normal lesen zu lassen? Im Falle eines Font-Face-Fehlers oder ähnlichem werden einfach Text angezeigt, ohne dass Markup über eine einfache
class="icon"hinaus erforderlich ist.Bin ich der Einzige oder ist die Unterstützung für mehrfarbige Icons nicht ein (das) Killerfeature von SVG gegenüber Icon Fonts?
Mehrfarbige Icon Fonts sind auch möglich, z.B. http://pixelambacht.nl/2014/multicolor-icons/
Die Verwaltung von Inline-SVG in komplexeren Projekten ist viel weniger flexibel als Icon Fonts + Pseudo-Elemente, die überall hinzugefügt werden können, ohne das Markup zu ändern.
Wenn Sie den Weg des Inline-SVG gehen und dasselbe Icon mehrmals auf einer Seite verwenden müssen (z. B. Teilen-Icons bei jedem Artikel), wird die Größe Ihres Dokuments schnell anschwellen.
Ich stimme Flunch zu, dass ich denke, dass Icon Fonts (viel kleiner, cachebar, keine potenzielle Duplizierung von Code) den Leistungsvorteil gegenüber Inline-SVG hätten. Weiß jemand Tests dazu?
Gerade eine neue Vision für Vektor-Icons neben Schriftarten bekommen.
Ich verwende für ein aktuelles Projekt ein SVG-Icon-Sprite-Sheet... komprimiert und Base64-kodiert in mein Stylesheet (siehe Chris' Beitrag "Using SVG" von vor einem Jahr und das Video unten https://css-tricks.de/using-svg/). Ich werde ein PNG-Sprite-Sheet als Fallback für alte schlechte Browser mit Modernizr bereitstellen.
Icons sind so scharf wie möglich, die Ladung ist minimal, die HTTP-Anfragen sind reduziert und es funktioniert für alle.
Was fehlt mir?
Es gibt zwei Einschränkungen bei der Verwendung eines SVG-Bildes als Sprite-Sheet
Leistung: Der Browser zeichnet das gesamte SVG für jedes Icon, und in älteren Chrome/Firefox und allen IE-Browsern können Sie manchmal Verzögerungen beim Ändern der Position eines großen Sprite-Sheets bemerken.
Keine CSS-Steuerung/Interaktion mit dem Icon, es wird einfach als statisches Bild behandelt. Sie können also nicht die Farbe beim Hover ändern oder das Icon an die umgebende Schriftfarbe anpassen, ohne ein anderes Icon im Sheet zu tauschen. (Auch keine speziellen SVG-Barrierefreiheits-Elemente, aber diese werden anscheinend ohnehin nicht gut unterstützt und Sie sollten Title/Alt-Text für Ihre Spans haben, genau wie bei PNG-Sprite-Icons.)
Aber wenn weder das noch ein Problem in Ihrem Projekt ist, gibt es keinen Grund, mit dem aufzuhören, was Sie tun.
Von Anfang an konnte ich sehen, dass SVG gewinnen würde... bis zum letzten Teil über die Browserunterstützung.
Ein Problem, das ich mit Inline-SVGs habe, ist, dass Sie den gesamten SVG-Code auf der Seite haben, was das Markup erstellt, nicht unbedingt "schwer zu lesen", aber Sie dazu bringt, visuell den gesamten SVG-Code zu überspringen, um zu finden/bearbeiten, was Sie wirklich brauchen.
In meinen Augen ist das Antialiasing von Icon Fonts wirklich keine große Sache. Überhaupt nicht. Selbst ein geschultes Auge kann sehen, wie minimal das Antialiasing wirklich ist, die Endbenutzer können das nicht sehen und es wäre ihnen egal.
Icon Fonts, die von
line-height,vertical-align,letter-spacing,word-spacing,font-sizeusw. beeinflusst werden... Warum ist das schlecht? Warum ist das eine "große Sache"? Wir beschäftigen uns die ganze Zeit mit all diesen Eigenschaften für Webfonts, geschweige denn für Systemschriftarten! Ehrlich gesagt, ich persönlich musste mich noch nie mitvertical-align,letter-spacing,word-spacingauseinandersetzen, wenn ich Icon Fonts verwendet habe, jemals.Ich ziehe es vor, keine in mein Markup eingebetteten SVGs zu verwenden, sondern einfach eine SVG-Datei aufzurufen, als würde ich ein Bild aufrufen, was meiner Meinung nach der ideale Weg ist, SVGs zu verwenden. Das Problem dabei, das für mich ein "rotes Feld" ist (Chris verwendet rote Felder für die Nachteile), ist, dass es keine Möglichkeit gibt, das SVG mit CSS zu beeinflussen. Bitte sagen Sie mir, dass ich falsch liege und dass es tatsächlich eine Möglichkeit gibt, dies zu tun.
IE8 ist immer noch ein wichtiger Faktor, daher ist die Arbeit mit PNG-Fallbacks und die Verwendung von Icon Fonts gegenüber SVGs etwas, das ich derzeit nicht ändern möchte. Ich bin sicher, dass andere, viele, im selben Boot sitzen, was IE8 betrifft.
Vielleicht ist es das für Sie nicht. Es gibt viele Faktoren, die hier eine Rolle spielen. Ich finde das persönlich eine enorme Qual. Es ist "hier ist eine Box dieser genauen Größe, positioniere sie vorhersehbar" gegenüber "hier ist eine Box unbekannter Größe, in der die Grafik darin möglicherweise nicht mit den Rändern dieser Box übereinstimmt, viel Glück bei der Positionierung".
Interessanter Beitrag.
Ich denke, Sie sollten den Hintergrund für die Browserunterstützung auf rot ändern ;)
Ich stimme allem zu, was Sie gesagt haben, obwohl Inline-SVG einige Nachteile hat, hauptsächlich im Zusammenhang mit der Leistung.
Sie können sie nicht cachen. 10 KB eingebettetes Inline-SVG müssen bei jedem Seitenaufruf heruntergeladen werden.
DOM-Overhead. Inline-SVG ist Teil des DOM-Baums, je größer und komplexer der DOM-Baum, desto höher ist die Wahrscheinlichkeit einer spürbaren Leistungsverschlechterung.
Das SVG-Referenzelement <use/> kann einige dieser Probleme mildern, und wie Sie erwähnen, kann verknüpftes CSS verwendet werden, um das Inline-SVG so schlank wie möglich zu halten.
Beispiele für das, was ich meine, finden Sie im Quelltext hinter dieser Seite
http://the-echoplex.net/csscrush/
Wahr. Vermutlich wird die Seite jedoch gecacht. Das bedeutet, dass Ihr gesamter Seiten-Cache etwas aufgebläht ist. Aber wahrscheinlich insgesamt kein großes Problem.
Ideale Situation ist
<use xlink:href="link/to/svg.svg#icon ... >, was bedeutet, dass es gecacht werden könnte. Aber nicht in IE-irgendwas unterstützt.Ich denke, die Verwendung von SVG in CSS anstelle von Inline wäre eine gute Lösung.
Vorteile
– Bietet einen Fallback für fehlendes SVG mit Modernizr
– Sie können das Bild Website-weit aktualisieren, im Gegensatz zu Inline-SVG, wo Sie möglicherweise mehrere Speicherorte haben könnten.
Wirklich eine großartige Erklärung, ich werde SVG-Icons für einige Projekte verwenden.
Sie können den SVGmagic-Service für alte Browser verwenden: svgmagic.bitlabs.nl
+1
SVGMagic – http://svgmagic.bitlabs.nl
Das ist für SVG-als-Bild, nicht für Inline-SVG. Es ist nett, aber fairerweise muss man sagen, dass es bei jedem Seitenaufruf in einem nicht unterstützenden Browser einen AJAX-Aufruf an deren Server macht.
Toller Ort, um CSS zu lernen. CSS ist wirklich der Hauptfaktor im Designsektor. Die Person, die mehr CSS kennt, kann so schön designen. Für eine bessere und professionelle Website muss man ein Meister in CSS sein.
animated video maker
Sie müssen das Icon nicht in ein leeres einfügen. So machen es viele Leute, aber Sie können Icon-Fonts über Pseudo-Elemente auf normalen Elementen verwenden, die Teil Ihres semantischen Dokuments sind. Mir scheint, dass Inline-SVG weniger semantisch ist, da Sie Definitionen von Bildern in Ihrem Dokument haben.
Die Positionierung von Pseudo-Elementen ist keine Trickserei. Es ist wie ein reguläres Inline-Element. Wenn Sie nicht damit spielen wollen, machen Sie es absolut positioniert und fertig.
Das Pseudo-Element wird dann vorgelesen. Der Sinn des Spans ist, dass Sie
aria-hiddendarauf verwenden können.Wie behebt die absolute Positionierung, dass die Box um den Glyphen etwas schwer vorherzusagen ist, da so viele andere Eigenschaften (und andere Dinge) sie beeinflussen?
SVG: Muss mehrfach deklariert werden, und wenn es ein Inline-Icon ist, kann die Größe sehr lang sein. Es sei denn, es wird als Hintergrundbild wie Sprites gesetzt, aber dann ist es nicht mehr skalierbar. Das Ändern der Schriftgröße ändert nicht die Icon-Größe.
Icon Font: Kann in eine HTML-Klasse aufgenommen werden und skalierbar bleiben, die Größe kann leicht an die Textgröße um ihn herum angepasst werden. Das Ändern der Schriftgröße ändert die Icon-Größe.
PS: Sind externe SVGs cachebar?
Nein, Sie deklarieren es einmal und dann
<use>es an mehreren Stellen.Sie können SVG skalieren, egal wie Sie es verwenden.
Ja.
Danke.
Haben Sie nicht gesagt, dass das in IE-irgendwas nicht unterstützt wird... Soweit ich weiß, ist IE immer noch ein wichtiger Browser-Player...
Nur zur Info...
Es war für den direkten Aufruf des Sprites mit dem SVG-Fragment gedacht. Wie
Verwendung eines SVG-Sprites mit Einbindung oben und da dies in IE9 und besser funktioniert
Sie sollten NetMarket Share-Statistiken wirklich nicht ernst nehmen. Chrome und Firefox zusammen übertreffen IE bei weitem. Wirklich. Und soweit ich sehe, zumindest hier in Europa, ist der Anteil von IE 8 so gering, dass ich mich nicht mehr darum kümmere. Diese Leute sind es ohnehin nicht wert, Kunden zu sein. Wird ein solcher Typ auf einem E-Shop ausgeben, wenn er nach 12 Jahren nicht bereit war, auf eine neuere Version von Windows zu aktualisieren, und das auf einem sehr alten Computer? Ich glaube nicht.
Eine Website, die ich baue, verwendete ursprünglich ein SVG-Sprite-Sheet. Alles sah großartig aus und die Darstellung über Browser hinweg war gut, aber eine Sache, die mir wirklich auffiel, war die Leistung.
Beim Scrollen der Seite war die Verzögerung ziemlich spürbar. Jede Seite verwendete zwischen 20 und bis zu 50 Icons für verschiedene Elemente. Es war spürbar genug, dass der Kunde es kommentierte und sich beschwerte.
Ich habe inzwischen alles auf eine benutzerdefinierte Icon-Schriftart umgestellt und jetzt gibt es keine Scroll-Verzögerung mehr. Für mich ist das ein großer Faktor, weil es etwas ist, das der Benutzer bemerken wird. Die Seiten fühlten sich träge und fehlerhaft an. Egal wie knackig Ihre Icons sind, wenn Ihre Website oder Webanwendung den Eindruck von Langsamkeit erweckt, verringert dies die Benutzererfahrung.
Wenn es eine Möglichkeit gibt, dies zu mindern, dann wäre ich zu 100% SVG-konform, aber für eine Website, die mehr als 4 oder 5 Icons verwendet, ist sie derzeit für mich einfach nicht praktikabel.
Ich habe mich in letzter Zeit selbst damit auseinandergesetzt und festgestellt, dass die Barrierefreiheit von eingebetteten SVGs leicht fragwürdig und nicht unbedingt ideal ist.
http://blog.paciellogroup.com/2013/12/using-aria-enhance-svg-accessibility/
Die Basis-Tags title und description haben eine schlechte Browserunterstützung und erfordern daher die Verwendung von aria-labelledby. Ich bin auch kein Experte darin, aber ohne sichere Kenntnis der Auswirkungen auf das SEO von Websites, die SVGs anstelle von PNGs oder Icon Fonts verwenden, konnte ich mich nicht dazu durchringen, sie zu verwenden.
Ich habe mich schließlich dafür entschieden, die SVGs als Bilder und Hintergrundbilder mit Bildersatztechniken zu verwenden, was natürlich die Bearbeitungsmöglichkeiten vermissen lässt, aber bedeutet, dass ich mit Daten arbeite, von denen ich sicher bin, dass meine Benutzer sie verstehen werden.
Auch der Fallback für ie8 ist mit einem Sass-Mixin leicht zu implementieren, während Minifizierung und PNG-Konvertierung mit grunt gehandhabt werden.
Wenn jemand mehr Informationen zu eingebetteten SVG-Barrierefreiheits- und SEO-Auswirkungen einer solchen Implementierung hat, würde ich mich freuen, davon zu hören.
Ich mag diese Art von Artikel wirklich, besonders wenn er eine Branchennorm wie Icon Fonts in Frage stellt. Noch besser, dass es sich in Richtung SVG neigt, ich habe SVG (in der Theorie) schon immer viel mehr gemocht als einen Hack wie eine Schriftart aus Icons. Tolle Arbeit Chris!
Zuerst muss ich sagen, dass ich die Idee und das Konzept von SVG's mag, aber ich stimme nicht zu, dass sie automatisch Icon Fonts übertreffen...
Wenn Sie jemals ein SVG von auch nur mittlerer Komplexität erstellt haben, dann wissen Sie, wie viel Markup erstellt wird. Jedes Mal, wenn Sie ein einfaches Icon verwenden möchten, muss Ihre Seite ein Mini-XML-Dokument rendern, anstatt nur "" oder "". Wir sprechen von Inline-SVG, nicht von SVGs in einem Bild-Tag.
Icon Fonts können Tonnen von Icons in einer einzigen HTTP-Anfrage enthalten, sind cachebar, skalierbar, können einmal geschrieben und oft verwendet werden, sind für Nicht-Entwickler leichter zu verstehen und zu verwenden (meine Meinung) und haben tiefere Browserunterstützung.
Icon Fonts haben immer noch ihren Nutzen, ich würde nicht dafür plädieren, Icon Fonts jetzt abzuschaffen, sie haben immer noch viele Vorteile.
Ich werde SVG verwenden, wo SVGs Sinn machen, wie z. B. Logos und Datenvisualisierung, und werde weiterhin Icon Fonts für gute Icons verwenden.
NICHT wahr. Sie fügen es nur einmal ein, am ANFANG, direkt nach dem . Dann werden Sie es einfach mit überall dort referenzieren, wo es benötigt wird.
Haben Sie den Artikel überhaupt gelesen? Warum behaupten so viele Leute hier, was einfach nicht wahr ist?
Lesen Sie es. Und nochmal. Und nochmal.
Caching kann mit Tag-Loading von SVG als normales Bild behandelt werden, dann AJAX-Einbindung in das DOM. In diesem Fall können Sie schön ein PNG-Fallback mit Modernizr erstellen, wenn SVG nicht unterstützt wird – Sie ändern einfach die Erweiterung von .svg in .png im img-Element. FERTIG.
Ich poste nur, um zu erwähnen, dass ich glaube, dass der erste Poster Recht hat, bei SVGs wird jedes Mal, wenn das Bild angezeigt wird, wahrscheinlich erneut *gerendert*, auch wenn es nicht http-angefordert wird. Das war nur einmal, aber ich sehe nicht, wie es einmal gerendert wird und trotzdem zweimal oder öfter erscheint. Wird es in einem anderen "Format" "gecached", mehr oder weniger als wäre es eine "Variable", die aus einer Funktion (Rendering) resultiert, anstatt einer "Funktion", die jedes Mal neu ausgeführt werden muss? Ich würde vermuten, dass es theoretisch sogar von der Browser-Engine abhängen könnte.
Sehr nützlicher Artikel über Inline-SVG vs. Icon Fonts. Kann mir jemand sagen, wie ich es für Widgets in WordPress-Blogs verwenden kann?
Hey Mann, großartiger Vergleich. Hat mir sehr gut gefallen, ich hätte nie gedacht, dass es einen tiefen Unterschied zwischen "Inline SVG vs Icon Fonts" gibt. Danke für den Beitrag :D
Es gibt definitiv Build-Tools für Schriftarten. grunt-webfont ist eines davon. Ich benutze es in einem Projekt, wo ich nur eine SVG in einen Icon-Ordner fallen lassen kann und zack, meine Grunt-Watch-Aufgabe kompiliert die Schriftart neu und aktualisiert dann mein .sass, um eine Klasse für das Icon basierend auf dem Dateinamen einzufügen (sowohl echte Klassen als auch Platzhalter für einfache Nutzung). Sehr schick, sehr einfach.
Nicht, dass ich mich nicht sehr auf die Ära der SVG-Sprites freuen würde.
Toller Beitrag Chris :)
Ich stimme @Mick zu: Es wäre interessant, die Rendering-Leistung in den Vergleich einzubeziehen. Es ist eine Weile her, seit ich Inline-SVG selbst verwendet habe, aber damals machte die schreckliche Rendering-Leistung in einigen Browsern es zu einem Showstopper.
Ich muss der Einschätzung zur "Benutzerfreundlichkeit" widersprechen – ich habe gelernt, wie man Icon Fonts in etwa einer Stunde benutzt, aber SVG scheint eine viel steilere Lernkurve zu haben. Ich habe versucht, Tutorials zu befolgen, aber so viele scheinen mit "eine Datei in Illustrator bearbeiten" oder "Grunt zum Laufen bringen" zu beginnen – beides weiß ich noch nicht, wie man es macht.
Zweifellos sehr lohnenswert zu lernen und es steht definitiv auf meiner Liste, aber ich wollte nur für einen Neuling wie mich darauf hinweisen, dass es viel mehr Unterstützung für vorgefertigte Icon Fonts gibt, wenn alles, was ich tun möchte, ist, ein paar Social-Media-Icons, eine Lupe und vielleicht ein oder zwei Sterne einzufügen. :)
Ich benutze Icon Fonts gegenüber Inline-SVGs hauptsächlich, weil es zu einfach ist, Font Awesome in ein Projekt einzufügen und so viele großartige Icons zu bekommen. Für mich ist die Benutzerfreundlichkeit mit Icon Fonts bei Icon Fonts viel besser und Font Awesome (was kostenlos ist) kommt mit vielen großartigen, bereits erstellten Icons, was großartig ist, weil ich Illustrator nicht kann.
Gibt es Bilder von diesen Icons in kleinen Größen gerendert? Dort scheitern die meisten Icon Fonts (und SVG?).
Ich habe versucht, Inline-SVG für ein aktuelles Projekt zu verwenden, aber die Workflow-Komplexität, bei der Look-and-Feel-Aspekte in das Markup integriert sind, war zu groß und in einigen Fällen unmöglich. Icon Fonts haben den Vorteil, dass sie rein in CSS bleiben können und, wenn richtig verwendet, semantisches Markup und Klassen beibehalten. (SVG kann das auch, wenn es als Bild verwendet wird, aber man verliert viele Vorteile.)
Ich habe angefangen, SVG in Projekten zu verwenden und es ist sicherlich ein vielseitiges Medium, das zum Reiz einer Website beiträgt, aber trotzdem war die Browserunterstützung besorgniserregend, aber wichtiger waren die Leistungsprobleme, die mir mehr Sorgen bereiteten. Es ist erheblich langsamer als Icon Fonts, aber ich habe mich entschieden, es trotzdem zu tun. Ich verwende eine SVG-Bibliothek und habe PNG-Fallbacks mit Modernizr.
Ein großer Vorteil von SVG ist die Möglichkeit, CSS für Pfade zu verwenden, mit CSS3-Animationen und einer guten SVG-Bibliothek wie Snap können Sie Ihre SVGs so viel interaktiver gestalten. Ich denke, es ist ein Preis, der es wert ist.
Nichts ist es wert, für langsamere Leistung zu bezahlen.
Lasst uns nicht einfach mit "SVG ist langsamer" um uns werfen – Solche Behauptungen verbreiten sich schnell und können schädlich sein. Wie wäre es mit einigen Testfällen?
Ich habe einen einfachen Vergleich von Inline-SVG-Icons im Vergleich zu einem Font-Icon mit Font Awesome's Icon-Set zusammengestellt.
Jemand, der schlauer ist als ich, kann Tests durchführen, um die Geschwindigkeit von SVG-Icons im Vergleich zu Icon Fonts wirklich zu bewerten...
@Shaw, ich habe noch keine Tests durchgeführt, aber Ihre Demoseite ist großartig, Mann. Ich wollte auch ein paar Dinge kommentieren
Die Icon Fonts werden bei mir in Firefox 29.0 (Win 8.1) nicht geladen. Screenshot hier: http://img845.imageshack.us/img845/5494/g51t.png. Sie laden in Chrome problemlos.
In Ihrem dritten Kommentar, wo Sie sagen: "Jedes Icon hat doppelt so viel Markup wie SVG (<svg viewBox="0 0 34 32" class="fa fa-glass"><use xlink:href="#fa-glass"></use></svg>) im Vergleich zu Icon Font (<i class="fa fa-glass"></i>)", können die Icon Fonts leicht über die
:beforeund/oder:afterPseudo-Elemente angewendet werden, wodurch das benötigte Markup zur Implementierung von Icon Fonts noch weiter reduziert wird.Ich habe tatsächlich etwas Ähnliches in einer Antwort auf Stack Overflow gepostet, wie man Font Awesome's Icon Fonts verwendet, ohne das
<i>-Element verwenden zu müssen: http://stackoverflow.com/questions/12303533/using-font-awesome-icons-as-bullets/14806308#14806308Auf jeden Fall, nochmals, tolles Werkzeug. Danke!
Ich sehe kein Problem bei der Verwendung von SVG und mit Modernizr einen Fallback auf PNG. Das PNG muss aus Kurven in Illustrator hergestellt werden. Und ja, Icon Fonts sind eine schlechte Praxis.
Wow. SVGs sind großartig für viele Aufgaben, aber Icon Fonts auch. – Es gibt keine *einzige* Lösung für Icons.
Hier ist ein kleines etwas, um den Artikel ein wenig auszugleichen.
Icon Fonts
+ Viel leichter
Wird im Cache gespeichert (ebenso wie verknüpfte SVGs)
Weniger intensiv zu rendern (Subpixel-Rendering für Text ist in Browsern viel ausgereifter)
Übrigens: Es gibt kein Vektor-Rendering, das "nur reiner Vektor" ist. (Fragen Sie mich nicht, warum Safari auf dem Mac Text als Wolken rendert.)
Weniger Unordnung
Weniger Arbeit für mehr Gewinn
Einfacher zu kontrollieren mit weniger Code (gegeben Ihre CSS-Kenntnisse)
Bläht den DOM nicht auf. Inline-SVGs belasten die CSS-Rendering-Engine und die JS-Engine unnötig (um es vorsichtig auszudrücken).
Ich denke, dieses Cage Match war dumm, aber vor allem war es enttäuschend. Ich erwarte mehr von Ihnen.
SVGs sind großartig, aber das sind Icon Fonts auch, und verknüpfte SVGs ebenfalls. Es gibt Anwendungsfälle, in denen alle Dinge glänzen. Inline-SVGs sind bei weitem die schlechteste "einzige Lösung" von den dreien.
Eine Sache, die ich kürzlich bei der Arbeit mit SVG und Icon-Fonts entdeckt habe, ist, dass SVG-Elemente CSS-Übergänge nicht sehr gut verarbeiten, insbesondere wenn sie in
<a>-Tags eingeschlossen sind, die einhttp://-Protokoll haben. Was jedoch seltsam ist, ist, dasshttps://-URLs die Übergänge korrekt funktionieren lassen. Bei Icon-Fonts muss man sich nur um einen einfachencolor-Übergang für Dinge wie:hover-Zustände kümmern.Mir ist aufgefallen, dass CSS-Tricks auf den sozialen Links unten auf dieser Seite Übergänge hat, aber wie bei jedem anderen SVG, das in einem
<a>-Tag eingeschlossen ist, funktionieren sie nicht.Nur zur Info: Firefox hatte bis Version 24 einen Bug, der dazu führte, dass SVGs schlecht aussahen: http://stackoverflow.com/a/11297217/818732
Ich denke, die aktuelle Version (30) ist schlimmer.
Ich habe ein wenig mit SVG herumgespielt – inline und als Sprite. Nun, als Sprite ist es nett, aber der Nachteil der Farben ist ein großer Nachteil. Der einzige Einfluss, den man zur Änderung der „Farbe“ hat, wäre die Deckkraft. Aber um von Rot nach Grün zu wechseln – man muss verschiedene „Elemente“ im Sprite einstellen.
Nun, inline SVG ist für Icons absolut tabu. Für ein Logo… okay, aber für Icons? Es gibt keinen Editor, der einen Artikel schreibt und am Ende einen Button mit einem Pfeil setzen muss, der mit inline SVG beginnt – sorry, nein.