Icon-Fonts boomen. Sie bringen Vektor-Grafiken innerhalb von Webseiten und Applikationen auf Desktop Computer und Mobile Geräte, lassen sich einfach verwenden und können nahtlos in CSS Frameworks wie Bootstrap integriert werden. SVGs dagegen lassen sich individuell einfärben und werden vom Browser als tatsächliches „Bild“ (anstelle von „Text“) erkannt und dargestellt.

Die Qual der Wahl

Natürlich kann man nicht pauschal sagen welche der beiden Optionen besser ist – schließlich kommt es (wie immer) darauf an wofür ihr die Grafiken benötigt!
Möchtet ihr nur wenige Icons für eure kunterbunte Hauptnavigation haben, dürften die Antwort sicherlich „SVG“ lauten. Wenn man nur wenige Grafiken braucht sollte man überlegen ob eine Icon Font (mit meist mehreren hundert Icons) Sinnvoll ist.

Möchtet ihr die Icons allerdings als solche nutzen (wie in diesem Beispiel von Font Awesome), dürfte die „Font“ für euch sinnvoller sein.

Font-Icons im Code einbinden

Aber fangen wir mal bei null an. Die Integration in eure Webseite oder Applikation startet bei Icon-Fonts mit einer wichtigen Voraussetzung: Wir brauchen mehrere Formate damit die Fonts in allen Browsern und Betriebssystemen dargestellt werden können. Wie ich vor zwei Jahren schon mal geschrieben habe benötigen wir mehrere Font-Dateien EOT, WOFF, TTF und SVG… (Siehe da: selbst wenn wir eine Icon-Font verwenden müssen wir in den meisten Fällen eine SVG als Fallback einbinden). Im CSS sieht das z.B. so aus (Beispiel aus Font Awesome):

@font-face {
   font-family:'FontAwesome';
   src:url('../fonts/fontawesome-webfont.eot?v=4.3.0');
   src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'),
      url('../fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'),
      url('../fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'),
      url('../fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'),
      url('../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
      font-weight:normal;
      font-style:normal;
}

.fa {
   display:inline-block;
   font:normal normal normal 14px/1 FontAwesome;
   font-size:inherit;
   text-rendering:auto;
   -webkit-font-smoothing:antialiased;
   -moz-osx-font-smoothing:grayscale;
   transform:translate(0, 0);
}

Es reicht also nicht die Font „einfach nur einzubinden“… Wir müssen diese zusätzlich noch normalisieren und für die Browser vorbereiten (text-rendering, smoothing, transform).

Sofern wir kein CDN verwenden könnte der initiale Aufwand also recht hoch ausfallen.
Ansonsten dürfte das hier ausreichen:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

Im Code werden die Icons dann folgendermaßen verwendet:

<i class="fa fa-heart"></i>

Und das wars dann auch schon – CSS Frameworks wie Bootstrap sorgen dafür das die Icons anständig positioniert werden und den Textfluss nicht durcheinander bringen.

SVGs im Code einbinden

Hier haben wir mehrere Optionen (Bei mediaevent.de zeigt man direkt sieben Möglichkeiten auf) doch ich persönlich benutze, wenn überhaupt, nur inline SVG. Dadurch landet das SVG nämlich im DOM Kontext und lässt sich von Javascript Bibliotheken wie jQuery, MooTools und Prototype erfassen, mit Events ausstatten und auch animieren. Dieser Code repräsentiert das „Herz“ Icon aus Font Awesome:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="20" height="20" viewBox="0 0 100 100">
   <g transform="translate(5,80) scale(0.05,-0.05)">
      <path d="M0 940q0 220 127 344t351 124q62 0 126.5 -21.5t120 -58t95.5 -68.5t76 -68q36 36 76 68t95.5 68.5t120 58t126.5 21.5q224 0 351 -124t127 -344q0 -221 -229 -450l-623 -600q-18 -18 -44 -18t-44 18l-624 602q-10 8 -27.5 26t-55.5 65.5t-68 97.5t-53.5 121t-23.5 138z" />
   </g>
</svg>

Außerdem lassen sich die SVGs dann auch per CSS stylen…

Pro und Kontra

Kommen wir zu den etwas interessanteren Aspekten… Die Vor- und Nachteile der beiden Kontrahenten.

	SVG	Font
Erkennung im Browser	Wird als Grafik erkannt und dargestellt	Wird als Text erkannt und wird ggf. von Anti-Aliasing beeinflusst. Mehrere (Font-) Dateien notwendig
Einbettung im Code	Ein SVG lässt sich bequem per img einbinden. Inline SVGs ufern leider schnell aus und machen den Quellcode ggf. unübersichtlich.	Ein beliebiges Element wird mit Hilfe von CSS Klassen zum Icon, z.B. <i class="fa fa-heart"></i>
Darstellung	Immer gestochen scharf	Kann unter Umständen durch halbe Pixel Verschiebung „unscharf“ wirken
CSS Styling	Ja, inklusive SVG spezifischen Styles	Ja, im Rahmen von Text-Styling. Fonts selbst sind immer einfarbig.
Interaktion	Sehr gut! Jedes Element innerhalb eines SVGs kann mit Javascript angesteuert werden	Gut
Positionierung	Wie ein normales img Element	Icon Fonts werden mit Hilfe von Pseudo-Elementen positioniert, welche abhängig von verschiedenen Stylings sind (line-height, vertical-align, letter-spacing, …)
Semantik	Das SVG wird wie ein Bild erkannt	Das Icon wird als Text erkannt und in einem (üblicherweise) leeren span (o.Ä.) verwendet
Browser Support	Problematisch bei älteren Internet Explorern (<= 8) und Android Browsern (<= 2.3) - ansonsten gut	Sehr gut, selbst im Internet Explorer 6
Performance	SVGs sind für gewöhnlich größer als Fonts, selbst wenn diese komprimiert sind	Sehr gut! Font Dateien sind klein und werden von Browsern gecached

Einige der Punkte habe ich von css-tricks.com übernommen bzw. frei übersetzt.

Ich selbst benutze zwar sehr gerne Icon Fonts wie z.B. Font Awesome, doch wenn es sich anbietet werde ich auf SVGs umsteigen. Einerseits um etwas mehr praktische Erfahrung damit zu sammeln und andererseits um schicke Animationen einzubauen… Sofern ich es als „nicht-Designer“ hinbekomme 😉

Durch den Aufbau von SVGs ist es übrigens super einfach eine Grafik in den eigenen Farben darzustellen. Ich selbst habe vor kurzem erst small-n-flat gefunden und bin überaus begeistert von den schönen Icons – die verwendete Farbpalette kommt dem ein- oder anderen sicherlich auch bekannt vor!

Und mit diesen Worten verabschiede ich mich von euch – ich wünsche euch eine angenehme Woche und schöne Pfingsten! Bis zum nächsten Eintrag wünsche ich euch außerdem Happy Coding!