1476 sujets

Web Mobile et responsive web design

Bonjour à tous

J'ai au sommaire de mon site une timeline qui donne les derniers articles, dernières news, dernières annonces ... à chaque catégorie son icone (png) en regard.
J'ai substitué pour l'une d'elle une icone en SVG.
J'ai fait de même pour ma zone "réseau sociaux" avec l'oiseau bleu et le F blanc.
Tout ça à but de voir si sur iPhone (et je suppose écran rétina divers), c'était plus net.
Ca l'est !
Mais mauvaise surprise : autant le fallback est facile pour IE8 and co (j'aime bcp la solution onerror), autant je me suis retrouvé avec une sérieuse inconnue : sur mon iPad, premier du nom, dernier iOS mis à jour possible, safari semble débloquer sur les ratio H/L des SVG et ne respecte pas en étirant ça dans tous les sens. Je retrouve ça aussi en testant mon sommaire via de sites web qui montre le résultat sous divers version d'android.
J'avais pourtant consulté caniuse qui me disait que le SVG était supporté depuis belle lurette partout (sauf donc sur IE <=8)

Je précise que mes SVG sortent d'inkscape puis sont passés dans SVGcleaner (toutes options activées).

Bref, les icones SVG dans des <img ça semblait être le top du top de mon été 2014, mais je suis refroidi à l'idée de ne pas pouvoir voir le sommaire de mon site correctement sur un iPad 1st gen. (autant je ne sais pas pourquoi, mais pour Android, je n'en aurais aucune insomnie Smiley cligne )

Je suis preneur de toutes idées ou pistes, n'ayant pas trouvé grand chose là dessus sur le web !

Merci !

B.
Modifié par BertrandB (02 Aug 2014 - 09:38)
Salut,

Tu n'as pas une version en ligne qu'on puisse regarder cela ?

PS : le top du top c'est quand même une font icone (http://www.alsacreations.com/tuto/lire/1547-police-font-icone-vectorielle-webdesign.html https://icomoon.io/ http://fortawesome.github.io/Font-Awesome/icons/). Ici tu n'auras pas de soucis de compatibilité.
J'ai trouvé la réponse au problème. En fait l'optimisation du svg par SVGcleaner avait fait sauter tous les width et height, ceci ne posant aucun problème dans les navigateurs récents dignes de ce nom, mais par pour les versions datant un peu.
J'ai donc édité les svp pour rajouter un width et un height correspondant aux limite de viewbox. On perd quand on visionne l'image seule dans un navigateur le très bel effet de pleine fenêtre, mais bon, ce n'est pas le but ici Smiley cligne


B.