Astuce // Utiliser le format SVG avec WordPress

Récemment, un utilisateur X (ex-Twitter) nous a recommandé d’utiliser une image au format SVG avec WordPress pour notre logo plutôt qu’une image JPEG ou Webp pour un meilleur rendu. Étant un format vectoriel, il permet de pouvoir agrandir et/ou réduire la taille de l’image sans perte de résolution.

Qu’est-ce que le SVG ?

SVG signifie Scalable Vector Graphics (en français « graphique vectoriel adaptable »). Plus simplement c’est un format de fichier vectorisé et donc qui n’a pas de pixels. Cela est possible car il se compose de code XML. C’est à la fois un avantage, pas de pixels, et un inconvénient, qui dit code dit potentielle faille de sécurité. Nous verrons un peu plus bas comment y palier.

Comment exporter correctement son fichier SVG ?

Pour cela, nous allons utiliser le logiciel Adobe Illustrator grâce auquel vous pourrez recréer votre logo en vectoriel. Une fois votre logo créé, il vous faudra l’exporter au bon format et avec les bonnes configurations.

Exporter le fichier en allant dans Fichier puis Exporter sous :

Une nouvelle fenêtre s’ouvre :

• renommez votre fichier si besoin
• sélectionnez le type de format SVG
• cocher la case Utiliser le plan de travail
• puis cliquez sur Exporter

Une dernière fenêtre de configuration s’ouvre, choisissez les options suivantes :

• Styling: Presentation Attributes
• Font: SVG
• Images: Preserve
• Object IDs: Minimal
• Decimal: 2
• Cochez la case Minify uniquement puis cliquez sur OK pour valider

Comment utiliser son format SVG avec WordPress ?

Une fois l’export de votre fichier SVG terminé, il est temps de l’importer sur WordPress ce qui n’est malheureusement pas possible nativement. Pour pouvoir téléverser votre fichier SVG sur votre site WordPress vous allez donc avoir besoin d’un plugin. Dans notre cas nous utiliserons SVG Support.

Une fois installé sur votre site, il vous faudra personnaliser les réglages. Voici notre recommandation de configuration pour ce plugin :

• Restrict SVG Uploads to? Oui. Nous préférons restreindre l’upload des SVG aux administrateurs pour la simple et bonne raison qu’ils peuvent représenter un problème de sécurité. Pour en savoir plus, nous vous invitons à lire cet article du blog code-garage.fr.
• Sanitize SVG while uploading? Oui. Pour nettoyez le fichier d’éventuels caractères non sécurisé. Cela permet de renforcer la sécurité et d’éviter autant que possible des possibles failles XSS.
• Minified SVG? Oui. Cela permet notamment des gains de performances.
• Nous laissons les cases restantes décochées.

Uploader son format SVG et l’utiliser comme logo

Une fois ces étapes terminées, vous pouvez uploader votre fichier normalement en passant par la médiathèque. Depuis votre admin WordPress, allez dans Médias dans le menu à gauche, puis cliquez sur Ajouter. Vous pouvez ajouter le détail que vous jugez nécessaire à votre image (texte alternatif, description etc.).

Vous pouvez maintenant utiliser votre image SVG à la place de votre logo. Pour ce faire, depuis votre admin, allez dans le menu à gauche dans Apparence puis Personnaliser. Cela va vous ouvrir l’onglet de personnalisation directement sur votre site à gauche, comme sur l’image ci-dessous :

Puis, selon votre thème, allez dans Site identity puis Logo Site & Icon. Cliquez sur Changer le logo, choisissez votre image. Une fois votre image sélectionnée, une nouvelle fenêtre s’ouvre vous proposant de cropper votre image.

Après toutes ces étapes vous aurez un SVG fonctionnel et disponible pour l’utiliser comme vous le souhaitez sur votre site WordPress 🙂