Divi 5 SVG Module e AI: come generare icone vettoriali coerenti

Il modulo SVG di Divi 5 cambia il modo in cui pensi le icone

Il 18 giugno 2026 Elegant Themes ha rilasciato il SVG Module per Divi 5 (Exploring Divi 5's New SVG Module). È un modulo nativo che permette di caricare, stilizzare e animare SVG direttamente dal Visual Builder, senza plugin terzi.

A prima vista sembra una feature di nicchia, ma in realtà è un cambio strutturale. Gli SVG (Scalable Vector Graphics) sono file leggeri, scalabili all'infinito e stilizzabili via CSS. Sono lo standard per icone, loghi, illustrazioni. Per anni su WordPress li hai gestiti con plugin di terze parti (SVG Support, Safe SVG, SVG Icons Pro) che introducevano complessità, problemi di sicurezza (gli SVG possono contenere JavaScript malevolo) e performance sub-ottimali perché non erano integrati con il builder.

Con il modulo nativo di Divi 5, il quadro cambia. Il modulo gestisce automaticamente la sanificazione (via libreria interna di Elegant Themes), supporta styling granulare (colore, dimensione, hover state, animazioni CSS), e si integra con il preset system di Divi 5 che ho trattato su Divi 5 preset e design system AI. Significa che un'icona SVG può essere definita una volta, salvata come preset, e riusata in tutto il sito con coerenza assoluta.

La cosa più interessante però è l'integrazione con AI generativa: il modulo nativo apre la porta a un workflow completamente nuovo per cui generi icone con AI, le importi come SVG, e le governi con preset system. È un pattern che vedremo sempre di più nel 2026-2027.

Perché gli SVG sono strategici per un sito WordPress

Performance

Un'icona PNG trasparente 64x64 è mediamente 5-15 KB. La stessa icona come SVG è 1-3 KB. Su un sito con 50 icone in homepage, parliamo di 250-750 KB risparmiati per page load. Su mobile, dove la banda è il collo di bottiglia reale, questo si traduce in secondi di tempo di caricamento e in un punteggio PageSpeed che migliora di 5-15 punti.

Scalabilità perfetta

Un PNG 64x64 su un display retina 2x è sfocato. Un SVG è sempre perfetto, a qualsiasi risoluzione. Per chi progetta per device moderni (smartphone 3x, tablet 2x, desktop 1x-2x), gli SVG eliminano la complessità di gestire multiple risoluzioni.

Stilizzazione CSS

Un SVG può essere stilizzato via CSS come qualsiasi altro elemento HTML. Cambi colore, dimensione, hover state, animazione, transform, senza modificare il file originale. Per un design system coerente, questa è una proprietà essenziale.

SEO e accessibilità

Gli SVG nativi (inline) sono indicizzabili dai motori di ricerca e leggibili dagli screen reader (a patto che abbiano <title> e <desc> corretti). Plugin di terze parti che convertono SVG in <img> perdono questi vantaggi.

Il problema dei plugin SVG di terze parti

Fino a oggi, usare SVG su WordPress richiedeva un plugin. I più diffusi sono SVG Support, Safe SVG, WP SVG Extra. Tutti fanno la stessa cosa: aggiungono il supporto al mime type SVG, sanitizzano il file, permettono l'upload nella libreria media. Ma introducono 3 problemi.

Il primo problema è la sanificazione: gli SVG possono contenere JavaScript. Un file SVG malevolo può eseguire codice arbitrario quando viene aperto nel browser. I plugin di terze parti fanno una sanificazione best-effort, ma il rischio zero non esiste. Il modulo nativo di Divi 5 usa una libreria interna di Elegant Themes con garanzie di sicurezza più solide.

Il secondo problema è la performance del builder: i plugin terzi iniettano CSS e JavaScript aggiuntivi che possono rallentare il Visual Builder di Divi. Il modulo nativo è integrato e non aggiunge overhead.

Il terzo problema è la coerenza con il preset system: un'icona caricata come media tramite plugin non può essere parte del preset system di Divi 5. Ogni volta che la usi, devi riconfigurarla. Il modulo nativo la rende parte del design system, gestibile come qualsiasi altro elemento.

Workflow AI per generare icone coerenti con il brand

Ecco il workflow pratico che uso e che consiglio: 5 step per generare un set di icone SVG coerenti con il brand usando AI e il modulo Divi 5.

Step 1: definisci il brief del design system

Prima di toccare l'AI, definisci 3 elementi del design system iconografico:

• Stile: outline, filled, duotone, hand-drawn. Decidi uno stile e mantienilo coerente su tutto il set.
• Peso del tratto: 1px, 1.5px, 2px. Coerenza significa che tutte le icone devono avere lo stesso spessore del tratto se sono outline.
• Palette: 2-3 colori del brand da usare come fill o stroke. Definisci anche un colore per hover state.

Esempio di brief per un sito B2B:

Set di 12 icone outline, tratto 1.5px, arrotondato, stile Lucide/Feather.
Colori: brand primary (#2563eb) per stroke, bianco per fill.
Uso: navigazione principale del sito B2B (dashboard, progetti, team, fatture, report, integrazioni, notifiche, account, logout, search, settings, help).

Step 2: genera con AI usando un prompt strutturato

Con il brief in mano, usa un modello AI generativo di immagini. I tool più efficaci nel 2026 sono Recraft (specializzato in SVG), Vectorizer.ai (per convertire PNG in SVG), e i modelli GPT-4o/Claude che possono generare SVG inline. Il prompt deve essere strutturato per garantire coerenza:

Genera un set di 12 icone SVG per un'app B2B, stile outline Lucide,
tratto 1.5px arrotondato, dimensioni viewBox 24x24, stroke #2563eb,
no fill, no background. Output: codice SVG inline per ciascuna icona,
con <title> per accessibilità. Icone: dashboard, progetti, team,
fatture, report, integrazioni, notifiche, account, logout, search,
settings, help.

Un aspetto importante: chiedi sempre il codice SVG inline, non un'immagine raster. Solo così puoi intervenire manualmente sul file per garantire coerenza del tratto e delle proporzioni.

Step 3: verifica e normalizza il codice SVG

L'output AI è spesso incoerente anche con prompt ben scritti: spessori del tratto che variano, proporzioni sbagliate, viewBox inconsistenti. Devi normalizzare manualmente. Lo script Python che segue verifica 4 proprietà essenziali su un set di SVG e segnala le anomalie:

import re
import os
import glob

# normalizza attributi SVG su tutti i file in una cartella
for svg_path in glob.glob('/path/to/svg-icons/*.svg'):
    with open(svg_path) as f:
        content = f.read()
    # uniforma viewBox a 24x24
    content = re.sub(r'viewBox="[^"]+"', 'viewBox="0 0 24 24"', content)
    # uniforma stroke-width a 1.5
    content = re.sub(r'stroke-width="[\d.]+"', 'stroke-width="1.5"', content)
    # uniforma stroke al colore brand
    content = re.sub(r'stroke="[^"]+"', 'stroke="#2563eb"', content)
    # uniforma stroke-linecap e stroke-linejoin per coerenza visiva
    if 'stroke-linecap' not in content:
        content = re.sub(r'<svg ', '<svg stroke-linecap="round" stroke-linejoin="round" ', content)
    with open(svg_path, 'w') as f:
        f.write(content)
    print(f'Normalized: {os.path.basename(svg_path)}')

Questo script è un punto di partenza. Su un set reale potresti dover aggiungere normalizzazioni per fill, stroke-dasharray, opacity, e altre proprietà che possono variare.

Step 4: importa in Divi 5 come preset riutilizzabile

Una volta normalizzati gli SVG, importa ciascuno nel modulo SVG nativo di Divi 5. Per ogni icona:

1. Apri il Visual Builder sulla pagina
2. Aggiungi il modulo SVG
3. Carica il file SVG (drag-and-drop)
4. Configura dimensione, colore, hover state
5. Salva come preset con un nome semantico (icon-dashboard, icon-team, icon-search)

Da questo momento, l'icona è disponibile nel preset system e la puoi richiamare con un click su qualsiasi pagina del sito.

Step 5: audit finale e performance check

Dopo aver configurato tutte le icone, fai un audit finale. Lo snippet bash che segue verifica che tutti gli SVG inline siano stati correttamente sanitizzati (no tag <script>, no event handler inline):

# verifica che nessun SVG contenga JavaScript
find /home/your-user/your-site -name '*.svg' -path '*/uploads/*' \
  -exec grep -lE '<script|onload=|onclick=|onerror=' {} \;

Il comando non dovrebbe restituire nulla. Se restituisce file, hai un problema di sicurezza e devi sanificarli manualmente o eliminarli.

Integrazione con il preset system Divi 5

Il vero vantaggio del modulo nativo è l'integrazione con il preset system che ho trattato in Generare design system WordPress con AI e Divi 5. Una volta che un'icona è un preset, puoi:

• Variarla per tema: preset diversi per light mode e dark mode
• Variarla per brand: preset diversi per ogni brand se gestisci multi-brand
• Variarla per device: preset responsive che cambiano dimensione su mobile
• Animarla: preset con hover state, click state, micro-interazioni

Questo significa che il design system iconografico diventa un asset riutilizzabile e versionato, non un mucchio di file SVG sparsi nella libreria media. È la differenza tra avere un design system e avere un insieme di asset.

Confronto rapido: modulo nativo vs plugin terzi

Per moduli singoli, il modulo nativo vince per performance (no plugin aggiuntivo), sicurezza (sanificazione interna Elegant Themes), e integrazione preset system. Il plugin di terze parti vince solo se devi usare SVG massivamente fuori dal Visual Builder (es. in widget custom, custom post type, custom block). In quel caso, Safe SVG o SVG Support restano opzioni valide.

Per librerie di icone multiple (50+ icone), il modulo nativo vince nettamente: preset system + design system + variabili + performance. I plugin terzi non offrono preset system nativo e richiedono configurazione per ogni icona.

Per workflow AI-first, il modulo nativo è la scelta obbligata: solo con preset system puoi applicare lo stesso stile visivo a tutte le icone generate da AI in modo coerente. Plugin terzi richiedono configurazione manuale per ciascuna.

Limiti e cosa fare quando il modulo nativo non basta

Il modulo SVG di Divi 5 ha 3 limiti da conoscere.

Il primo limite è che funziona solo nel Visual Builder. Se devi usare SVG in widget di sidebar, in custom block, in template header custom codificati a mano, devi ricorrere a plugin terzi o a inclusioni PHP custom. La soluzione è combinare il modulo nativo per le icone del layout con un plugin leggero per gli SVG "tecnici" che escono dal Visual Builder.

Il secondo limite è che la library integrata è limitata. Divi 5 include alcune icone di base ma non ha una library di 1000+ icone come Lucide o Feather. Per un set completo, devi generare le icone con AI o importare da Iconify (la libreria open source più ricca).

Il terzo limite è che il modulo supporta un'animazione CSS di base. Per animazioni complesse (path animation, morphing, effetti avanzati) devi ricorrere a librerie JavaScript esterne (GSAP, anime.js) o a SMIL nativo SVG. Per il 90% dei casi l'animazione CSS basta.

Audit di un sito Divi 5 esistente

Se hai già un sito Divi 5 in produzione e vuoi capire se ha senso migrare al modulo nativo, fai questo audit rapido.

Conta quanti SVG stai già servendo. Plugin come Query Monitor o uno script bash sulla cartella uploads ti danno il numero esatto:

# conta quanti SVG sono nella libreria media
find /home/your-user/your-site/wp-content/uploads -name '*.svg' | wc -l

Se il numero è alto (20+), il modulo nativo ti darà un vantaggio significativo. Se è basso (5-10), il costo della migrazione potrebbe non valere.

Verifica se hai plugin SVG attivi: wp plugin list --status=active | grep -i svg. Se sì, hai un candidato immediato per la sostituzione.

Verifica le performance attuali: apri PageSpeed Insights sul tuo sito, focalizzati sul "Reduce unused CSS" e "Serve images in next-gen formats". Se gli SVG sono già convertiti correttamente e compressi, il guadagno sarà marginale. Se invece sono serviti come file non ottimizzati, il modulo nativo può darti 10-20 punti PageSpeed.

Roadmap di adozione in 3 fasi

Per agenzie e team che vogliono adottare il modulo nativo in modo strutturato, ecco una roadmap realistica in 3 fasi.

Fase 1 (settimana 1-2): audit e inventario. Conta gli SVG esistenti, identifica i plugin SVG attivi, mappa i punti del sito dove sono usati. Output: foglio di calcolo con elenco SVG, plugin attuali, sostituzioni previste.

Fase 2 (settimana 3-6): generazione AI del set di icone base. Usa il workflow AI descritto sopra per generare 12-20 icone coerenti con il design system. Normalizza, importa, crea preset. Output: set di preset SVG pronti all'uso.

Fase 3 (settimana 7-10): migrazione progressiva. Sostituisci gradualmente gli SVG esistenti con i preset nativi. Inizia dalle pagine più viste (homepage, landing key). Monitora PageSpeed Insights e tassi di conversione. Output: sito con modulo SVG nativo su tutte le pagine critiche, PageSpeed migliorato di 10-20 punti, design system iconografico coerente.

Lezione di sistema: i moduli nativi vincono sui plugin terzi

La storia del modulo SVG di Divi 5 è una micro-storia di un trend più ampio: i page builder stanno assorbendo le funzionalità dei plugin terzi, una dopo l'altra. Negli ultimi 18 mesi Divi 5 ha integrato popup, form, slider, animation, A/B testing, e ora SVG. Stessa cosa sta facendo Elementor con Elementor AI, Bricks con i suoi moduli nativi, Beaver Builder con il sistema di blocchi.

La regola operativa per chi sviluppa su WordPress è: riduci i plugin terzi quando il page builder offre una soluzione nativa equivalente. Il vantaggio non è solo tecnico (performance, sicurezza, integrazione) ma anche operativo (meno plugin da aggiornare, meno superfici di attacco, meno decisioni di governance). Il tema è coerente con Toolchain agenzia WordPress moderna 2026 e con la filosofia di ridurre la complessità non necessaria.

FAQ

Il modulo SVG supporta animazioni?

Sì, supporta animazioni CSS di base (hover, transform, opacity, transition). Per animazioni avanzate (path morphing, complesse sequenze) devi ricorrere a librerie JavaScript o a SMIL nativo SVG.

Posso usare icon library esterne come Lucide o Feather?

Sì. Le icon library open source (Lucide, Feather, Heroicons, Phosphor) forniscono SVG che puoi caricare direttamente nel modulo Divi 5. Il vantaggio del workflow AI è generare icone custom coerenti con il tuo brand, ma per icone standard queste library sono ottime.

Il modulo supporta SVG animati in formato SMIL?

Sì, il modulo renderizza qualsiasi SVG valido, incluse animazioni SMIL. Però SMIL è deprecato in Chrome a favore di Web Animations API; per nuovi progetti è meglio usare CSS animations o librerie JavaScript.

Posso usare SVG in widget di sidebar o custom block?

Il modulo SVG funziona solo nel Visual Builder di Divi 5. Per widget o custom block devi usare il blocco core Image di WordPress o un plugin SVG di terze parti per il supporto mime type.

Il modulo gestisce la sanificazione automatica?

Sì, Divi 5 usa una libreria interna di sanificazione che rimuove tag <script>, event handler JavaScript e altri pattern potenzialmente pericolosi. Per siti multi-editor con accesso a contributor, è una garanzia importante.

Quanto pesa un'icona SVG rispetto a PNG?

Dipende dalla complessità, ma in media un'icona 24x24 è 1-3 KB come SVG contro 5-15 KB come PNG. Su un set di 50 icone, il risparmio è 250-750 KB per page load.

Funziona con il multisite WordPress?

Sì, il modulo SVG funziona in installazioni multisite. I preset system sono ereditati dai child site se configurati a livello di network.

Riferimenti utili per approfondire

• Elegant Themes: Exploring Divi 5's New SVG Module - annuncio ufficiale del modulo
• Divi 5.7 Release Notes - tutte le novità della release 5.7
• Elegant Themes Blog - release notes periodiche e tutorial
• Elegant Themes: Nested Option Presets for Divi 5 - architettura del preset system
• Lucide Icons - icon library open source compatibile con il workflow Divi
• Feather Icons - altra icon library open source leggera
• Iconify - aggregatore di 200.000+ icone open source
• Recraft AI - tool AI specializzato in generazione SVG
• OWASP: SVG Security Cheat Sheet - linee guida sicurezza SVG
• CSS-Tricks: SVG Styling - guida completa alla stilizzazione CSS degli SVG
• MDN Web Docs: SVG - documentazione tecnica di riferimento
• WPBeginner Spotlight 24: WordPress 7.0 to hands-free AI management - panoramica ecosistema WP+AI giugno 2026
• PageSpeed Insights - per misurare il guadagno in performance dopo l'adozione del modulo