Come utilizzare in modo sicuro le immagini vettoriali con WordPress

Aggiungere grafica e illustrazioni personalizzate al design del tuo sito web Divi può davvero aiutare a migliorare l'attrattiva visiva. Ma trovare le risorse di immagine giuste o assumere un designer non è sempre fattibile. Fortunatamente, Divi semplifica la creazione di immagini e illustrazioni vettoriali direttamente all'interno del builder.

In questa guida esploreremo come implementare effettivamente SVG senza compromettere il tuo sito web.

Anche se non hai esperienza di progettazione, puoi realizzare immagini vettoriali professionali e di alta qualità per portare visivamente il tuo sito web Divi a un livello superiore.

Introduzione a SVG e ai suoi usi

SVG sta per Scalable Vector Graphics. È un formato di immagine vettoriale basato su XML ampiamente utilizzato progettato per descrivere la grafica vettoriale bidimensionale. A differenza dei formati di immagine raster (come JPEG o PNG) che utilizzano pixel per rappresentare le immagini, SVG utilizza equazioni matematiche per definire forme, linee e colori, rendendolo un formato indipendente dalla risoluzione e altamente scalabile.

Ecco alcuni usi chiave di SVG nella progettazione di siti Web:

1. Grafica reattiva: le immagini SVG sono indipendenti dalla risoluzione, il che significa che possono essere ingrandite o ridotte senza perdere la qualità. Ciò li rende perfetti per il web design reattivo, in cui il contenuto si adatta alle diverse dimensioni e risoluzioni dello schermo.
2. Icone e loghi: SVG è comunemente utilizzato per icone, loghi e altri elementi grafici sui siti Web. Poiché i file SVG sono di piccole dimensioni e possono essere facilmente personalizzati e animati con CSS e JavaScript, sono una scelta popolare per creare interfacce utente interattive e visivamente accattivanti.
3. Display Retina e ad alto DPI: SVG è ideale per visualizzare grafica nitida e nitida su schermi ad alto DPI (punti per pollice) come i display Retina, dove le immagini raster tradizionali potrebbero apparire pixelate se ingrandite.
4. Animazione: SVG consente la creazione di animazioni complesse direttamente all'interno del codice XML utilizzando strumenti come animazioni CSS o librerie JavaScript come Snap.svg e GreenSock Animation Platform (GSAP). Ciò rende possibile aggiungere elementi dinamici e interattivi a un sito web.
5. Accessibilità: le immagini SVG sono facilmente accessibili agli screen reader e alle tecnologie assistive perché la struttura XML sottostante può essere annotata con testo descrittivo, rendendo i siti web più inclusivi e utilizzabili per le persone con disabilità.
6. Vantaggi SEO: i motori di ricerca possono analizzare e indicizzare il contenuto all'interno dei file SVG, il che può migliorare l'ottimizzazione dei motori di ricerca (SEO) fornendo più contesto ai crawler dei motori di ricerca.
7. Visualizzazione interattiva dei dati: SVG può essere utilizzato per creare visualizzazioni interattive dei dati, come diagrammi e grafici, che possono aiutare a trasmettere le informazioni in modo efficace su un sito Web.

In sintesi, SVG è un formato versatile e potente per creare e visualizzare grafica vettoriale sui siti web. La sua capacità di scalare perfettamente, funzionare bene con varie dimensioni e risoluzioni dello schermo e il supporto per animazioni e interattività lo rendono uno strumento prezioso nel moderno web design e sviluppo.

Modi per utilizzare in modo sicuro le immagini vettoriali con WordPress

In questa parte esamineremo due metodi per utilizzare SVG sicuri in WordPress: manualmente e tramite plugin. Ti verrà quindi presentata la scelta migliore per le tue esigenze per la selezione. Iniziamo adesso!

Aggiungi manualmente il supporto SVG e disinfetta il tuo codice

Con una piccola porzione di codice, il supporto SVG può essere aggiunto a WordPress in pochi minuti. Ciò ti esporrebbe ai possibili problemi di sicurezza che abbiamo già evidenziato. Per implementare SVG in modo più sicuro sono necessarie le seguenti azioni:

1. Apporta modifiche al tuo file Functions.php per abilitare il supporto SVG.
2. Impedisci ai ruoli utente desiderati di caricare file SVG su WordPress.
3. Prima di caricare qualsiasi file SVG, disinfettali tutti.

Nel complesso, non è difficile completare i passaggi uno e due. Il primo passo è connettersi al tuo sito web utilizzando File Transfer Protocol (FTP) e trovare la cartella principale di WordPress. Trova lì il tuo file Functions.php, aprilo e incollaci il seguente codice.

// 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' );

Con questo, puoi caricare file SVG su WordPress e vederli nella tua libreria multimediale, servendo a due scopi. Dopo aver aggiunto il codice, chiudi il file Functions.php e salva le modifiche.

Ora che dobbiamo impedire che le persone di cui non ci fidiamo vengano corrotte, le cose diventano un po' più difficili. Potresti, ad esempio, avere fiducia che i tuoi redattori e autori carichino file accurati, ma non nei tuoi contributori. Ci sono due approcci che puoi adottare qui:

1. Stabilisci ruoli utente univoci per gli utenti con accesso limitato o nessun accesso al Catalogo multimediale.
2. Per limitare i tipi di file che ciascun ruolo utente può caricare, installa un plug-in come WP Upload Restriction .

È vero che entrambe le strategie presentano degli inconvenienti, che è uno dei motivi per cui l’implementazione manuale di SVG potrebbe risultare complessa. Ma se scegli una strategia per bloccare i caricamenti SVG dannosi, devi anche assicurarti di non utilizzarla accidentalmente.

Idealmente, dovresti utilizzare uno strumento disinfettante prima di caricare qualsiasi SVG sul tuo sito web. Questo prenderà il tuo file, controllerà se contiene qualcosa di discutibile e, se contiene, lo eliminerà. Alla fine, avrai un file SVG ordinato che potrai finalmente inviare a WordPress.

Utilizzo del plugin SVG sicuro

Intendevamo dimostrare quanto possa essere difficile un'implementazione sicura di SVG utilizzando il metodo sopra menzionato. Ciò è necessario affinché tu possa comprendere appieno cosa esegue il plugin Safe SVG .

il plugin per Safe SVG. In poche parole, le difficoltà che abbiamo menzionato in precedenza vengono tutte risolte da questo plugin, tra cui:

1. Rendendo possibile caricare SVG.
2. Verifica che i tuoi SVG siano visibili nel Catalogo multimediale.
3. Pulitura del codice sorgente di ogni SVG caricato per evitare difetti di sicurezza. Questo plugin è essenzialmente di natura plug-and-play e segue il percorso più semplice per proteggere l'implementazione SVG in WordPress. Ti consigliamo di provarlo se sei determinato a utilizzare SVG.

Animazione di SVG utilizzando CSS e plugin

Se ti dedichi al lavoro di integrazione degli SVG in WordPress, vorrai senza dubbio massimizzare il tuo ritorno sull'investimento. Ciò significa che, quando appropriato, dovresti animare i tuoi SVG utilizzando i CSS. Esistono due approcci che puoi adottare, di cui abbiamo discusso in precedenza:

• Gli SVG possono essere animati manualmente con CSS proprio come qualsiasi altro elemento.
• Utilizza programmi come SVGator per creare e animare SVG.

Se sei disposto a provare alcune cose nuove, aggiungere alcune animazioni qua e là può migliorare notevolmente l'esperienza dell'utente sul tuo sito web. Tuttavia, per raggiungere questo obiettivo, aggiungere video o GIF sarebbe notevolmente peggiore per i dispositivi mobili rispetto all’utilizzo di SVG e CSS.

Conclusione

Con la possibilità di creare grafica vettoriale personalizzata direttamente all'interno del builder Divi , hai un modo potente per creare illustrazioni e icone per il tuo sito senza alcuna competenza di progettazione necessaria. L'implementazione di questa grafica originale può conferire alle tue pagine e ai tuoi post un'estetica più unica e personalizzata. Rimarrai sorpreso dall'aspetto professionale della tua grafica vettoriale fai-da-te!