{"id":120219,"date":"2025-07-08T01:36:46","date_gmt":"2025-07-07T22:36:46","guid":{"rendered":"https:\/\/elementor.com\/blog\/che-cose-un-file-svg-e-come-si-usa\/"},"modified":"2026-01-11T10:47:41","modified_gmt":"2026-01-11T08:47:41","slug":"che-cose-un-file-svg-e-come-si-usa","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/it\/che-cose-un-file-svg-e-come-si-usa\/","title":{"rendered":"Che cos’\u00e8 un file SVG e come si usa?"},"content":{"rendered":"\n

Le immagini sono essenziali – Raccontano storie, trasmettono emozioni e impostano il tono visivo del tuo sito web.\nMa non tutte le immagini sono create uguali.\nI formati tradizionali come JPEG e PNG, sebbene onnipresenti, possono soffrire di un notevole svantaggio: perdono qualit\u00e0 quando vengono ingranditi.\n\u00c8 qui che entrano in gioco i grafici vettoriali scalabili (SVG) con vantaggi cristallini. <\/p>\n\n

Gli SVG non sono composti da pixel come le immagini tradizionali.\nInvece, usano formule matematiche per definire linee, forme e colori.\nQuesta formula magica significa che, indipendentemente da quanto grande o piccolo venga visualizzato un SVG<\/a>, apparir\u00e0 sempre perfettamente nitido.\nSono ideali per loghi, icone, illustrazioni e altri elementi di design che devono apparire perfetti su qualsiasi dimensione dello schermo.\nInoltre, gli SVG spesso hanno dimensioni di file incredibilmente piccole, mantenendo il tuo sito web agile e veloce nel caricamento. <\/p>\n\n

Sfruttare il potenziale degli SVG con Elementor<\/h2>\n\n

Scegliere gli strumenti giusti \u00e8 cruciale per sbloccare il pieno potenziale degli SVG.\nElementor, un leader costruttore di siti web WordPress<\/a>, offre una piattaforma intuitiva e potente per integrare e gestire gli SVG senza problemi nei tuoi progetti web.\nChe tu sia un designer esperto o un principiante, Elementor semplifica il processo, aiutandoti a creare siti web straordinari che sono sia visivamente attraenti che ottimizzati per le prestazioni. <\/p>\n\n

Fondamenti degli SVG <\/h2>\n\n

I blocchi costitutivi degli SVG<\/h3>\n\n

Come un progetto digitale, gli SVG sono costruiti utilizzando un codice speciale che definisce i blocchi costitutivi di base dell’immagine.\nAnalizziamo i componenti chiave: <\/p>\n\n

Elementi principali<\/h4>\n\n
    \n
  1. Rettangoli (<\/strong><rect>):<\/strong> Definisci forme rettangolari con attributi come larghezza, altezza, x e y per il posizionamento.\nAggiungi angoli arrotondati con rx e ry. <\/li>\n\n\n\n
  2. Cerchi (<\/strong><circle>):<\/strong> Crea cerchi utilizzando gli attributi cx e cy per le coordinate del centro e l’attributo r per il raggio.<\/li>\n\n\n\n
  3. Ellissi (<\/strong><ellipse>):<\/strong> Simili ai cerchi, ma con attributi rx e ry per personalizzare il raggio lungo l’asse x e y.<\/li>\n\n\n\n
  4. Linee (<\/strong><line>):<\/strong> Disegna linee rette con coordinate di partenza (x1, y1) e coordinate di arrivo (x2, y2).<\/li>\n\n\n\n
  5. Poligoni (<\/strong><polygon>):<\/strong> Specifica una serie di punti per creare forme chiuse con qualsiasi numero di lati.<\/li>\n\n\n\n
  6. Percorsi (<\/strong><path>):<\/strong> L’elemento pi\u00f9 potente \u2013 usa l’attributo d per disegnare curve e forme complesse utilizzando una serie di comandi.<\/li>\n\n\n\n
  7. Testo (<\/strong><text>):<\/strong> Incorpora testo direttamente nel tuo SVG per titoli, etichette e altro.<\/li>\n<\/ol>\n\n

    Attributi: Modificatori chiave<\/h4>\n\n
      \n
    1. riempimento:<\/strong> Controlla il colore all’interno di una forma.\nAccetta nomi di colori (rosso), codici esadecimali (#FF0000), valori RGB (RGB(255, 0, 0)) <\/li>\n\n\n\n
    2. traccia:<\/strong> Imposta il colore del contorno attorno a una forma.<\/li>\n\n\n\n
    3. Larghezza-traccia:<\/strong> Determina lo spessore del contorno.<\/li>\n\n\n\n
    4. Opacit\u00e0:<\/strong> Controlla la trasparenza di un elemento (valori da 0 a 1).<\/li>\n<\/ol>\n\n

      Gruppi e trasformazioni<\/h4>\n\n
        \n
      1. <g>tag:<\/strong> Raggruppa elementi insieme per uno stile collettivo o trasformazioni.<\/li>\n\n\n\n
      2. attributo di trasformazione:<\/strong> Applica trasformazioni come ruotare, traslare, scalare o inclinare agli elementi o ai gruppi.<\/li>\n<\/ol>\n\n

        Esempio: Creare un semplice SVG<\/p>\n\n

        Ecco un esempio di base che dimostra come questi elementi e attributi principali si uniscono:<\/p>\n\n

        <svg width=”100″ height=”100″><\/em><\/p>\n\n

        <circle cx=”50″ cy=”50″ r=”40″ fill=”blue” stroke=”black” stroke-width=”3″ \/><\/em><\/p>\n\n

        <\/svg><\/em><\/p>\n\n

        Questo codice crea un cerchio blu con un contorno nero al centro di una tela SVG di 100×100 pixel.<\/p>\n\n

        SVG inline vs. SVG esterno<\/h3>\n\n

        Quando lavori con gli SVG sui siti web, hai due metodi principali per integrarli:<\/p>\n\n

        SVG inline:<\/strong><\/p>\n\n

        Il codice SVG \u00e8 incorporato direttamente nel tuo documento HTML utilizzando il tag .<\/p>\n\n

        Pro:<\/strong><\/p>\n\n