Un icone SVG qui n'apparait pas sur mobile (OS à jour)

Bonsoir,

J'utilise un petit icône en SVG dans mon menu et je m'aperçois qu'il n'apparait pas sur mobile. J'ai inspecté et il devrait apparaitre. J'ai vu qu'il y avait un problème avec les anciennes versions de mobile (iphone, android,...) mais là nous testons sur des mobiles dernières génération ou avant dernières génération avec les OS à jour.

Y a-t-il quelque-chose à faire par rapport aux SVG sur mobile ?

Je vous remercie pour vos remarques

salut,
est-ce que tu parles d'icônes utilisées avec des fonts ou directement insérées ?
Certaines fonts ont des problèmes de rendu sur les navigateurs mobiles.

Certains logiciel, tel qu'Adobe Illustrator, sont susceptibles de produire un code SVG affreux quand ils ne sont pas maitrisés (métadonnée inutiles, image d'origine stockée en base64 dans le code, je ne vous dis pas la taille du fichier..).

Certains SVG ont aussi une déclaration xml de ce type (tout dépend de l'outil ayant permis à les générer). Inutile pour un usage web classique, à supprimer :

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

D'une manière générale il est intéressant d'apprendre à coder un SVG "à la main", je veux dire sans l'aide d'un outil tel qu'Illustrator ou Inkscape. On comprend ensuite beaucoup mieux ce qui peut être supprimé dans le SVG. Des scripts tels que svgo permettent d'automatiser le nettoyage des SVG (on peut l'utiliser en ligne). Le top est les intégrer à son workflow (Grunt, Gulp...), sauf pour les fonts qu'il faut laisser telles quelles.
Modifié par Olivier C (06 Jan 2017 - 18:55)