Le Blog de Pilowa
Intégrer un fichier SVG sur mon site WordPress
Intégrer des éléments en format SVG dans son site WordPress est très courant, et même indispensable. Cette opération peut paraître assez simple, pourtant, il est fréquent de rencontrer des difficultés. Les fichiers qui changent de couleur, les contours qui disparaissent ect. Plus globalement vos fichiers s’affichent différemment dans la médiathèque et sur votre site. Toutes les entreprises qui souhaitent se démarquer par leur site internet essayent d’optimiser la qualité de leurs visuels et leur référencement. Ces deux axes stratégiques sont améliorés grâce à l’intégration de fichiers SVG. Ce sont des fichiers moins lourds pour le site et de meilleure qualité. Cependant, leur intégration peut vite devenir un vrai casse-tête. Dans cet article, nous allons répondre à la question suivante : comment bien intégrer un fichier SVG sous WordPress ?
Qu'est ce qu'un fichier SVG ?
Les fichiers SVG ou Scalable Vector Graphics sont des contenus visuels transcrits en code XML. Comme son nom l’indique, l’image est donc vectorisée. Ci-dessous, voici notre logo dans son format SVG puis, traduite en langage XML :
Format SVG logo pilowaLes fichiers au format SVG, vecteur de meilleure qualité des visuels
En intégrant des visuels de ce format, vous vous offrez la possibilité de redimensionner une image sans aucune perte de qualité contrairement à une image jpeg ou png. Ceci, grâce à la construction vectorielle de ce format.
Ils contribuent à diminuer le temps de chargement de votre site et optimisent donc son référencement
Le poids des SVG est aussi un avantage. C’est un format d’image léger. Lorsqu’un navigateur doit afficher une image en jpeg, il doit la charger pixel par pixel. À l’inverse, dans les SVG, seules les informations comme des coordonnées ou des couleurs décrivant ces formes sont stockées. C’est grâce à ce principe que les images SVG sont étirables sans perte de qualité.
Comment bien intégrer un fichier SVG sous WordPress ?
Lors de la phase de construction de notre site internet, nous avons fait le choix d’importer tous nos éléments en SVG. Lors de notre première importation, tout s’est bien passé. Cependant, après des modifications et d’autres exportations, les fichiers SVG ne se comportaient plus comme attendus. Ils changeaient de couleur par exemple.
La clé pour les intégrer sans souci sur son WordPress réside dans la création et/ou l’exportation de vos fichiers SVG à partir de votre logiciel de création graphique. Il est INDISPENSABLE de respecter les sections st0 st1 ainsi que les codes couleur associés (voir l’image ci-dessous), dans absolument tous les SVG de votre site internet. Cela passe par le respect de ce code couleur dans la création de chaque fichier. Si vous travaillez sur un logiciel de création, il est OBLIGATOIRE d’exporter vos fichiers à partir de la même planche de travail.
Dans la pratique, le navigateur va se formater à un certain code avec le premier fichier SVG sur son passage. Si d’autres fichiers sont construits de façon différente, cela va lui donner deux instructions différentes et perturber l’ensemble des fichiers SVG de votre site internet.
La méthode pour intégrer sans problème ses fichiers SVG est donc de respecter ce code couleur sur l’ensemble des fichiers du même type de votre site internet.
D'autres articles qui pourraient vous intéresser...
Récolte
Audit de site • Optimisation SEO • Rédaction d’articles optimisés • Backlinks
Agence SEO Lyon de confiance
Le Blog de Pilowa Agence SEO Lyon : comment choisir une agence de confiance pour mon entreprise Le marketing digital en constante évolution, la mise
