Font Awesome o icone svg?

giovanni.bertagna

Font Awesome o icone svg?

Sto personalizzando il blog inserendo qualche snippet html in cui utilizzo anche Font Awesome.

Mi è venuto il dubbio se non è meglio utilizzare icone SVG, al posto delle icone di Font Awesome, così da migliorare le prestazioni del blog.

Le icone presenti in un articolo saranno al massimo due o tre e il blog è su piattaforma #Ghost.

makkis001

@giovanni-bertagna Ho avuto lo stesso problema ed ho deciso di usare icone SVG, anzi in un caso specifico (dovendo usare solo 3 immagini) ho sostituito tutto con un jpg. Ho ritenuto inutile caricare un'intera libreria per usare solo poche icone.

shazarak

@seowebcoach mmm chiamate per le icone svg?
a me risulta che non fai proprio nessuna chiamata, è una riga di caratteri dentro l'html o css che ti "disegna" l'icona...

certo che se si usano le svg come fossero dei media/immagini puo anche fare una "chiamata"..ma mi chiedo che senso abbia...

poi, 1 chiamata al posto di 3 ? forse un problema del genere lo hai se usi protocolli http, ma in http/2 il problema non esiste più da un po di tempo..

come per le chiamate ai .js e .css che tanti continuano ad aggregare in un file unico ( piu pesante e pieno di codice inutilizzato)

shazarak

@seowebcoach si ma le svg non si scaricano, forse immagini che le svg siano immagini da scaricare ma non è cosi
guarda qua
https://undraw.co/illustrations
non c'è nessuna immagine da scaricare quindi nessuna chiamata

shazarak

@seowebcoach

non è che ti sei perso qualcosa... in pratica tu parti dal presupposto di usare una svg come se fosse una immagine da fornire con src nel tag img

io invece la uso col tag <svg> percui li dentro gli elenchi tutti i path e poligoni ecc da disegnare per avere il risultato sperato

questo, a mio avviso ti da diversi vantaggi:

non gestisci grandezze e risoluzioni in css senza problemi
non è una risorsa da "chiamare"
non devi attivare il supporto svg di wordpress per caricare l'svg nel media, o non devi caricarlo in ftp ( ma qui non sono aggiornatissimo magari ora c'e' pieno supporto boh)
hai la massima velocità di caricamento della pagina bla bla giassai

poi è ovvio che se devi usare una immagine complessa in <svg> ti crea un html lungo , ma che ti frega dico io?hihi

se invece si parla di icone tipo quelle sociali, o tipo la home, indirizzi ecc, allora secondo me ti diventa mooolto piu facile e veloce da gestire

giovanni.bertagna

@seowebcoach @shazarak Ringrazio entrambi per le info che mi avete dato.

L'uso che ne faccio è per piccole icone come quella di Twitter (ho creato una sorta di click to tweet) o la freccia verso l'alto per tornare all'inizio pagina. Su #Ghost non si hanno plugin come in #WordPress perciò creo dei frammenti di codice che inserisco al bisogno.

Pensavo di sostituire queste icone con il tag <SVG> e il codice dell'icona visto che sono relativamente brevi (vedasi le icone svg di bootstrap), così non devo caricare Font Awesome.

Faccio una prova, ma leggendovi sono più orientato per l'utilizzo di icone SVG.

shazarak

@seowebcoach secondo me hai letto un altro post e scritto qui qualcosa che non c’entra nulla

Il titolo é font awesome o svg
Non come scarico una icona in sprite
Quindi a mio avviso sei completamente fuori contenuto

In più non credo proprio che tu abbia idea di cosa siano le svg o di come usarle e che tua sia rimasto ai tempi della preistoria con le immagini sprite… si parla di tecniche di dieci anni fa…
Forse é il caso che ti aggiorno un po’ no?…

shazarak

@giovanni-bertagna ecco esatto

shazarak

@seowebcoach allora caso signor Seo Web Coach, forse sei straniero e non conosci l'italiano, quindi ti scuso se non sei riuscito fin dall'inizio a comprendere il testo scritto da me.

detto cio, non mi pare di averti dato dell'idiota, mi pare di aver scritto una mia opinione riguardo le tue conoscenze su questo argomento. quindi è completamente e unicamente cordiale il tono di scrittura che ho usato. a differenza tua

se devi fare il bambino che se la prende perche qualcuno ha una opinione diversa dalla tua, è un tuo problema
forse non sei in grado ( altra opinione) di accettare il fatto che un'altra persona possa saperne una virgola, non un mare, più di te nel caso specifico, e non in generale.

quindi è inutile che metti le faccine prima di sparare frasi finte e inutili.

fatta la premessa: ti elenco un po di fatti, scritti qua sopra, non opinioni.

il titolo di questo post è: " font awseome o icone svg" punto. quindi una risposta in senso stretto è riguardante i font o le svg. tu sei uscito con idee tue personali proponendo uan terza opzione con una immagine. io ho spiegato perche meglio le svg.
hai parlato di chiamate/download, ti esorto ad andare in cerca di blog di persone veramente esperte, italiani o meno, che in cui spiegano bene come funziona il protocollo http/2, i relativi vantaggi, o se gli sprite in jpg o png siano realmente utili o meno al giorno d'oggi
il fatto che tu abbia anche solo pensato, istintivamente, di usare le svg come se fossero immagini da usare in tag img, denota ancora una volta che non ha la piu pallida idea di cosa sono le svg ne di come sono fatte. nel del perche si usano i tracciati xml e i path ecc.
e qui arriva lo strike pieno. Giovanni scrive nel tuo topic " cosi da migliorare le prestazioni.."
e tu gli consigli di creare una immagine sprite con relativo css? e sarebbe un aumento di prestazione rispetto ad una icona svg con xml???
questo definisce e conferma che non solo non hai letto le richieste di Giovanni, ma che hai solo sparato la prima cosa che ti è venuta in mente
se una persona parta di Font Awesome, che fa icone piccole, social, brand, ecc e di SVG, parla poi di solo due o tre icone, su un blog, cosa vuoi che siano? era palese che parlava delle icone sociali, o di sharing, o di follow.

quello che tu non hai capito evidentemente è il fatto che Giovanni supponeva di dover caricare tutta la libreria font awesome(cosa che invece si potrebbe evitare) in contrapposizione ad usare solo 3 svg, il tutto legato all'aumento delle performance.
se ci avessi pensato meglio prima di sparare la tua opinione, avresti forse capito che l'intendo di Giovanni, sarebbe quello di sostituire tutta una serie di icone che normalmente , ad esempio con i schifo-temi di wordpress, ti caricano 5 diverse librerie di font per icone per visualizzare solo 3 icone quando basta usare le <svg>, qualcuno potrebbe chiamarla seo tecnica? on-site seo? ottimizzazione seo ? bla bla bla.
serve o non serve? non importa, è quello che è chiesto Giovanni, vuoi andare oltre alla richiesta? chiedigli se è certo che gli cambi qualcosa se cambia solo 3 icone o meno... è sicuramente piu di aiuto che la tua serie di risposte

nelle tue risposte parli di "io avevo capito che voleva incorporare immagini svg " ah si? e dove lo avresti capito? ci spieghi con parole tue, dal post di Giovanni quali parole te lo hanno fatto capire? con quale fantasia? ti racconti anche le favole? poco credibile. sembra solo che ti stai arrampicando sui vetri
scrivi "e per chiamate intendo download dell'elemento" perche se no cosa sarebbero? il sito che ti chiama sul cellulare? forse dimentichi che il tuo browser quindi digiti il sito che vuoi visualizzare fa x numero di chiamate, e per ognuna fa il download della risorsa richiesta... è cosi che funziona il web, a meno che ieri non hanno confutato il tutto e non mi sono ancora aggiornato, allora chiedo venia.
nella tua risposta che inizia con "scusa ma non ti seguo piu" , sei tu che alla fine hai fatto una domanda , io ti ho solo risposto
quindi
che tu venga a scrivere che si parla di altro fuori topic, è incredibile, perche sei tu che hai cambiato argomento e ti sei messo a parlare del fatto che non hai idea di come funzionano le svg

morale:
hai fatto solo sprecare del gran tempo a tutti quanti, quando potevi limitarti a fare silenzio e non uscirtene con frasi infelici, sbagliate, e sopratutto inutili.

è chiaro il concetto?
riguardo il tuo "dovrò ricordarmente"... si esatto, dovresti ricordarti che se ignori qualcosa è meglio che fai silenzio invece che venire a scavarti la fossa, perche la figura di cacca la fai solo tu non io...perche a me di quello che pensi tu o tutti gli altri non interessa, ma sopratutto non mi offendo di certo se una persona che non conosco pensa che io ignoro qualcosa.

shazarak

@seowebcoach ti ho scritto per dimostrare che qui l'unico che ha toni sbagliati sei tu, non io.
sei tu che non sei in grado di sostenere una conversazione ma sopratutto di ammettere che ignori qualcosa, e per coprire la tua mancanza ora la dipingi come "potro scrivere anche cagate?"

caro mio, come tu puoi scrivere tutte le "cagate" che desideri ( parole tue, ma io non la penso cosi) io posso scrivere tutte le opinioni che voglio.

qui sei tu che non sei in grado di accettare il fatto che qualcuno ti abbia scritto "non credo proprio che tu abbia idea di cosa siano le svg "

te lo traduco in italiano piu leggibile: IO sono della opinione che TU non sappia cosa siano le svg

quale tono aggressivo ci sarebbe?

dove mancherebbe la cordialità?

"forse è il caso che ti aggiorni un po"
ti scrivo anche questo in italiano piu comprensibile
IO sono della opinione che TU necessiti di aggiornarti di piu riguardo l'utilizzo delle svg

dove sta l'aggressività?
dove manca la cordialità?

allora qui il problema non sono io, ma sei soltanto tu che NON dovresti mai in nessun caso frequentare le community, ne tantomeno scrivere qualsiasi cosa, perche scripta manent, dimostri di non essere in grado di accettare nulla, nemmeno una opinione diversa dalla tua, e ti arrampichi sui vetri inventandoti pure cose che non esistono.

il fatto che tu possa anche solo pensare che scrivere " se devi fare il bambino" sia una frase aggressiva, conferma quanto detto sopra.

riguardo allo starmi sul organo genitale maschile ( è abbastanza non aggressivo) a me non interessa ne chi sei, ne cosa hai fatto finora, ne cosa farai, ne tanto meno cosa penserai di me in futuro. per quale motivo dovresti starmi la sopra i cosi?

sai quale è la differenza tra me e te qua dentro?

è semplice, che quando a me hanno detto che avevo sbagliato a scrivere la tal cosa X, sono andato a studiarmela, per due giorni. per capire perche la avevo sbagliata, cosa mi mancava e ho imparato che era vero che avevo sbagliato a scriverla.

tu invece , si legge sopra cosa fai. quindi chi è quello di troppo dentro una community ? la risposta è piuttosto ovvia
ciao

juanin

Se vuoi usare una libreria per icon fonts solo per poche icone puoi fare Font Subsetting.

Se vuoi usare immagini vanno bene sia SVG che WEBP/JPG o altre via picture o tramite dynamic serving. Se non sono visibili subito mettendoli in lazy loading avrai impatto zero.

Le soluzioni sono varie e con tutte puoi ottenere impatti minimi sulle performance se implementi nel modo giusto.

Io personalmente dovessi scegliere andrei su 3 immagini di qualsiasi formato perché tra lazy e h2 l'impatto è sostanzialmente zero. Poi se ti serve roba vettoriale vai con SVG (che puoi metterlo inline o come caricamento esterno).