un .svg en background image ?

[bga_O]

Bonjour à toutes et à tous.

J'aimerai mettre une image .svg en background de mon site, après avoir flané sur le net j'ai apposé du code css comme :

body {
background-image: url('fonti.svg');
background-attachment: fixed;
background-repeat: no-repeat;
background-color: ;

}

cela ne fonctionne pas, bien évidemment ça fonctionne avec un .jpg...

J'ai lu d'autres méthodes qui me semblent plus ou moins mystiques, comme ouvrir son .svg dans un fichier texte, le copier...

bon, je ne comprends pas vraiment tout je vous avouerai que je suis perdu... apparemment ça à l'air compliqué

merci de votre aide

 

[Anonyme]

On ne peut pas utiliser de svg dans les css, juste des formats bitmaps*. Un solution serait de mettre le fichier svg dans la page et puis positionner les autres éléments par dessus.. Mais alors prise de tête assurée et code html pas joli-joli. :hein:




*Webkit (peut-être déjà safari 3) seraient capable de le faire néanmoins, mais ce n'est pas standard.

 

[jeanba3000]

Quel serait le but de mettre un svg en fond ?
Si c'est une image fixe, autant mettre une image matricielle (gif, jpeg, à la rigueur png).
Si c'est animé, est-ce que ça ne risque pas de détourner l'attention du contenu au premier plan ?

 

[Céroce]

Quel serait le but de mettre un svg en fond ?
Si c'est une image fixe, autant mettre une image matricielle (gif, jpeg, à la rigueur png).

- Le poids du fichier
- Si tu dessines en vectoriel, tu n'as pas besoin de convertir dans un format bitmap
- Le fichier reste modifiable à l'envi.

Bref, vivement que ça devienne totalement standard!

 

[p4bl0]

- Le poids du fichier
- Si tu dessines en vectoriel, tu n'as pas besoin de convertir dans un format bitmap
- Le fichier reste modifiable à l'envi.

Bref, vivement que ça devienne totalement standard!

J'étais venue pour dire la même chose quand j'ai vu le titre, et même si c'est dit je le redit quand même, parce que VIVEMENT QUE SVG SOIT SUPPORTÉ DANS TOUT LES BROWSERS !

 

[jeanba3000]

- Le poids du fichier
OK pourquoi pas, enfin ça dépend de la complexité de ton dessin, des fois c'est plus lourd en vectoriel et plus gourmand en ressources

- Si tu dessines en vectoriel, tu n'as pas besoin de convertir dans un format bitmap
- Le fichier reste modifiable à l'envi.
La logique de travail avec des images, c'est un ou des fichiers de travail (étapes, versions…) non compressés et éditables (des .psd quoi, comme on a des .fla et des .swf), et un fichier d'exploitation optimisé pour le web, donc tu as toujours un original éditable, c'est même une sécurité contre les accidents, écrasements intempestifs…

Bref, vivement que ça devienne totalement standard!
oui, de toute façon

Mon expérience de graphiste et flasheur m'a appris que le vectoriel n'était pas la panacée absolue pour un affichage écran qui ne connaît de toute façon que les pixels. La pixélisation à la volée du vectoriel lors de son affichage n'est pas forcément meilleure qu'une image matricielle bien nette mitonée au pixel près.

Le jour où on aura une résolution écran équivalente à l'impression magazine on s'en foutra, mais pour l'instant je crois que le détail du pixel reste incontournable.
Donc pour moi, il faut vraiment justifier l'usage du vectoriel à destination de l'écran (animation, interactivité type flash…), si c'est pour une image fixe, c'est la plupart du temps inutile, à mon avis.

 

[bga_O]

Un grand merci pour vos réponses...

même si ça ne me conforte pas... au contraire

pourquoi du vectoriel ? car j ai fais des dessins persos pour mon site... et que j'aurai bien aimé que le background et le dessin soit au minimum, voire pas du tout pixelliser...

auriez vous un conseil pour une image qui devrait prendre : 700x780 pixel ^^ la page quoi ^^


merci

 

[Yordi]

Quand tu es dans Photoshop, il te suffit de faire un Enregistrement pour le web. Tu peux essayer avec plusieurs type de compression (Jpg, Png, Gif, etc) tu joues avec les niveaux de compression ou le nombre de couleurs si tu sais et regarde le poids final pour maximiser la compression tout en gardant une belle qualité d'image (Tu n'as qu'a zoomer principalement sur les endroits ou il y a des dégradé surtout et de grand contraste). Et de plus, si ce n'est que des aplats de couleurs (sans dégradé) ton images ne pèsera presque rien vu le peu de couleur y figurant.

Sinon, je suis d'accord pour dire que le vectorielle doit être pixeliser (ce n'est pas grave pour le web vu la petite résolution de 72DPI, ce n'est pas très terrible terrible) on ne verra presque pas de différence.

 

[jeanba3000]

bga_0, je crois que tu confonds pixelisation avec artefacts de compression. N'oublie pas qu'un écran n'affiche que des pixels, donc toute image même vectorielle est pixelisée à l'affichage.

Si ton image est à la bonne dimension et pas trop compressée, elle s'affichera bien.

Par contre si les formes et traits de tes dessins vectoriels ne « tombent pas juste » dans la matrice de pixels, ils seront floutés par l'approximation engendrée lors de la pixelisation à la volée, alors que ce phénomène est évitable plus facilement lorsqu'on travaille au pixel près dans Photoshop ou équivalent. On peut bien sûr aussi se démerder en vectoriel pour avoir des formes qui s'inscrivent bien dans une matrice de pixels, mais c'est un peu plus dur puisque pas « naturel ».

 

[bga_O]

Effectivement je confondais les deux... merci pour la précision

Concernant les couleurs, je crois que j'ai un peu abusé dessus... je vais donc alléger déjà tout ça... et par la suite compresser tout ça....

serait-ce judicieux de couper l'image en plusieurs "morceaux" pour une "meilleure" compression, faire ça morceaux par morceaux pour optimiser ? :mouais:

Merci à vous deux

 

[obi wan]

serait-ce judicieux de couper l'image en plusieurs "morceaux" pour une "meilleure" compression, faire ça morceaux par morceaux pour optimiser ? :mouais:

non
- D'une part parce que si artefacts de compression il y a, on les verra beaucoup plus sur un découpage (il risque d'y avoir des "coupures brutales d'artefact").
- Et d'autre part parce qu'il vaut mieux télécharger 1 image de 60 Ko que 10 images de 6 Ko, n'importe quel serveur web ira toujours + vite dans le premier cas (moins de requêtes).

 

[bga_O]

Un grand merci à tous


:love: