Pronto a dare al tuo sito WordPress un serio aggiornamento grafico? Immagina un logo e icone infinitamente scalabili che appaiono nitidi su qualsiasi dispositivo, senza pixelazione, senza distorsione. Questa guida ti mostra esattamente come caricare e gestire file SVG in WordPress utilizzando WP Media Folder, ed è fatta per chiunque, anche se non sei uno sviluppatore.

In questo tutorial passo dopo passo, analizzeremo i benefici dei file SVG, perché i designer li amano e perché sono fantastici per la SEO e le prestazioni della pagina. Imparerai diversi metodi facili da seguire per abilitare i caricamenti SVG: dall'utilizzo di plugin affidabili a semplici modifiche del codice, oltre a strategie intelligenti per mantenere il tuo sito sicuro.

Useremo WP Media Folder, il potente plugin di gestione dei media di JoomUnited. 

Perché gli SVG sono fantastici per la grafica scalabile

Scalabilità – gli SVG sono file vettoriali. Ciò significa che puoi ingrandire, ingrandire o ridurre senza perdere qualità per loghi, icone o design reattivi.

Leggero e ottimizzato per SEO

Stilizzazione e animazione – È possibile manipolare gli SVG tramite CSS o JavaScript. Vuoi un effetto hover o un'animazione? Facile.

Accessibilità – Configurati correttamente, gli SVG contengono tag di testo accessibili e ruoli che gli screen reader possono interpretare, un altro motivo valido per utilizzarli.

Soluzioni per aggiungere SVG in WordPress

WordPress blocca SVG per impostazione predefinita a causa di rischi per la sicurezza (SVG è XML, che può includere codice dannoso), tuttavia, ci sono tre modi affidabili per abilitare il supporto SVG:

1. Utilizza un plugin

a) WPCode + frammento SVG

• Installa il plugin gratuito WPCode.
• Aggiungi lo snippet 'Consenti caricamento file SVG' dalla sua libreria e attivalo.
• Per impostazione predefinita, solo gli Amministratori possono caricare SVG.

b) plugin SVG Support

• Installa "SVG Support" tramite Plugin > Aggiungi nuovo, attivalo.
• Nelle impostazioni, seleziona "Limita all'amministratore" e/o "Abilita modalità avanzata" (rendering inline, stile CSS).
• Carica il tuo SVG tramite Media > Aggiungi nuovo o trascina e rilascia.

c) Altre opzioni:

• SVG Safe di Darrell Doyle, più vecchio ma ancora utilizzato.
• SVG Support igienizza i caricamenti per prevenire rischi XSS/XXE .
• HappyFiles/CatFolders aggiungono caricamenti SVG con sanificazione e anteprime.

2. Aggiungi snippet di codice a functions.php

Puoi utilizzare il seguente codice: 

function enable_svg_upload($mimes) { $mimes['svg'] = 'image/svg+xml'; return $mimes; } add_filter('upload_mimes', 'enable_svg_upload'); 

Dove: functions.php del tema (utilizzare sempre un tema figlio!).

Svantaggi: Nessuna sanificazione predefinita—rischioso a meno che non sia abbinato a un sanificatore. E il caricamento è limitato ad Admin (è possibile personalizzare).

3. Considerazioni sulla sicurezza

 SVG = XML, che può contenere:

• Attacchi XSS (JavaScript).
• attacchi XXE

Best practice:

• Utilizza plugin come SVG Support, SVG Safe, HappyFiles con sanitizzazione integrata.
• Sanifica tramite strumenti online (ad esempio, Darryll Doyle's SVG Sanitizer Test) prima di caricare.
• Limita caricamenti SVG solo ad Admin o utenti fidati.

WP Media Folder e perché è importante per gli SVG su WordPress

WP Media Folder è un potente gestore della libreria multimediale

- Struttura cartella/sottocartella

-Filtri avanzati, ordinamento, drag & drop

 - Rinomina, watermark, sostituzione bulk, anteprima, download

- Compatibile con molti strumenti come Page Builders, WooCommerce e WPML.

Mentre WP Media Folder stesso non consente di utilizzare file SVG, ci permetterà di organizzare, mantenere e gestire qualsiasi tipo di file, compresi i file SVG.

Conclusione: Migliora il tuo sito con SVG e WP Media Folder

Smetti di lottare con cartelle multimediali disordinate e file di immagini non ottimizzati. Invece, sblocca il pieno potenziale degli SVG, leggeri, ricercabili e adattabili, con gli strumenti di organizzazione intuitivi di WP Media Folder. 

Sia che tu sia un creatore di contenuti, un designer o un piccolo imprenditore, mette una tecnologia potente nelle tue mani senza alcun codice. Il tuo sito si caricherà più velocemente, si posizionerà più in alto e sarà stupendo! Cosa aspetti? Vai qui e ottieni la tua copia.