Question Flou graphique de Firefox SVG


J'ai un design web réactif avec un logo / image SVG qui est dynamique avec son conteneur. Tous les principaux navigateurs semblent bien prendre en charge 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 comme un charme. Dans Firefox, le SVG est flou à certaines tailles. Mais je ne peux pas dire que c'est tout le temps flou quand il est au-dessus de la taille SVG initiale. Il ne semble tout simplement pas se relancer correctement tout le temps pendant que j'augmente ma fenêtre de 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. C'est à 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%;
}

Prenez le SVG avec le lien dans le CSS si vous voulez le voir. C'est fait avec Adobe Illustrator.

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


21
2018-01-21 15:08


origine


Réponses:


Mise à jour 2013-10: Confirmé corrigé dans v24 qui maintenant fait dans le canal de sortie


Mise à jour 2013-07: Le bug est résolu! Fix fera dans Firefox 24 qui sera publié quelque part entre septembre et octobre


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

Il suffit de définir la largeur et la hauteur de svg-container aux valeurs maximales que l'image est susceptible d'avoir et vous allez bien. Fonctionne bien dans tous les navigateurs actuels. 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 original:

<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 svg le noeud peut avoir plus d'attributs ...)

La raison pour laquelle cela fonctionne est que Opera et FF rendent les SVGs avant de les redimensionner au lieu de les inverser, comme cela est supposé être fait avec vector gfx

MISE À JOUR: les crédits vont à David Bushell qui a écrit un article magnifique sur Indépendance de résolution avec SVG.


15
2017-07-02 16:03



Le problème est que lorsque vous utilisez SVG comme image de fond, Firefox choisit la taille de rendu des vecteurs, puis redimensionne ces pixels si nécessaire. Voici un bug lié: https://bugzilla.mozilla.org/show_bug.cgi?id=600207

La solution la plus simple consiste à ne pas utiliser SVG comme image de fond, mais à intégrer directement votre SVG ou à le référencer via un <img> marque.

Si vous mettez en place un cas de test fonctionnel montrant le problème et les fichiers, nous pouvons vous aider avec du code et des correctifs réels.


8
2018-01-21 18:54



Faire une image SVG redimensionner à la taille de son conteneur, assurez-vous que votre balise svg a un viewBox ensemble:

<svg viewBox="0 0 347 189">

mais non width ou height attributs, je ne suis pas:

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

Cela, par défaut, conservera son rapport hauteur / largeur en augmentant la largeur ou la hauteur la plus grande possible, quelle que soit la dimension rencontrant la limite en premier.

Vous pouvez changer Conserver les proportionsstratégie de toutes sortes de manières intéressantes, si ce comportement particulier n'est pas celui que vous recherchez.


6
2017-12-12 07:55



J'ai rencontré exactement le même problème, moi-même. J'ai été capable de le réparer dans Firefox en éditant le SVG dans un éditeur de texte et en changeant le <svg> Valeur de l'attribut width de l'élément à 100%, mais en laissant toutes les autres valeurs d'attribut seules. 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 pas être 100% sans un cas de test avec lequel travailler, cependant.

NB: Réglage à la fois de la largeur et la hauteur à 100% a brisé le rendu de SVG de SVG dans mon cas particulier. Veillez à ne définir que la largeur à 100%.


1
2018-05-07 09:15



La solution la plus simple consiste à agrandir le SVG dans un éditeur d’images vectorielles comme Illustrator. Mettez-le à l'échelle de la résolution rendue dans le navigateur (ou supérieure). Comme il s'agit d'un vecteur, sa mise à l'échelle n'affectera pas la taille du fichier.


0
2018-02-11 02:26



Un autre "gotcha" similaire que j'ai trouvé était lorsque j'ai exporté un svg d'illustrator la largeur et les hauteurs n'étaient pas des nombres ronds - donc quand j'ai ouvert le SVG dans un éditeur la largeur était quelque chose comme "100.6789px". En éditant soigneusement l'image dans Illustrator d'abord pour être des chiffres ronds, puis en utilisant la même largeur et hauteur pour Firefox, il a résolu les images floues pour moi.


0
2017-08-06 08:37