integrer logo svg sur divi

Avoir un logo net grâce au format SVG dans Divi

Marlène

13 août 2022

Aujourd’hui et dans le blog dédié au thème d’Elegant Themes, nous allons voir pourquoi et comment ajouter un logo SVG à un site Divi.

L’avantage du format SVG : la netteté

Contrairement aux formats d’image les plus courants : JPG ou PNG, le format SVG est un format d’image vectoriel qui permet d’agrandir et de rétrécir sans perte de résolution. Avec le JPG et le PNG, il peut arriver qu’une image paraisse floue sur certaines tailles d’écran. Grâce au SVG, vous pouvez ainsi avoir un logo beaucoup plus net en front, à la fois sur desktop, tablette et mobile. Tout comme le format PNG, il permet d’avoir un fond transparent. Celui-ci peut donc être intégré sans souci sur tout type de couleur de fond.

L’inconvénient du format SVG sur Divi

Par défaut, WordPress n’accepte pas l’importation des fichiers SVG pour des raisons de sécurité. Afin de pouvoir ajouter des images ou des logos SVG à votre bibliothèque de médias, deux options sont possibles.

Ajouter du code pour autoriser le format SVG spécifique

Pour avoir la possibilité d’ajouter un logo SVG à la bibliothèque de médias, le code suivant peut être utilisé :

function allow_svgimg_types($mimes) {
  $mimes['svg'] = 'image/svg+xml';
  return $mimes;
}
add_filter('upload_mimes', 'allow_svgimg_types');

Celui-ci est à ajouter dans le thème enfant au niveau du fichier functions.php
Si vous ne souhaitez pas toucher le code php de votre thème, une astuce plus simple existe. Un plugin peut insérer ce code directement pour vous.

Avoir un plugin tiers

Plusieurs extensions donnent la possibilité d’ajouter des images SVG. Par exemple, Divi Pixel donne accès à une multitude d’options pour enrichir votre webdesign :

  • Personnalisation du header
  • Modules pour enrichir vos mises en page (timeline, image mask, flip box…)
  • Ajout de preloader ou encore de pop-up

Pour notre thématique du jour et pour autoriser l’importation du format SVG, rendez-vous dans le dashboard de Divi Pixel > General > Allow SVG Uploads

Pensez à bien valider lorsque vous avez coché cette option. Vous pouvez maintenant vous rendre dans votre bibliothèque de médias de votre CMS pour ajouter votre logo SVG.

Divi Pixel Allow SVG Uploads

Pour en savoir plus sur Divi Pixel, cliquez sur la bannière ci-dessous (lien affilié).

bannière divi pixel
Cette option existe également dans le plugin Divi Toolbox de Divilover.

Le format SVG, Firefox et Safari

Avec Divi et lorsque vous insérez un logo en format SVG, il est possible que celui-ci ne s’affiche pas dans les navigateurs Firefox et Safari contrairement à Chrome. Pour résoudre ce problème d’affichage, les dimensions du logo doivent être renseignées dans les styles de votre menu. Pour connaitre la taille de ce logo, vous pouvez utiliser l’inspecteur de Chrome en passant votre souris sur celui-ci. Ainsi, vous obtiendrez la hauteur et la largeur de votre image en pixels.

Ensuite et pour insérer les dimensions de votre logo, rendez-vous dans le thème builder > En-tête global > Paramètres du module Menu > Style > Dimensionnement

Dimensions logo SVG

Pour conclure, le format SVG est un bon moyen d’obtenir un logo parfaitement net. Celui-ci a normalement été conçu par votre graphiste lors de l’élaboration de votre charte graphique. Après avoir autorisé l’importation de ce format dans la media library de WordPress avec du code ou un plugin, il vous suffira de renseigner les dimensions exactes de votre logo afin qu’il soit visible sur les navigateurs comme Chrome, Firefox ou encore Safari. Si vous souhaitez avoir plus d’astuces pour avoir des images de qualité sur vos pages web, c’est par ici.

dégradé noir gris