Cambiare il colore delle icone SVG in Elementor

Video passo dopo passo

Cos’è un file SVG?

Scalable Vector Graphics (SVG) è un formato di file vettoriale adatto al web. A differenza dei file raster basati su pixel come i JPEG, i file vettoriali memorizzano le immagini attraverso formule matematiche basate su punti e linee su una griglia. Questo significa che i file vettoriali come gli SVG possono essere ridimensionati in modo significativo senza perdere nulla della loro qualità, il che li rende ideali per loghi e grafiche complesse online.

La dimensione di un file SVG dipende dalla quantità di dati immagine che contiene, ma generalmente è inferiore rispetto alla maggior parte degli altri tipi di file. Le grafiche complesse con molti tracciati e punti di ancoraggio occuperanno più spazio di archiviazione rispetto ai design più semplici e puliti.

Non sono solo le loro capacità di ridimensionamento a rendere gli SVG molto popolari tra i web designer. Gli SVG sono scritti in codice XML, il che significa che memorizzano qualsiasi informazione testuale come testo letterale invece che come forme. Questo permette ai motori di ricerca come Google di leggere le grafiche SVG per le loro parole chiave, il che può potenzialmente aiutare un sito web a salire nelle classifiche di ricerca.

Puoi riconoscere facilmente un file SVG dalla sua estensione .svg.

Storia del file SVG

La storia del file SVG risale alla fine degli anni ’90, quando il World Wide Web Consortium (W3C) invitò gli sviluppatori a presentare proposte per un nuovo tipo di formato grafico vettoriale. Furono presentate sei proposte in competizione che contribuirono a definire quello che alla fine divenne il formato SVG del W3C.

Gli SVG impiegarono del tempo per crescere in popolarità. Ci fu relativamente poco supporto per loro fino al 2017, quando le persone iniziarono a vedere i vantaggi dell’uso degli SVG nei browser web moderni. I file SVG sono ora ampiamente utilizzati per le immagini dei siti web in 2D perché la maggior parte dei browser e delle applicazioni di disegno per file vettoriali può gestirli facilmente.

A cosa servono i file SVG?

Le grafiche vettoriali scalabili hanno fatto molta strada negli ultimi anni, ma a cosa servono gli SVG nella pratica?

Icone e loghi del sito web

I designer usano spesso gli SVG per visualizzare icone di siti web come pulsanti, così come loghi aziendali. La capacità di questo tipo di file di scalare verso l’alto o verso il basso senza compromettere la qualità significa che sono ideali per grafiche che devono apparire in più luoghi e in una varietà di dimensioni.

Infografiche e illustrazioni

Grazie all’uso di XML all’interno dei file SVG, i motori di ricerca come Google possono leggere tabelle e grafici con molto testo, il che può aiutare con l’ottimizzazione per i motori di ricerca. Poiché Google può rilevare parole chiave all’interno degli SVG, può potenzialmente spingere una pagina web a una posizione più alta nei risultati di ricerca. Inoltre, per rendere le pagine web molto più interessanti, gli SVG supportano anche l’animazione.

Pro e contro dei file SVG

Vale la pena esaminare i vantaggi e gli svantaggi degli SVG prima di salvare le tue immagini in questo formato di file.

Vantaggi dei file SVG

• A differenza dei file raster, che sono composti da pixel, le grafiche vettoriali come gli SVG mantengono sempre la loro risoluzione, indipendentemente da quanto grandi o piccoli li rendi. Non devi preoccuparti che le immagini SVG perdano la loro qualità in determinati browser o quando le ridimensioni per farle apparire in luoghi diversi.
• I file SVG di base sono generalmente più piccoli delle immagini rasterizzate, che sono create da molti pixel colorati invece di usare algoritmi matematici.
• Poiché i file SVG trattano il testo come testo (e non come design), i lettori di schermo possono scansionare qualsiasi parola contenuta nelle immagini SVG. Questo è molto utile per le persone che hanno bisogno di aiuto per leggere le pagine web. Anche i motori di ricerca possono leggere e indicizzare il testo delle immagini SVG.

Svantaggi dei file SVG

• I file SVG sono eccellenti per grafiche web come loghi, illustrazioni e grafici. Ma la loro mancanza di pixel rende difficile la visualizzazione di fotografie digitali di alta qualità. I file JPEG sono generalmente migliori per fotografie dettagliate.
• Solo i browser moderni possono supportare le immagini SVG. Potresti trovare difficile usare i file SVG con Internet Explorer 8 e altri browser più vecchi.
• Il codice contenuto nelle immagini SVG può essere difficile da capire se sei nuovo al loro formato di file.

Come aggiungere un’immagine SVG con Elementor

Ci sono molti widget di Elementor che ci permettono di caricare immagini o icone in formato SVG. Possiamo caricare questo tipo di file dalla galleria multimediale senza alcun tipo di restrizione, ma se vogliamo farlo dal costruttore di Elementor dobbiamo prima abilitare la capacità di Elementor di caricare questo tipo di file.

Consenti il caricamento di file non filtrati

Questa finestra pop-up apparirà quando fai clic sul pulsante Carica SVG incluso in alcuni widget che usano icone.

La prima volta che tenterai di caricare un’icona SVG, ti verrà presentato un messaggio di avviso per avvisarti che il caricamento di qualsiasi file, inclusi i file SVG, può presentare un potenziale rischio per la sicurezza. Se comprendi i rischi coinvolti e accetti di continuare, fai clic sul pulsante Attiva.

Questo file non è consentito per motivi di sicurezza

Vedrai questo messaggio quando tenterai di caricare un file SVG dal widget Immagine o da un altro widget che non sia espressamente per caricare icone SVG.

Puoi risolverlo dalla pagina Elementor > Impostazioni.

1. Fai clic sulla scheda Avanzate.
2. In Consenti il caricamento di file non filtrati seleziona Attiva nel menu a discesa.
3. Fai clic sul pulsante Salva modifiche.

Cambiare il colore di un’icona SVG

In questo tutorial userò il software Adobe Illustrator per creare o modificare file SVG. Affinché possiamo cambiare il colore di un’icona SVG dal costruttore di Elementor, deve essere soddisfatto quanto segue:

• Dobbiamo riempire con il colore #000000 (è il colore nero in formato esadecimale) il totale o la parte dell’icona che vogliamo che cambi dal costruttore di Elementor.

• In Adobe Illustrator possiamo assegnare il colore del tratto (bordo) e il colore di riempimento. Elementor cambierà solo il colore di riempimento, quindi è meglio non assegnare il colore del tratto all’icona e lasciare solo il colore di riempimento.

• Quando salviamo il file in formato SVG, Adobe Illustrator ci mostrerà una finestra di opzioni SVG. In questa finestra dobbiamo assicurarci che nella sezione Opzioni avanzate il selettore Proprietà CSS: abbia selezionata l’opzione Attributi di presentazione.

Dove usare la nostra icona nel costruttore di Elementor

Una volta creata la nostra icona seguendo le linee guida precedenti, possiamo usarla nel costruttore di Elementor in tutti questi widget:

• BASE
  • Pulsante
  • Separatore
  • Icona
• PRO
  • Modulo
  • Menu di navigazione
  • Punto caldo
  • Flip box
  • Call to Action
  • Recensioni
  • Indice
  • Playlist video
  • Pulsante PayPal
  • Pulsante Stripe
• GENERALE
  • Casella icona
  • Elenco di icone
  • Fisarmonica
  • Interruttore
  • Icone social
• SINGOLO
  • Informazioni post

Possiamo anche usarlo come Logo del sito e in altri widget come Immagine, ma senza la capacità di cambiare il colore da Elementor.

Link di interesse

• Iconfinder: https://www.iconfinder.com/ (Scarica icone in formato SVG).
• IcoMoon: https://icomoon.io/ (Crea la tua galleria di icone in formato .ico).
• Dribbble: https://dribbble.com/ (Più di 10.000 icone gratuite).
• Iconmonstr: https://iconmonstr.com/ (icone in bianco e nero con molteplici variazioni completamente gratuite).
• DevianArt: https://www.deviantart.com/ (Più di 200.000 icone gratuite).
• Fontello: https://fontello.com/ (Migliaia di icone monocromatiche gratuite in varie dimensioni e formati)
• Adobe Illustrator: https://www.adobe.com/it/products/illustrator.html (Software di grafica vettoriale).
• 1000 free Downloads: https://www.1001freedownloads.com/ (Più di 1001 download gratuiti).
• CSS Author: https://cssauthor.com/ (Centinaia dei migliori set di icone gratuite in vari formati).
• GraphicBurger: https://graphicburger.com/ (Set di icone tematiche gratuite).
• Flaticon: https://www.flaticon.com/ (Permette di convertire le icone in font scaricabili per controllarli in CSS).
• Icons8: https://icons8.com/ (più di 350.000 icone professionali gratuite).
• Freepik: https://www.freepik.com/ (Più di 872.000 di queste risorse sono icone gratuite).
• Font Awesome: https://fontawesome.com/ (Ha più di 14.000 icone).
• Good Stuff No Nonsense: https://goodstuffnononsense.com/ (Icone disegnate a mano gratuite in SVG, PNG, AI, EPS e PSD).
• The Noun Project: https://thenounproject.com/ (La maggior parte delle icone è disponibile in PNG o SVG).
• Iconshock: https://www.iconshock.com/ (Ampia libreria di oltre 2 milioni di icone professionali).
• Pixeden: https://www.pixeden.com/ (La collezione di set di icone gratuite non è particolarmente estesa).
• IconsFlow: https://iconsflow.com/ (IconsFlow aggiorna costantemente la sua libreria).
• Streamline: https://www.streamlinehq.com/ (Più di 85.000 icone uniche, professionali e progettate internamente).