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, WordPressWordPress est un système de gestion de contenu (CMS) open source qui permet aux utilisateurs de créer et de gérer fac... 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édiasLa bibliothèque de médias est l'endroit où sont stockées toutes les images, les vidéos et les fichiers télécharg..., 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édiasLa bibliothèque de médias est l'endroit où sont stockées toutes les images, les vidéos et les fichiers télécharg..., 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 enfantUn thème enfant est un thème WordPress qui hérite des fonctionnalités et des styles d'un thème parent, mais qui peu... au niveau du fichier functions.php
Si vous ne souhaitez pas toucher le code php de votre thèmeUn thème est un ensemble de fichiers qui déterminent l'apparence et la fonctionnalité d'un site web. Divi est un thè..., 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édiasLa bibliothèque de médias est l'endroit où sont stockées toutes les images, les vidéos et les fichiers télécharg... de votre CMS pour ajouter votre logo SVG.
Pour en savoir plus sur Divi Pixel, cliquez sur la bannière ci-dessous (lien affilié).
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èmeUn thème est un ensemble de fichiers qui déterminent l'apparence et la fonctionnalité d'un site web. Divi est un thè... builderLe Builder Divi est l'interface graphique du thème Divi qui permet de concevoir et de personnaliser les pages d'un site... > En-têteL'en-tête est la partie supérieure des pages pouvant contenir : • un logo • un menu de navigation • un bouton d'... global > Paramètres du moduleUn module est un élément préconçu et personnalisable de Divi, tel que des textes, des images, des galeries ou encore... Menu > Style > Dimensionnement
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 WordPressWordPress est un système de gestion de contenu (CMS) open source qui permet aux utilisateurs de créer et de gérer fac... 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.
