Publié par Fabrice le 26 février 2014, temps de lecture estimé : 2 minutes Webmastering
Le SVG, format bien pratique qui commence à être fréquemment utilisé, nécessite quelques petites vérifications pour ne pas avoir de mauvaises surprises !
D'abord, bien vérifier que le serveur envoie le bon Content-Type (image/svg+xml) - voir l'article de CSS-Tricks à ce sujet.
Ensuite la balise svg doit contenir deux attributs importants : les dimensions width et height et le viewBox - les 4 éléments de l'attribut viewBox sont, dans l'ordre, coordonnées x, coordonnées y, largeur et hauteur.
En théorie le XML du SVG doit contenir au moins ceci : <svg width="200" height="100" viewBox="0 0 200 100" […]>
Or lorsque que l'on utilise des logiciels de dessins, ces attributs ne sont systématiquement inclus (j'en ai fait l'expérience). Le viewBox peut-être obtenu en enregistrant le fichier au format "svg optimisé" (qui à l'avantage de réduire également son poids). Et si les dimensions ne sont pas incluses, il faudra les rajouter manuellement.
Sans cela, des surprises sont à prévoir comme dans le test suivant avec Internet Explorer et Android.
Le code HTML utilisé est le suivant : <img="img.svg" width="64" height="64" alt="">