Changer les couleurs d’une image SVG dynamiquement

Les fichiers vectoriels, souvent au format svg, sont de plus en plus utilisés. On en trouve même gratuitement par exemple sur le site unDraw.

Nous verrons ici comment colorier dynamiquement une image vectorielle à l’aide d’une feuille de style .css . La méthode présentée n’est pas réalisable que sous navigateur web.

Images Vectorielles

Les images vectorielles utilisées sur le web ont un grand nombre d’avantages quand on les compare aux images au format (PNG, JPG, JPEG, GIF)

  • Plus légères
  • Aucune perte de compression
  • redimensionnement sans détérioration de l’image
  • Édition simplifiée

Les images vectorielles peuvent être modifiées à l’aide de logiciel (InkScape, etc..) ou même avec un éditeur de texte.

Langages de balisage

Les images au format SVG (Scalable Vector Graphics) sont écrites au format XML (Extensible Markup Language). Un format balisé similaire au HTML (HyperText Markup Language).

HTML et XML sont tous deux des langages appartenant à la famille des langages de balisage généralisés normalisés. Il n’est donc pas étonnant qu’ils partagent les mêmes propriétés.

Les deux langages utilisent les caractères ‘<‘ et ‘\>’ pour ouvrir et fermer une balise. Elles implémentent toutes les deux un système d’attribut permettant d’ajouter des informations aux balises.

Tel qu’utilisés pour la mise en forme des fichiers des images vectorielles, le format XML a en sommes les mêmes capacités que le format HTML.

CSS et SVG

Alors nous pouvons tirer avantages des similarités des deux langages pour utiliser en XML des propriétés propres au HTML+CSS, à savoir les classes.

Pour l’exemple, prenons un fichier SVG simple tel que le logo du site GOUVAERT. L’image en elle même est composée d’un cercle et de 2 droites.

En représentation vectorielle ce sont 3 objets, il y a donc dans notre fichier .svg 3 chemins (<path>)

<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
    <!-- Cerce !-->
    <path d="" stroke="white" stocke-width="20"/> 
    <!-- Cerce !-->
    <path d="" fill="white" />
    <path d="" fill="white" />
</svg>
image.svg

Pour simplifier l’affichage du code je supprime le contenu des attributs d, servant à dessiner les chemins.

Si on ajoute à la liste des attributs un attribut “class” on pourra avec une feuille de style CSS en commander les propriétés. 

<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
    <!-- Cerce !-->
    <path d="" class="cercle"/> 
    <!-- Cerce !-->
    <path d="" class="ligne" />
    <path d="" class="ligne" />
</svg>
image.svg
.cercle {
    stroke : white;
    stroke-width : 20;
}

.ligne {
    fill : white; 
}
style.css

Conclusion

Vous pouvez maintenant ajouter votre image et votre feuille de style dans la même page html, vous pourrez la voir prendre des couleurs.

Pour profiter des fonctionnalités du HTML avec votre fichier vectoriel vous allez devoir le copier coller grossièrement dans votre page web, sans passer par la balise HTML <image>.

En php vous pouvez l’importer directement. 

<?php include "images/img.svg"; ?>

Related Posts