Hai bisogno
di assistenza?
Costruiamo insieme il tuo sito web.
Installazione Joomla!® sul tuo server.
Importare e visualizzare file SVG in Joomla!® 5
Di default Joomla!® non permette di importare file in formato SVG.
Se proviamo a caricarne uno nella cartella Media compare il messaggio: "This file type is not supported.".
Un file SVG (acronimo di Scalable Vector Graphics) non è un'immagine raster costituita da pixel come un JPG o un PNG, ma un formato di immagine vettoriale basato su XML. Definisce le immagini utilizzando forme geometriche come linee, curve e poligoni. Ovviamente non è il formato adatto a immagini "fotografiche", quali paesaggi, ritratti ecc. ma trova ampio utilizzo nel rappresentare loghi, scritte, icone e immagini animate.
In questo ambito offre numerosi vantaggi rispetto ad un JPG o PNG come ad esempio:
- la scalabilità - un'immagine SVG può essere ingrandita a piacere senza perdere nulla in risoluzione;
- la dimensione - un file SVG generalmente occupa meno spazio rispetto al suo corrispondente raster;
- l'interattività - un SVG può contenere collegamenti ipertestuali o animazioni;
- la modificabilità - può essere facilmente creato e modificato con un software di grafica vettoriale.
E allora, a fronte di tutti questi vantaggi, perché non è supportato nativamente da Joomla!®?
Il motivo per cui di default non è consentito il caricamento di file SVG è legato alla sicurezza.
Il formato SVG potrebbe contenere script e codice XML malevolo che una volta in esecuzione potrebbe compromettere la sicurezza del sito, permettere attacchi XSS (Cross-Site Scripting), furti di dati sensibili, sovraccarico del server (DoS) o altro.
Non voglio demonizzare l'uso degli SVG, io stesso li uso regolarmente, ma con le dovute attenzioni.
Raccomandazioni utili
- generate voi stessi gli SVG con un software di grafica vettoriale;
- se li reperite da fonti esterne verificatene l'attendibiltà;
- apriteli con un editor di codice e controllate che non siano presenti istruzioni "strane" di cui non conoscete la funzione;
- create in Media una cartella dedicata agli SVG;
- limitate la possibilità di caricamento degli SVG ad utenti di cui vi fidate;
- nella documentazione ufficiale di Joomla!® Media: Uploading SVG files, leggiamo che dalla versione 4.1 in poi è presente un "sanitizer tool" che filtra gli SVG caricati usando il Media Manager. Ne deduco che sia meglio preferire questo metodo ad altri, come l'upload diretto via FTP.
Fatte queste doverose premesse, vediamo come procedere per abilitare il caricamento di file SVG nella cartella Media di Joomla!®.
Caricare file SVG in Joomla!®
Abilitare il caricamento di file SVG nella cartella Media è semplice.
Andiamo in Media e clicchiamo il button Options in alto a dx.
Si aprirà una finestra con numerose opzioni di configurazione
(clicca sulla foto per ingrandirla).
Ora, sia ad Allowed Extensions che a Legal Image Extensions (File Types)
aggiungiamo in coda alle estensioni consentite:
,svg
e in coda a Legal MIME Types:
,image/svg+xml
e Salviamo la configurazione.
Proviamo ora a caricare un file SVG in Media,
lo vedremo apparire correttamente visualizzato nell'anteprima.
Editor TinyMCE (di default)
L'editor TinyMCE, di default in Joomla!®, ora gestisce da subito l'inserimento di SVG.
Vedi ad esempio l'inserimento di un'immagine SVG in un articolo.
Editor JCE - abilitare caricamento SVG
Se utilizziamo un Editor di terze parti, come ad esempio JCE (uno dei più diffusi),
dobbiamo accertarci che supporti l'inserimento di SVG.
Nel caso di JCE (ad oggi v. 2.9.81) dobbiamo operare una piccola modifica ai profili utente.
Andiamo in: Components --> JCE Editor --> Profiles
Clicchiamo sul nome di un profilo per poterlo editare e andiamo al Tab Plugin Parameters
Ora dalla sidebar a sinistra selezioniamo: Image Manager
clic sulla matitina di Permitted File Extensions e aggiungiamo all'elenco: svg
Nota importante: possiamo personalizzare i "Profiles" di JCE per consentire il caricamento di SVG a determinati gruppi di utenti (o solo al Super User) e negarlo ad altri, con ovvi vantaggi in termini di sicurezza.