Noms des styles CSS en SVG

Lorsqu’on sauvegarde un fichier Illustrator en SVG avec CSS Properties: Style Elements, chaque SVG aura ces noms de style :

  • .st0{fill:#11E700;}
  • .st1{opacity:0.4;fill:#FFFFFF;}
  • .st2{display:none;fill:#697C7E;}

Un problème survient donc si on n’a plus qu’un seul SVG intégré dans un même document.

Il est nécessaire de traiter chaque SVG du côté serveur, pour modifier les noms de style afin qu’ils deviennent uniques.

Options Illustrator pour un SVG

image

Ce sont les options pour exporter un SVG d’Adobe Illustrator pour en faire une page web sans modification ultérieure.

A noter :

  • Polices : SVG (nécessaire pour utiliser les webfonts WOFF, précisés dans un CSS)
  • CSS Properties : Style Elements (pour pouvoir ensuite manipuler les éléments)
  • Decimal Places : 3 (sinon Illustrator met des chiffres en format 2E03, ce qui pose des problèmes)
  • Responsive : nécessaire pour que l’image remplisse l’écran. Cette option supprime le « width » et « height » du SVG