El gran debat: Icon Fonts vs SVG. Quina és la millor opció?

Si volem que la nostra pàgina web tingui icones nítides i que es puguin escalar sense perdre qualitat, tenim dues solucions: les Icon Fonts i els SVG

Tomàs Modroño Tomàs Modroño

0

CSS, Disseny web, Tipografies

banner_post_tmop

En els últims anys, la revolució dels dispositius mòbils ha canviat per complet el paradigma del disseny web. No només en la manera en què es consumeix la informació, sinó en la manera en què aquesta es representa. Buscant, entre altres coses, poc consum de dades i velocitat de càrrega de les pàgines web i apps.

Un dels canvis significatius ha estat la manera de representar les icones, on s’ha passat d’usar imatges de mapes de bits a emprar imatges vectorials.

Els gràfics vectorials són imatges digitals formades per objectes geomètrics independents (segments, polígons, arcs…), on cadascun d’ells tenen definits diferents atributs matemàtics de forma, posició o color. El gran avantatge que tenen, respecte a les imatges de mapa de bits o matricials, és que se’ls pot augmentar la mida sense sofrir pèrdues de qualitat. Per tant es visualitzaran perfectament tant en un dispositiu mòbil com en una pantalla de 40 polsades.

Les opcions vectorials més esteses són les icones tipogràfiques (Icon Fonts) i l’ús dels SVG. Els seus principals avantatges comuns són:

  • Escalabilitat sense perdre qualitat
  • Nitidesa en pantalles retina
  • La reducció dràstica del pes de la imatge (això ha provocat que, per exemple, les Icon Font puguin carregar-se un 14% més ràpid que les de mapes de bits)
  • Facilitat de manipulació via CSS  de moltes propietats: color, mida, degradats, ombres…
  • Són accessibles, ja que es poden llegir perfectament en lectors de pantalla per discapacitats

Tot i això, també tenen alguns inconvenients que han fet que l’elecció d’ús entre una i l’altra causi força controvèrsia entre els dissenyadors. Més endavant es farà una petita comparativa per veure’n els punts forts i dèbils de cadascuna.

Context

Abans d’abordar la qüestió principal, farem una petita contextualització històrica sobre les diferents tècniques d’ús d’icones en el món web i així entendrem millor el debat actual.

A mitjans dels 90, quan els navegadors encara no oferien gaire suport al CSS, les icones es gestionaven a partir del clàssic tag  <img>. Això suposava crear una imatge per cada icona de la pàgina, comportant que als sites amb moltes icones hi hagués una autèntica allau de peticions HTTP. A més a més, si es volia aplicar un efecte  :hover , s’havia de carregar una segona imatge via Javascript.

Per sort, la tecnologia va anar millorant i va aparèixer la tècnica dels CSS Sprites. Que consisteix en agrupar totes les icones en un únic fitxer transparent (GIF o PNG) i aplicar-lo al fons d’un element en qüestió via la propietat CSS,  background-image, per després ajustar-li la posició via  background-position.

Aquesta tècnica, que encara s’utilitza correctament en moltes webs, té el gran avantatge que en agrupar totes les icones (incloent-hi les de  :hover) en un sol fitxer, suposa una reducció significativa de les peticions HTTP al servidor.

See the Pen CSS sprites example by Massimo Cassandro (@massimo-cassandro) on CodePen.

(Exemple bàsic de CSS Sprites per Massimo Cassandro (@massimo-cassandro) on CodePen.)

Tot i que els CSS Sprites van suposar un gran avenç, no deixen de ser imatges de mapes de bits. Per tant, si el que es vol és representar la mateixa icona en diferents colors o resolucions, es necessitarien diferents imatges per a cada versió. Aquesta problemàtica es va solucionar amb les Icon Fonts.

Icon fonts

Les Icon fonts són simplement tipografies, que en lloc de contenir lletres i números, contenen símbols. La facilitat en què es poden estilar fàcilment via CSS, tal com es fa amb un simple text, ha fet que es converteixin en una solució molt popular entre els dissenyadors web.
Tots aquests avantatges i el fet d’aglutinar els principals pictogrames d’ús més freqüent en el disseny de UI’s, han provocat que sorgeixin incomptables llibreries d’Icon fonts. A continuació es llisten algunes de les més importants:

Llibreries d’icones pre-creades

  • Font Awesome (Gratis)
    Font Awesome és una font que conté una única col·lecció de 675 icones (versió 4.7.0). Concebuda originalment per treballar amb Twitter Bootstrap, s’integra a la perfecció en diferents frameworks. És open source i de llicència SIL OFL, per tant és completament gratuïta.
    La seva varietat d’icones, efectes d’animació i capacitat d’integració amb altres elements de la UI (formularis, botons, panells…) l’han convertit probablement en la llibreria més famosa.
fontawesome
  • Entypo (Gratis)
    Entypo és una altra molt bona font gratuïta que compta amb més de 400 pictogrames.
Entypo
Fontello
We Love Icons
  • Foundation Icon Fonts (Gratis)
    A l’igual que Font Awesome és la font concebuda per Bootstrap, Foundation Icon Fonts 3 és la font que s’integra en el famós responsive framework Foundation. A més, funciona perfectament en altres entorns.
Foundations Icon Fonts 3
  • Pictos (De 49$ a 355$)
    Espectacular col·lecció amb unes 800 icones d’alta qualitat. Ofereixen diferents packs amb moltes variacions de disseny: icones sòlides, amb línia exterior i en colors.
Pictos

Creació de llibreries custom

Totes les llibreries anteriors són genials i ens ofereixen un enorme ventall de possibilitats. Però a vegades succeeix que volem il·lustrar un concepte o idea que no apareix en cap d’elles. És per això que necessitarem crear la nostra pròpia custom Icon Font.

Tal i com havia explicat l’Ana Contreras en un article sobre la creació de Icon Fonts, el procés resumit de generació és el següent:

  • Simplement hem de crear les nostres icones en algun programa d’edició vectorial com Sketch, Adobe Illustrator o CorelDraw.
  • Ens hem d’assegurar que els traços dels objectes estan expandits i no tenen màscares ni efectes.
  • La mida en què dibuixem la icona sobre la taula de treball ha de ser prou gran.
  • Exportem la icona a .SVG, un format vectorial.
  • Utilitzem una de les múltiples eines on-line que permeten crear Icon Fonts a partir de custom SVG’s. Algunes de les més utilitzades són:

SVG fonts

Finalment, ens topem amb el SVG! L’SVG, sigles de Scalable Vector Graphics, va ser creat per cobrir la necessitat d’estandardització dels gràfics vectorials per a la Web. Està basat en XML i descriu gràfics bidimensionals, tant estàtics com dinàmics.

Com hem vist, les icon fonts són molt pràctiques i versàtils. Però amb l’arribada de l’HTML5, es va introduir una altra manera d’usar icones a les pàgines web: les SVG fonts.

Tal com detalla Massimo Cassandro en el seu article ‘Build your Own SVG Icons’, existeixen moltes maneres d’afegir les icones SVG als nostres projectes web. En resum, les principals són les següents:

  • Emprant el tag  <img>: solució bàsica en què, tal com fem en altres formats d’imatge, cridem una imatge SVG aïllada en línia o bé un conjunt d’elles per usar-les com a sprite.

See the Pen SVG embedding methods by Massimo Cassandro (@massimo-cassandro) on CodePen.

(SVG embedding methods per Massimo Cassandro (@massimo-cassandro) on CodePen.)

  • Amb l’ajuda de Grumpicon : és una eina de Filament Group que processa fitxers SVG per a generar una solució cross-browser molt fàcil d’integrar al nostre projecte.

See the Pen Grumpicon demo by Massimo Cassandro (@massimo-cassandro) on CodePen.

(Grumpicon demo per Massimo Cassandro (@massimo-cassandro) on CodePen.)

  • Usant els tags SVG  <defs> i <symbol>S’utilitza el tag com un wrapper on cada icona es defineix dins d’un tag <defs> i <symbol>.<svg>
    <defs>
    <g id="icon1">
    <!-- icon shape here -->
    </g>
    </defs>
    <symbol id="icon2" viewBox="0 0 100 100">
    <!-- icon shape here -->
    </symbol>
    </svg>

Les icones es mostren mitjançant el tag <use>:
<svg viewBox="0 0 100 100">
<use xlink:href="#icon1" />
</svg>
<svg>
<use xlink:href="#icon2" />
</svg>

Comparativa

Una vegada hem conegut els dos grans protagonistes d’aquest debat, Icon Fonts vs SVG, podem comparar-los segons diferents atributs:

  • Nitidesa:
    • Icon font: els navegadors els consideren text, per tant són suavitzats (anti-aliased) i a vegades no es veuen tan nítids.
    • SVG: es veuen perfecte. Nítid com un vector.
  • Mida:
    • Icon font: els fitxers de fonts (ex. TTF) són binaris, per tant tenen una mida més reduïda.
    • SVG:  basats en XML, pesen més.
  • Control del CSS:
    • Icon font:  pots controlar amb CSS la seva mida, color, ombres, rotacions… Però són monocolor.
    • SVG: pots controlar amb CSS els mateixos atributs, com si es tractés d’una font, però a part pots estilar parts individuals de la icona, obtenint per exemple una icona multicolor.
  • Posicionament:
    • Icon font:  en estar inserits via pseudo-elements, depèn de propietats pròpies dels textos, com el line-height, vertical-align, letter-spacing, word-sapcing... Això pot comportar força problemes.
    • SVG: simplement se’ls hi aplica la mida que realment tenen.
  • Navegadors:
    • Icon font: estan suportats per tots els navegadors, inclús IE6!
    • SVG: suport acceptable, però mostra alguns problemes en IE8 i Android 2.3.
  • Semàntica:
    • Icon font: el fet d’introduir la icona via pseudo-element en un buit, no és molt semàntic.
    • SVG: la semàntica d’un <svg> diu: “sóc una imatge”.
  • Accessibilitat:
    • Icon font: has de ser molt curós per assegurar l’accessibilitat.
    • SVG: el fet d’haver introduït atributs com <title> i <desc> els converteixen en molt accessibles.

Conclusions

Per concloure, i tenint en compte tot el que s’ha detallat anteriorment, reprenem la pregunta que genera aquest debat: quina opció és millor, les Icon fonts o SVG?

Com sempre, la resposta és: “Depèn del cas!”. Probablement, el més recomanable seria considerar tots els punts detallats a la comparativa i veure quina opció s’ajusta més en el nostre projecte. D’una banda, es pot dir que l’SVG  és completíssim, ja que gairebé supera en tot als Icon Fonts. Aquest fet provoca que la majoria de dissenyadors web es decanti per aquesta opció. Però si el que busquem és una solució completament cross-browser, lleugera i que tingui l’avantatge de disposar de centenars d’icones precreades que són fàcilment integrables, els Icon Fonts són la millor solució.

Moltes gràcies per llegir-nos!

Fonts

https://css-tricks.com/icon-fonts-vs-svg/

http://blog.pictonic.co/post/32869817328/svgs-are-cool-but-icon-fonts-are-just-10-of

https://www.sitepoint.com/icon-fonts-vs-svg-debate/

https://css-tricks.com/svg-symbol-good-choice-icons/

https://www.sitepoint.com/build-svg-icons/

https://www.sitepoint.com/introduction-icon-fonts-font-awesome-icomoon/

http://ianfeather.co.uk/ten-reasons-we-switched-from-an-icon-font-to-svg/

http://nimbupani.com/about-fonts-in-svg.html

http://thenextweb.com/dd/2012/10/12/7-gorgeous-icon-fonts-to-speed-up-your-site-and-your-design-process/

https://sarasoueidan.com/blog/icon-fonts-to-svg/

https://css-tricks.com/examples/IconFont/

Tomàs Modroño Tomàs Modroño

0

CSS, Disseny web, Tipografies

L'adreça electrònica no es publicarà Els camps necessaris estan marcats amb *