Backgrounds en SVG

[Stephane Deschamps]

Salut les gens,

Je commence à regarder comment on fait des backgrounds en SVG pour des
économies de bande passante, et je suis tombé sur l'article de MDN
suivant :
https://developer.mozilla.org/en/SVG_In_HTML_Introduction

Pour ma part je n'ai jamais donné de position absolue au body, je ne
sais pas pourquoi mais ça me fait froid dans le dos (sans doute une
réminiscence des vieux navigateurs où tout était prétexte à bugger).

Je suis preneur de vos retours sur la façon la plus solide de faire
des backgrounds en SVG.

--
Cordialement,
Stéphane Deschamps
http://www.nota-bene.org/

[Yvain Liechti]

Bonjours,

Comme toi la position absolu sur le body me semble un peu barbare. En plus si la fenêtre est moins haute que le fieldset (dans cet exemple), ça foire.

Mes derniers tests de svg en background n'étaient pas vraiment concluant. Mauvais rendu et difficulté à avoir un motif qui se répète correctement.

Pour le moment je ne pense pas qu'il existe une solution "solide" et même les plus solides me paraissent faibles.

Peut-être qu'on me contredira et j'en serais ravis ^^ .

Cordialement,

 
Yvain LIECHTI (Ryuran)
http://ryuran.info/

--
Vous recevez ce message, car vous êtes abonné au groupe Google Groupes Professionnels francophones du développement web.
Pour envoyer un message à ce groupe, adressez un e-mail à webd...@googlegroups.com.
Pour vous désabonner de ce groupe, envoyez un e-mail à l'adresse webdevfr+u...@googlegroups.com.
Pour plus d'options, consultez la page de ce groupe : http://groups.google.com/group/webdevfr?hl=fr

[Julien Wajsberg]

Et, euh, un SVG en background-image, ça marche pas ?

2012/5/9 Stephane Deschamps <stephane....@gmail.com>

[Stephane Deschamps]

2012/5/9 Julien Wajsberg <fel...@gmail.com>:

> Et, euh, un SVG en background-image, ça marche pas ?

Si, je suppose. Mais je pose la question, parce que je me dis, quand
même, MDN, quand même. Donc si c'est documenté là, c'est que ça doit
paraître assez solide à la communauté.

D'une certaine manière toi et Yvain me rassurez, bien que souvent
j'aie des frilosités de vieille fille du fait de mon passif avec les
anciens navigateurs. ;)

Je vais plutôt me rabattre sur un background-image.

[Julien Wajsberg]

2012/5/9 Stephane Deschamps <stephane....@gmail.com>

2012/5/9 Julien Wajsberg <fel...@gmail.com>:

> Et, euh, un SVG en background-image, ça marche pas ?

Si, je suppose. Mais je pose la question, parce que je me dis, quand
même, MDN, quand même. Donc si c'est documenté là, c'est que ça doit
paraître assez solide à la communauté.

ce n'est qu'un wiki, tout le monde peut y mettre ce qu'il veut.

Je ne sais pas si Jérémie-le-grand-maître-du-SVG est parmi nous ?

--
Julien

[Yvain Liechti]

Le background-image pour SVG à apparemment été amélioré sur Aurora 14 mais jusqu'à présent le rendu était assez mauvais (flou) et dés qu'on tentait un "repeat" on se risquait à de mauvais raccords sur certains navigateurs. J'ai testé ça il y a 2 mois donc je n'ai pas pu constater ce que nous propose la mise à jour d'Aurora 14 à ce niveau.

Dans tout les cas, Smil n'est pas interprété donc pas de svg animé pour les background (même je ne pense pas que c'est ce que tu cherchait à faire te connaissant).

A comprendre que ça reste imparfait.

Si à l’occasion j'ai le temps de me repencher dessus. Savoir si ça évolue.

J'aimerai aussi avoir un retour du grand gourou SVG ^^

Yvain LIECHTI (Ryuran)
http://ryuran.info/

--

[Jeremie Patonnier]

Salut,

Je fait un passage rapide et j'essayerai de faire un réponse plus complète ce soir.

1. https://developer.mozilla.org/en/SVG_In_HTML_Introduction n'est pas fondamentalement faux, mais il n'est pas très à jour non plus, il faut que je le reprenne un peu pour le moderniser (en particulier l'exemple qui date d'un autre age)

2. L'utilisation de position: absoute sur le body n'a rien d'obligatoire... c'est juste l'exemple qui essaye de faire un effet à la con.

3. CSS background image est sans doute la meilleur solution à terme, mais oui, il peut y avoir quelques bugs dans certains navigateur. Cependant les choses s'améliorent sensiblement depuis 6 mois (et ce n'est pas fini). L'idéal est de coupler son usage avec la propriété CSS3 background-size (qui est disponible pour tout les navigateurs qui supportent SVG).

4. Le point important avec SVG, c'est de définir les attributs width, height (c'est deux là en pixel... les pourcentages, c'est pour les roxxor qui maitrise plainement les attribut viewBox et preserveAspectRatio), viewBox et preserveAspectRatio (celui-ci n'est pas obligatoire mais permet de mieux controler ce qui ce passe) de manière systématique pour éviter tout problème liés à la taille intrinsèque des images vectoriels (chaque navigateur à des règles de calcul un peu différentes). En suite seulement, vous pouvez commencer à ajouter les propriétés CSS width et height avec éventuellement des valeurs en pourcentage.

Bisous

Jérémie Patonnier

Pour vous désabonner de ce groupe, envoyez un e-mail à l'adresse webdevfr+unsubscribe@googlegroups.com.