Svg sur mobile ?

Bonjour,

Est ce qu'il y a quelque chose à savoir pour l'affichage des .svg sur les browser mobiles ??


Sur les navigateur desktop pas de souci, ça affiche les icônes comme il faut, et il y a un fallback grâce a une détection faite avec Modernizer si le navigateur ne supporte pas svg

Sur iPad, ça semble ok (je n'en ai pas un sous la main mais un ami me dit qu'il voit les icones)

Sur iPhone et en testant avec Opera Mobile ça foire: je ne vois pas les icônes.
Alors je ne sais pas du tout d'ou ça peut venir, vu que (sauf erreur de ma part) le svg est supporté et que je ne vois pas le fallback.

Est ce que vous savez vers quoi je peux regarder pour corriger ça ??

merci.

Pour info, je vous colle le contenu d'une icone comme il apparait dans le fichier html :

<a href="/categories/tabourets" title="Tabourets"><!--?xml version="1.0" encoding="iso-8859-1"?-->
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

<svg xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" version="1.1" id="Calque_1" x="0px" y="0px" width="14px" height="40px" viewBox="0 0 14 40" style="enable-background:new 0 0 14 40;" space="preserve">
<path d="M13.697,37.059c-1.988-1.934-3.063-3.916-3.279-6.055c0.189-1.92,1.143-4.668,3.271-6.732l0.303-0.295v-1.976H0v1.976  l0.302,0.293c2.127,2.072,3.084,4.813,3.277,6.726c-0.214,2.147-1.284,4.133-3.271,6.063l-0.303,0.295V40H14v-2.646L13.697,37.059z   M2.189,38c2.035-2.141,3.173-4.465,3.39-6.92l0.008-0.088l-0.008-0.09c-0.215-2.396-1.271-4.924-2.835-6.901h8.498  c-1.58,1.979-2.611,4.472-2.824,6.917l-0.008,0.09l0.008,0.088c0.221,2.443,1.363,4.764,3.398,6.904H2.189z"></path>
<rect y="0.001" style="fill:none;" width="14" height="39.999"></rect>
</svg>
</a>

Modifié par 513 (09 Dec 2011 - 15:00)

C'est du html5?

tu veux dire, est ce que je défini le doctype HTML5 ? oui.

J'ai approfondi un peu et donc je me rend compte que l'iphone que j'ai ne supporte pas "inline-svg" (pareil pour Android sur Opera Mobile)

Donc il semblerai que je ne puisse pas tout simplement pas écrire directement du svg

Ce qui ne m'arrange pas vu que j'ai besoin de modifier en le svg en fonction de certain paramètres au chargement de la page coté serveur.... Ça me fout par terre une partie de ce que je voulais faire...

J'ai un vieil iPhone 3G avec un safari pas en dernière version (iOS 4.2.1) et le svg inline s'affiche parfaitement. Exemple.


C'est bon aussi dans Opera mini, le code de ta page est valide?
Modifié par Patidou (10 Dec 2011 - 12:05)

Android avant version 3 ne supporte pas les SVG, il faut donc prévoir un fallback.

Je parle évidemment du navigateur de base. D'autres navigateurs comme Firefox mobile l'affiche sans problème sur android 2.

Bonsoir, merci pour vos commentaires.

Vaxilart :
En effet, j'ai prévu un fallback, ça c'est ok.

Patidou :
Pour ce qui est de la validation, j'avais des erreurs dû au fait que pour modifier mon fichier svg je fais de la manière suivante :

$svg = simplexml_load_file('img/'.$v['Category']['icon']);
	
if($v['Category']['id'] == $category['id']) {
	$svg->g->path['fill'] = $color; //Couleur de l'univers en cours si le catégorie est sélectionné.
	$svg->path['fill'] = $color;
	$svg->polygon['fill'] = $color;
} 
					
$icon = $svg->asXML();

donc en utilisant asXML() ca me sortait tout le prologue xml. j'ai corrigé ça.

J'ai regardé ton exemple. En effet je l'ai vu s'afficher moi aussi sur mon iphone 4 avec iOS4.3...
mais d'après http://caniuse.com/svg-html5 et Modernizer le svg-inline n'est pas supporté.

Après tout ca, je pensais que j'allais enfin voir mes belles icones en svg sur l'iphone mais non. Pour moi ça ne fonctionne pas.

Enfin mon souci est résolu dans le sens ou :
Mon fallback s'active quand svg-inline n'est pas supporté.
et J'ai corrigé les erreurs de validations de ma page grâce à ta remarque.

Mais si tu as une piste à m'indiquer comment toi tu réussi à afficher du svg inline alors que ce n'est pas censé être supporté je suis preneur !

Hello,

De mémoire, la dernière fois que j'a testé le in-line SVG sur iPad 2 (avant la mise à jour vers iOS 5), cela fonctionnait très bien. Cela est arrivé avec Opera depuis la version 11.60 sur desktop, je ne sais pas quand c'est prévu sur mobile.

Pour info, cela fonctionne dans IE9 Mobile sur Windows Phone.

Pour éviter tout ces soucis, pourquoi ne pas utiliser la librairie Raphael.js si cela correspond à tes besoins bien sûr?

Bye,

David