Activer la prise en charge SVG dans WordPress

WordPress permet aux utilisateurs de télécharger plusieurs types de fichiers image différents. Vous reconnaîtrez probablement les suspects habituels, tels que PNG et JPG. L'affichage d'autres types de fichiers, tels que des graphiques vectoriels, peut être plus problématique.

Heureusement, il existe plusieurs façons d'intégrer des fichiers vectoriels dans votre site Web. Bien qu'il ne s'agisse pas d'une fonctionnalité native, les fichiers SVG (Scalable Vector Graphics) peuvent être utilisés pour afficher des images en deux dimensions sur les sites WordPress. Avec une petite reconfiguration, vous pourrez optimiser certains de vos logos et autres graphiques en utilisant ce type de fichier.

Remarque : Si vous hébergez avec WP Engine, nous prenons en charge nativement la compression GZIP sur les fichiers SVG.

Dans cet article, nous en apprendrons plus sur ce que sont les fichiers SVG et pourquoi vous voudrez peut-être les utiliser. Ensuite, nous verrons deux manières d'activer leur utilisation sur votre site Web. Nous couvrirons également certaines précautions de sécurité importantes que vous voudrez peut-être prendre. Commençons!

Qu'est-ce qu'un SVG ?

Un fichier SVG est un type d'image vectorielle. Les fichiers vectoriels sont composés différemment des types de fichiers image plus courants. Par exemple, un JPG est composé de milliers de pixels. Avec un fichier SVG, en revanche, ce n'est pas le cas.

Les images vectorielles ressemblent davantage à un ensemble d'instructions écrites. Ils ne contiennent pas de pixels qui forment une image plus grande. Au lieu de cela, ils incluent un ensemble de données de type schéma qui crée une image en deux dimensions. Cela signifie que l'utilisation de fichiers SVG présente des avantages uniques.

Pourquoi utiliser SVG ?

Les SVG ont un certain nombre d'avantages. Comme ils sont hautement évolutifs, vous pouvez modifier la taille selon vos besoins sans affecter la qualité de l'image. Comme vous le savez peut-être trop bien, si vous essayez d'augmenter la taille d'un JPG, la qualité se dégrade très rapidement à un niveau inutilisable.

C'est là que les SVG peuvent être utiles. Bien qu'ils ne soient pas destinés à afficher des photographies traditionnelles, ils constituent un excellent choix pour les logos d'entreprise, les icônes et autres graphiques simples sur votre site Web.

De plus, les fichiers SVG ont tendance à être beaucoup plus petits que les autres types d'images. Cela signifie que votre site ne sera pas embourbé par les graphiques. De plus, les fichiers SVG sont indexés par Google, et ce depuis un certain temps. Cela peut être une véritable aubaine pour l'optimisation de votre site pour les moteurs de recherche (SEO).

Comment télécharger un SVG sur WordPress

Étant donné que WordPress n'inclut pas la prise en charge des SVG prêts à l'emploi, vous devrez travailler un peu plus dur pour les inclure sur votre site Web. Dans les prochaines sections, nous verrons comment ajouter des fichiers SVG à votre site Web avec un plugin et via un processus manuel.

Méthode 1 : Utiliser un plugin

Comme pour de nombreuses tâches WordPress, les plugins peuvent simplifier l'activation du support SVG. Tout ce que vous avez à faire est de choisir le bon outil et de configurer quelques paramètres.

Étape 1 : Téléchargez le plug-in

Tout d'abord, vous devrez télécharger et installer un plugin SVG. Nous recommandons le support SVG :

Une fois que vous avez installé et activé le plugin, vous aurez une nouvelle option de menu dans votre tableau de bord WordPress sous Paramètres > Support SVG . Là, vous recevrez des instructions sur la façon de styliser les fichiers SVG pour votre site Web :

De plus, vous pourrez configurer quelques paramètres administratifs importants. Cela inclut la restriction des privilèges de téléchargement SVG aux administrateurs uniquement :

Après cela, vous pourrez télécharger des fichiers SVG directement dans votre médiathèque. Cependant, il y a quelques autres éléments importants à prendre en charge en premier.

Étape 2 : Activez la prise en charge GZip des fichiers SVG sur votre serveur

La façon dont vous aborderez cette étape dépendra de la configuration de votre hébergeur et de votre serveur. Par exemple, ici chez WP Engine, GZip est déjà activé pour une liste spécifique de types de fichiers. Cela dit, "image/svg+xml" n'en fait pas partie.

L'ajout de ce type à la liste de votre site Web garantira que vos fichiers SVG sont optimisés de manière appropriée et rapide. Vous devrez inclure ce type de fichier dans votre fichier .htaccess , pour que tout se passe bien.

Étape 3 : Assurez-vous que le plugin sécurise correctement les fichiers

L'un des inconvénients de l'utilisation de fichiers SVG, et la principale raison pour laquelle ce type de fichier n'a pas encore été intégré au cœur de WordPress, est dû à des problèmes de sécurité. Étant donné que les fichiers SVG sont basés sur XML, ils sont vulnérables aux attaques d'entités externes, entre autres risques.

Lorsque vous configurez votre plugin SVG, il est recommandé de limiter l'accès au téléchargement SVG aux administrateurs uniquement. Cependant, une approche encore plus sécurisée consiste à "désinfecter" vos fichiers SVG avant de les télécharger. Cela élimine tout code XML inutile qui pourrait laisser votre site ouvert aux attaques.

Le plugin SVG Support n'inclut pas la désinfection automatique, mais il existe d'autres plugins qui le font. Safe SVG en fait partie :

Alternativement, vous pouvez également installer votre propre désinfectant et l'utiliser indépendamment. Le créateur de Safe SVG a fourni le code de nettoyage du plugin sur GitHub, pour que tout le monde puisse l'utiliser.

Avoir votre propre désinfectant en place est également une bonne option si vous envisagez d'utiliser la méthode suivante pour activer les SVG sur votre site Web WordPress.

Méthode 2 : Activer manuellement les téléchargements de fichiers SVG

Si vous préférez vous salir les mains plutôt que d'utiliser un plugin, vous pouvez activer manuellement votre site WordPress pour qu'il accepte les fichiers SVG. Ensuite, nous verrons comment fonctionne ce processus.

Étape 1 : Modifier le fichier Functions.php de votre site

Pour commencer, vous devrez modifier le fichier functions.php de votre site Web. Pour cela, vous pouvez aller dans Apparence > Modifier les thèmes dans votre tableau de bord, et sélectionner le fichier functions.php :

Vous pouvez également accéder aux fichiers de votre site à l'aide d'une application FTP (File Transfer Protocol) telle que FileZilla.

Dans tous les cas, il est préférable de créer un thème enfant ou de passer à un environnement de développement avant d'effectuer tout travail majeur sur votre site Web. Cela gardera votre site en ligne à l'abri des dommages pendant que vous apportez des modifications.

Étape 2 : Ajouter un extrait de code

Ensuite, vous devrez ajouter l'extrait de code suivant à votre fichier 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' );

Après cela, vous pourrez télécharger des images SVG dans votre médiathèque. Là, vous pouvez les visualiser et interagir avec eux comme avec d'autres types de fichiers image.

Étape 3 : Sécurisez l'accès et limitez les autorisations de téléchargement SVG

Comme nous l'avons mentionné précédemment, l'activation des fichiers SVG comporte certains risques. Pour assurer la sécurité de votre site, vous pouvez définir des autorisations de téléchargement pour les SVG en créant des rôles d'utilisateur personnalisés. Vous pouvez utiliser un plug-in tel que User Role Editor ou WPFront User Role Editor pour y parvenir.

Ces plugins vous permettent de personnaliser les niveaux d'accès et d'autorisation pour vos rôles d'utilisateur existants. En d'autres termes, ils vous permettront de désigner les utilisateurs autorisés à télécharger des SVG. Cela vous aidera à garder un œil sur la sécurité de ces fichiers.

Restez en sécurité avec WP Engine

Nativement, WordPress ne permet pas l'utilisation de fichiers SVG. C'est dommage, car ces fichiers ont tendance à être la meilleure option pour afficher des logos et d'autres graphiques. La bonne nouvelle est qu'avec l'aide de certaines de nos ressources de développement préférées, vous pourrez activer et sécuriser l'utilisation de fichiers SVG sur votre site.

De plus, gardez à l'esprit que sur nos plans d'hébergement WordPress, vous aurez accès à un support professionnel et à des solutions de sécurité de site Web bien développées. Sécurisez votre site avec nous dès aujourd'hui !