web-dev-qa-db-fra.com

Firefox SVG graphique flou

J'ai une conception Web réactive avec un logo/image SVG dynamique avec son conteneur. Tous les principaux navigateurs semblent vraiment bien supporter SVG.

Mon SVG est dynamique, donc si je redimensionne la fenêtre de mon navigateur, le SVG le fait aussi. Dans Chrome et IE9, cela fonctionne à merveille. Dans Firefox, le format SVG est flou à certaines tailles. Mais je ne peux pas dire que c'est tout le temps flou quand c'est au-dessus de la taille initiale du SVG. Il semble simplement ne pas restituer correctement tout le temps pendant que je redimensionne la fenêtre de mon navigateur.

C'est à quoi ça ressemble parfois (regardez-le dans taille réelle pour voir la différence): enter image description here

Peut-être que j'utilise la mauvaise façon de l'intégrer. Voici à quoi ressemblent mes CSS et HTML:

<div id="logo"></div>

CSS:

#logo {
   background-image: url('http://dl.dropbox.com/u/569168/jess.svg');
   height: 22em;
   background-repeat: no-repeat;
   -webkit-background-size: 100%;
   -moz-background-size: 100%;
   -o-background-size: 100%;
   background-size: 100%;
}

Saisissez le fichier SVG avec le lien dans le CSS si vous souhaitez le consulter. Il est fait avec Adobe Illustrator.

Une idée comment résoudre ce problème?

html5firefoxcss3svg
21
René Stalder

Mise à jour 2013-10: Confirmé corrigé dans la V24 qui est maintenant entré dans le canal de publication

Mise à jour 2013-07: Le bogue est résolu!Fix va arriver dans Firefox 24 qui sortira entre septembre et octobre

J'ai lu une solution un peu simple à ce problème quelque part que j'utilise maintenant dans mes projets (j'ajouterai la source quand je le retrouverai):

il suffit de définir la largeur et la hauteur de svg-container sur les valeurs maximales possibles de l’image et que tout va bien. Fonctionne dans tous les navigateurs actuels très bien. la seule restriction est que firefox et opera (oui, les deux mêmes navigateurs qui ont causé ce désordre) ne fonctionnent pas bien avec de très grandes images -> n’utilisez pas de valeurs trop élevées pour les dimensions

fichier d'origine:

<svg width="64px" height="128px">

disons que la largeur maximale sera 3 fois plus grande, alors votre SVG devrait contenir ceci:

<svg width="192px" height="384px">

(oui, le noeud svg peut avoir plus d'attributs ...)

La raison pour laquelle cela fonctionne est que Opera et FF rendent les SVG avant de les redimensionner au lieu de l’inverse, comme cela est supposé être fait avec le vecteur gfx

UPDATE: les remerciements vont à David Bushell qui a écrit un article magnifique sur Resolution Independence With SVG .

15
Jörn Berkefeld

Le problème est que lorsque vous utilisez SVG comme image d’arrière-plan, Firefox choisit la taille de rendu des vecteurs, puis redimensionne ces pixels en fonction de l’image selon les besoins. Voici un bug lié: https://bugzilla.mozilla.org/show_bug.cgi?id=600207

La solution la plus simple ici est de ne pas utiliser SVG comme image d’arrière-plan, mais d’incorporer directement votre SVG ou de le référencer via une balise <img>.

Si vous montez un scénario de test fonctionnel montrant le problème et les fichiers, nous pourrons vous aider avec le code et les correctifs actuels.

8
Phrogz

Pour créer une image SVG à la taille de son conteneur , assurez-vous que votre balise svg a un ensemble viewBox:

<svg viewBox="0 0 347 189">

mais pas d'attributs width ou height, je ne le fais pas:

<svg width="347px" height="189px" viewBox="0 0 347 189">

Ceci, par défaut, conservera son format d'image en le redimensionnant à la largeur ou à la hauteur la plus grande qui convient, quelle que soit la dimension atteignant la limite en premier.

Vous pouvez changer la stratégie preserveAspectRatio de toutes sortes de façons intéressantes, si ce comportement particulier n’est pas celui que vous recherchez.

6
ecmanaut

J'ai eu exactement le même problème, moi-même. J'ai pu résoudre ce problème dans Firefox en modifiant le SVG dans un éditeur de texte et en modifiant la valeur de l'attribut width de l'élément <svg> en 100%, tout en laissant toutes les autres valeurs d'attribut. Dans votre exemple particulier, voici le changement à effectuer:

<svg version="1.1" 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    xmlns:a="http://ns.Adobe.com/AdobeSVGViewerExtensions/3.0/" 
    x="0px"
    y="0px"
    width="100%"
    height="189px" 
    viewBox="0 0 347 189" 
    enable-background="new 0 0 347 189" 
    xml:space="preserve">

Cela a fait le tour pour moi et devrait faire la même chose pour vous; Je ne peux cependant pas être à 100% sans scénario de test.

NB: régler à la fois la largeur et la hauteur à 100% a cassé le rendu du fichier SVG par Safari dans mon cas particulier. Assurez-vous de ne définir que la largeur à 100%.

1
David Zulaica

La solution la plus simple consiste à mettre à niveau le SVG dans un éditeur d'images vectorielles tel qu'Illustrator. Adaptez-le à la résolution rendue dans le navigateur (ou supérieur). Puisqu'il s'agit d'un vecteur, le redimensionner n'affectera pas la taille du fichier.

0
Damir Kotoric

Un autre "gotcha" similaire que j'ai trouvé est que lorsque j'ai exporté un fichier svg d'illustrator, la largeur et les hauteurs n'étaient pas des nombres ronds. Ainsi, lorsque j'ai ouvert le fichier SVG dans un éditeur, la largeur était quelque chose comme "100.6789px". En modifiant soigneusement l'image dans Illustrator pour qu'elle soit d'abord un nombre rond, puis en utilisant la même largeur et la même hauteur pour firefox, cela résout les images floues pour moi.

0
user1010892