Abilita il supporto SVG in WordPress
Pubblicato: 2023-02-12WordPress consente agli utenti di caricare diversi tipi di file immagine. Probabilmente riconoscerai i soliti sospetti, come PNG e JPG. La visualizzazione di altri tipi di file, come la grafica vettoriale, può essere più problematica.
Fortunatamente, ci sono alcuni modi per incorporare file vettoriali nel tuo sito web. Sebbene non siano una funzionalità nativa, i file Scalable Vector Graphics (SVG) possono essere utilizzati per visualizzare immagini bidimensionali sui siti WordPress. Con una piccola riconfigurazione, sarai in grado di ottimizzare alcuni dei tuoi loghi e altri elementi grafici utilizzando questo tipo di file.
Nota: se stai ospitando con WP Engine, supportiamo nativamente la compressione GZIP sui file SVG.
In questo articolo, impareremo di più su cosa sono i file SVG e perché potresti volerli usare. Quindi esamineremo due modi per abilitarne l'uso sul tuo sito web. Tratteremo anche alcune importanti precauzioni di sicurezza che potresti voler prendere. Iniziamo!
Cos'è un SVG?
Un file SVG è un tipo di immagine vettoriale. I file vettoriali sono composti in modo diverso rispetto ai tipi di file immagine più comuni. Ad esempio, un JPG è composto da migliaia di pixel. Con un file SVG, invece, non è così.
Le immagini vettoriali sono più simili a una serie di istruzioni scritte. Non contengono pixel che formano un'immagine più grande. Invece, includono un set di dati simile a uno schema che crea un'immagine bidimensionale. Ciò significa che ci sono alcuni vantaggi unici nell'utilizzo dei file SVG.
Perché usare SVG?
Gli SVG hanno una serie di vantaggi. Poiché sono altamente scalabili, puoi manipolare le dimensioni secondo necessità senza influire sulla qualità dell'immagine. Come forse saprai fin troppo bene, se provi a ridimensionare un JPG, la qualità degrada molto rapidamente a un livello inutilizzabile.
Ecco dove gli SVG possono tornare utili. Sebbene non siano pensati per la visualizzazione di fotografie tradizionali, sono un'ottima scelta per loghi aziendali, icone e altri elementi grafici semplici sul tuo sito web.
Inoltre, i file SVG tendono ad essere significativamente più piccoli rispetto ad altri tipi di immagine. Ciò significa che il tuo sito non verrà impantanato dalla grafica. Inoltre, i file SVG sono indicizzati da Google e lo sono da un po' di tempo. Questo può essere un vero vantaggio per l'ottimizzazione per i motori di ricerca (SEO) del tuo sito.
Come caricare un file SVG su WordPress
Dal momento che WordPress non include il supporto per gli SVG pronti all'uso, dovrai lavorare un po' di più per includerli nel tuo sito web. Nelle prossime sezioni, esamineremo come aggiungere file SVG al tuo sito Web con un plug-in e tramite un processo manuale.
Metodo 1: utilizzare un plug-in
Come con molte attività di WordPress, i plugin possono semplificare l'abilitazione del supporto SVG. Tutto quello che devi fare è scegliere lo strumento giusto e configurare alcune impostazioni.
Passaggio 1: scarica il plug-in
Innanzitutto, dovrai scaricare e installare un plug-in SVG. Consigliamo il supporto SVG:
Dopo aver installato e attivato il plug-in, avrai una nuova opzione di menu nella dashboard di WordPress in Impostazioni > Supporto SVG . Lì riceverai le istruzioni su come modellare i file SVG per il tuo sito web:

Inoltre, sarai in grado di configurare alcune importanti impostazioni amministrative. Ciò include la limitazione dei privilegi di caricamento SVG solo agli amministratori:
Successivamente, sarai in grado di caricare i file SVG direttamente nella tua libreria multimediale. Tuttavia, ci sono alcuni altri elementi importanti di cui occuparsi prima.
Passaggio 2: abilita il supporto GZip dei file SVG sul tuo server
Il modo in cui ti avvicini a questo passaggio dipenderà dal tuo host web e dalla configurazione del server. Ad esempio, qui su WP Engine, GZip è già abilitato per un elenco specifico di tipi di file. Detto questo, "image/svg+xml" non è uno di questi.
L'aggiunta di questo tipo all'elenco per il tuo sito Web assicurerà che i tuoi file SVG siano ottimizzati in modo appropriato e rapido. Dovrai includere questo tipo di file nel tuo file .htaccess , in modo che tutto funzioni senza problemi.
Passaggio 3: assicurarsi che il plug-in protegga correttamente i file
Uno degli svantaggi dell'utilizzo dei file SVG, e il motivo principale per cui questo tipo di file non è stato ancora incorporato nel core di WordPress, è dovuto a problemi di sicurezza. Poiché i file SVG sono basati su XML, sono vulnerabili agli attacchi di entità esterne, tra gli altri rischi.
Quando si configura il plug-in SVG, si consiglia di limitare l'accesso al caricamento SVG solo agli amministratori. Tuttavia, un approccio ancora più sicuro consiste nel "disinfettare" i file SVG prima di caricarli. Ciò elimina qualsiasi codice XML non necessario che potrebbe esporre il tuo sito agli attacchi.
Il plug-in SVG Support non include la sanificazione automatica, ma ci sono altri plug-in che lo fanno. Safe SVG è uno di questi:
In alternativa, puoi anche installare il tuo igienizzante e utilizzarlo in autonomia. Il creatore di Safe SVG ha fornito il codice disinfettante del plug-in su GitHub, affinché chiunque possa utilizzarlo.
Avere il tuo disinfettante in atto è anche una buona opzione se prevedi di utilizzare il metodo successivo per abilitare SVG sul tuo sito Web WordPress.
Metodo 2: abilita manualmente i caricamenti di file SVG
Se preferisci sporcarti le mani piuttosto che usare un plugin, puoi abilitare manualmente il tuo sito WordPress per accettare i file SVG. Successivamente, daremo un'occhiata a come funziona questo processo.
Passaggio 1: modifica il file Functions.php del tuo sito
Per iniziare, dovrai modificare il file functions.php del tuo sito web. Per fare ciò, puoi andare su Aspetto > Modifica temi nella dashboard e selezionare il file functions.php :
In alternativa, puoi accedere ai file del tuo sito utilizzando un'applicazione FTP (File Transfer Protocol) come FileZilla.
In ogni caso, è meglio creare un tema figlio o passare a un ambiente di sviluppo prima di eseguire qualsiasi lavoro importante sul tuo sito web. Ciò manterrà il tuo sito live al sicuro da eventuali danni mentre apporti modifiche.
Passaggio 2: aggiungi uno snippet di codice
Successivamente, dovrai aggiungere il seguente frammento di codice al tuo file functions.php :
// Allow SVG
add_filter( 'wp_check_filetype_and_ext', function($data, $file, $filename, $mimes) {
global $wp_version;
if ( $wp_version !== '4.7.1' ) {
return $data;
}
$filetype = wp_check_filetype( $filename, $mimes );
return [
'ext' => $filetype['ext'],
'type' => $filetype['type'],
'proper_filename' => $data['proper_filename']
];
}, 10, 4 );
function cc_mime_types( $mimes ){
$mimes['svg'] = 'image/svg+xml';
return $mimes;
}
add_filter( 'upload_mimes', 'cc_mime_types' );
function fix_svg() {
echo '<style type="text/css">
.attachment-266x266, .thumbnail img {
width: 100% !important;
height: auto !important;
}
</style>';
}
add_action( 'admin_head', 'fix_svg' );
Successivamente, sarai in grado di caricare immagini SVG nella tua libreria multimediale. Lì puoi visualizzarli e interagire con loro proprio come con altri tipi di file immagine.
Passaggio 3: accesso sicuro e limitazione delle autorizzazioni di caricamento SVG
Come accennato in precedenza, l'abilitazione dei file SVG comporta alcuni rischi. Per proteggere il tuo sito, puoi impostare le autorizzazioni di caricamento per SVG creando ruoli utente personalizzati. È possibile utilizzare un plug-in come User Role Editor o WPFront User Role Editor per eseguire questa operazione.
Questi plug-in consentono di personalizzare i livelli di accesso e autorizzazione per i ruoli utente esistenti. In altre parole, ti permetteranno di designare quali utenti avranno il permesso di caricare SVG. Questo ti aiuterà a tenere d'occhio la sicurezza di quei file.
Stai al sicuro con WP Engine
Nativamente, WordPress non abilita l'uso di file SVG. È un peccato, poiché questi file tendono ad essere l'opzione migliore per visualizzare loghi e altri elementi grafici. La buona notizia è che con l'aiuto di alcune delle nostre risorse per sviluppatori preferite, sarai in grado di abilitare e proteggere l'uso dei file SVG sul tuo sito.
Inoltre, tieni presente che sui nostri piani di hosting WordPress avrai accesso al supporto professionale e a soluzioni di sicurezza del sito Web ben sviluppate. Proteggi il tuo sito con noi oggi!