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à : i file SVG sono file vettoriali. Ciò significa che è possibile ingrandirli, rimpicciolirli o rimpicciolirli senza perdere qualità, il che li rende ideali per loghi, icone o design responsive.

Leggeri e ottimizzati per i motori di ricerca : i file SVG sono spesso più piccoli delle immagini raster e sono basati su XML testuale, quindi i motori di ricerca possono leggere direttamente gli elementi chiave (testo alternativo, titoli, ecc.).

Stile e animazione : puoi manipolare gli SVG tramite CSS o JavaScript. Vuoi un effetto al passaggio del mouse o un'animazione? Facilissimo.

Accessibilità – Se configurati correttamente, i file SVG contengono tag di testo accessibili e ruoli che i lettori di schermo possono interpretare, un'ulteriore valida ragione 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: nel file functions.php del tema (sempre in un tema figlio!).

Svantaggi: Nessuna sanificazione di default, il che è rischioso a meno che non venga utilizzato un sistema di sanificazione. Inoltre, il caricamento è limitato all'amministratore (è possibile personalizzare questa impostazione).

3. Considerazioni sulla sicurezza

 SVG = XML, che può contenere:

• Attacchi XSS (JavaScript).
• attacchi XXE (chiamate di entità esterne)

Best practice:

• Utilizza plugin come SVG Support, SVG Safe, HappyFiles con funzionalità di sanificazione integrate.
• esegui un'operazione di sanificazione tramite strumenti online (ad esempio, il test di sanificazione SVG di Darryll Doyle).
• 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. 

Che tu sia un creatore di contenuti, un designer o il titolare di una piccola impresa, questo strumento ti mette a disposizione una tecnologia potente senza bisogno di scrivere codice. Il tuo sito si caricherà più velocemente, si posizionerà meglio nei risultati di ricerca e avrà un aspetto fantastico! Cosa aspetti? Vai qui e scarica subito la tua copia.