Compatibilità:

WebSite X5 Evo e Pro

Quando progetti una pagina web, spesso sono i dettagli a fare la differenza. Un’icona accanto a un titolo o dentro un pulsante può rendere il layout più chiaro e professionale.


Il problema è che le immagini tradizionali, come PNG o JPG, possono perdere qualità se ridimensionate o appesantire la pagina, soprattutto su un sito responsive.


Le icone in formato SVG risolvono questo limite: sono leggere, scalabili e sempre nitide. Con l’Oggetto Opzionale SVG Icon puoi inserirle facilmente nelle pagine del tuo sito e adattarle al tuo design, senza complicazioni tecniche. 


Cosa sono le icone SVG e perché usarle

Le icone SVG (Scalable Vector Graphics) sono immagini vettoriali: questo significa che non sono composte da pixel come le classiche immagini JPG o PNG, ma da forme matematiche.


Il risultato? Possono essere ingrandite o ridimensionate senza perdere qualità e senza diventare sfocate.


Utilizzare icone SVG nel tuo sito offre diversi vantaggi:

  • Qualità sempre perfetta, su qualsiasi schermo e a qualsiasi dimensione;
  • Peso ridotto dei file, per pagine più leggere e veloci da caricare;
  • Maggiore flessibilità, perché puoi modificare colore e dimensioni in modo semplice;
  • Perfetta integrazione con il design responsive.


Le icone SVG sono ideali, ad esempio, per:

  • accompagnare titoli e testi descrittivi;
  • arricchire pulsanti e call-to-action;
  • creare sezioni “Servizi” con elementi grafici chiari e coerenti;
  • migliorare l’aspetto di menu, footer e box informativi.


Grazie all’Oggetto SVG Icon, puoi sfruttare tutti questi vantaggi direttamente nelle pagine del tuo progetto.


Come usare l’Oggetto SVG Icon

Per inserire un’icona SVG nelle pagine del tuo sito, segui questi passaggi:

  • Inserisci l'Oggetto SVG Icon nella pagina e fai doppio click in modo da accedere alla finestra con tutte le opzioni.
  • Utilizza il campo File Icona per importare l'icona che vuoi utilizzare: puoi scegliere se cercare un File in locale o se ricorrere alla Libreria online (per maggiori informazioni, vedi Come si importa un file?). Cliccando sul pulsante puoi inserire un titolo e un testo alternativo utili ai fini dell'accessibilità oltre che dell'ottimizzazione SEO della pagina (vedi Accessibilità delle immagini: l'importanza del testo alternativo).
  • A questo punto puoi occuparti dello Stile dell'icona. Tramite l'opzione Formato puoi decidere di mantenerla così com'è in originale o, in alternativa, di ricolorarla del colore che preferisci.
  • Per personalizzare ulteriormente l'aspetto dell'icona puoi agire su Dimensione, Margini, Colore di Sfondo e Smusso degli angoli.
  • Se vuoi, puoi associare all'icona un Effetto, ovvero un'animazione che verrà riprodotta su passaggio del mouse. 
  • Infine, puoi trasformare l'icona in un pulsante tramite l'inserimento di un collegamento: clicca sul pulsante  e, attraverso la finestra richiamata, scegli l'azione da associare al link.
  • Quando sei soddisfatto, clicca sul pulsante Ok per confermare. 


Impaziente di usarlo nelle pagine del tuo sito? Installa subito l’Oggetto SVG Icon


Non hai Crediti a sufficienza per acquistare questo Oggetto? Vedi tutti i pacchetti di Crediti