SVG flou sous Firefox

Bonjour,

j'ai un petit soucis avec les SVG.

J'inclus mon svg directement dans le html de la façon suivante :

<svg width="90" height="90" viewBox="0 0 90 90">
     <rect fill="#000" width="90" height="90"/>
</svg>

svg
{
     display: block;
     width: 90px;
     height: 90px;
}

Le problème survient avec Firefox. En fonction de largeur de la fenêtre, mon carré est flou.
J'ai l'impression que quand la largeur en pixel de la fenêtre est paire (ou l'inverse), le carré est flou et quand la largeur est impaire, le carré est net.

J'ai fait un imprim écran pour vous montrer le carré flou.



EDIT :
petite précision, le SVG a un margin auto ou il se situe dans un élément qui a un margin auto.

EXEMPLE :
http://tutorials.jenkov.com/svg/svg-viewport-view-box.html
Aller voir sur cette page avec Firefox, testez avec le rectangle qui à une bordure noire épaisse au paragraphe qui porte le titre The View Box.

Je crois que je vais devoir repasser au PNG...
Modifié par kittyhello (06 Dec 2014 - 10:48)

Ce problème n’apparaît pas si j'inclus le svg via une balise image.

Si quelqu'un a une solution... Je suis preneur.

Bonsoir. Intéressant. Je n'avais jamais remarqué. Après il faut savoir si l'utilisation concrète que vous en ferez grèvera votre rendu final...

Perso j'ai beaucoup misé sur le svg pour mes dernières refontes de thèmes de site. Je ne m'en plain pas : exemple en pied de page : le logo est en svg. Mais je suis sous OSX, ça a peut-être un impact, je vérifierai...

Sinon, une astuce peut-être : un <path> rectangulaire à la place d'un <rect>, ça pourrait peut-être changer quelque chose... à tester.
Modifié par Olivier C (01 Dec 2018 - 13:28)

Je vais tester cela. Merci

Le SVG, c'est le top pour moi.
Les images vectorielles permettent un rendu parfait quelle que soit la densité de pixels par pouce. Inutile de mettre des images deux fois plus grandes et je ne suis plus las d'attendre les srcset et compagnie.
De plus, la page se charge plus rapidement qu'avec des PNG lorsque le SVG est intégré directement dans le code html.

Concernant le référencement, pensez-vous que pour une icône illustrative, il est judicieux d'utiliser un SVG avec les balises desc et title ou le PNG et son texte alternative reste la meilleure option ?

EDIT pour Olivier C :
Cela impact le rendu final puis j'utilise des couches superposées (icone long shadow par exemple).
Modifié par kittyhello (08 Dec 2014 - 20:21)

_laurent, t'as solution corrige le problème que j'ai évoqué.

Cependant si je superpose un carré de plus petite taille dans le premier carré, il se déplace d'un pixel quand je bouge en largeur la fenêtre du navigateur (IE et Firefox je précise) mais pas le grand carré.
Cela n'est pas satisfaisant pour moi car en fonction de la largeur de la fenêtre, le carré interne n'est pas à la même place..

Y-a-t'il une autre propriété pour résoudre cela ?

Merci d'avance.