Pourquoi Firefox affiche-t-il mal les images svg ?

Question

J'ai rencontré un comportement bizarre de Firefox. Il rend les images SVG en coupant certaines parties ou en ne les affichant pas du tout, mais seulement certaines images, pas toutes. Chrome et IE les affichent correctement. Voici un lien vers le site web sur lequel j'ai mis ces images : funjo.pl

Les images qui ne s'affichent pas correctement sont le logo dans la barre de menu supérieure et le grand logo bleu avec transparence sur la grande bannière supérieure. Ce qui est amusant, c'est que deux icônes un peu plus bas sur la même page (trois rouleaux et des jambes de femme), qui sont également des SVG, s'affichent correctement. Quelqu'un pourrait-il me dire ce qui se passe ? Je suppose qu'il y a quelque chose qui ne va pas dans le code de l'image SVG elle-même, mais je n'arrive pas à savoir ce que c'est exactement.

Je ne colle pas le code des images entières parce qu'il y en a trop. Vous pouvez télécharger ces images à partir de http://funjo.pl/media/2016/06/logo.svg y http://funjo.pl/media/2016/06/logo2.svg .

PS : Si vous voulez vraiment que je colle tout le code, faites-le moi savoir.

PS2 : J'ai créé tous les SVG sur le site web en utilisant Corel X7, si cette information peut vous aider.

PS3 : J'utilise la dernière version de FF v 46.0.1.

Answer 1

En fait, j'ai trouvé une solution moi-même, cela a parfaitement fonctionné mais a nécessité quelques étapes supplémentaires après l'exportation du SVG dans Corel X7 (comme je l'ai mentionné dans mon post ci-dessus, il y avait deux images, l'une d'entre elles étant transparente). Voici donc les étapes que j'ai suivies pour que l'image s'affiche correctement dans FF (une procédure un peu tâtonnante mais qui fonctionne) :

1. J'ai exporté à nouveau les deux SVG en supprimant la transparence de celui qui était transparent à l'origine, ce qui fait qu'il n'y a plus de transparence du tout dans les deux images SVG. L'image utilisée comme logo dans la barre de menu contenait tous les éléments groupés (le logo et le texte étaient tous deux séparés mais groupés), j'ai dégroupé ces éléments et je les ai transformés en une seule image.
2. J'ai retiré height y width des deux SVG.
3. J'ai ajouté preserveAspectRatio="none" afin de pouvoir gérer séparément la largeur et la hauteur de l'image, comme pour les images matricielles ( ce CSS Trucs et astuces aide beaucoup à comprendre l'ensemble du processus de redimensionnement).
4. J'ai utilisé Optimiseur SVG pour supprimer tous les éléments inutiles de mes images et les alléger un peu.
5. J'ai téléchargé des SVG optimisés à partir du site web de l'outil susmentionné, puis je les ai téléchargés sur le FTP de mon site web.
6. J'ai ajouté height:(some)px y width:auto dans les CSS
7. J'ai ajouté la transparence pour celui qui était censé être transparent via CSS - opacity:0.7 dans ce cas.

J'ai actualisé le site web et voilà, ça marche comme sur des roulettes. J'espère que cela aidera quelqu'un qui a le même problème que moi.

EDIT

Voici des images pour comparer, travail un et ne fonctionne pas un.

PS : Après quelques essais et erreurs supplémentaires, j'ai découvert que le fait de changer le texte standard en courbes dans Corel X7 permet à FF de rendre l'image SVG correctement sans les étapes ci-dessus, mais cela ne change pas le fait que cela fonctionnait correctement dans Chrome et IE de toute façon même si le texte n'était pas changé en courbes avant l'exportation. De plus, FF n'affichait pas du tout les SVG exportés avec transparence, alors que Chrome et IE le faisaient.

Answer 2

En appliquant une largeur de 300px ou plus, j'ai obtenu les mêmes résultats qu'avec chrome et IE.

Il suffit donc de donner une largeur comme ci-dessous et vous pourrez probablement l'ajuster en fonction de vos besoins.

J'espère que cela vous aidera.

<img style="width: 300px;" src="http://funjo.pl/media/2016/06/logo.svg" alt="Funjo">

Answer 3

Vous pouvez ouvrir un fichier SVG qui fonctionne et un fichier SVG qui ne fonctionne pas dans votre éditeur de texte et trouver des différences dans le code HTML généré. Je suppose qu'il y a une différence dans la façon dont vous l'enregistrez ou dans la façon dont les vecteurs et les couches sont placés. Peut-être qu'une couche transparente au-dessus de l'image donne un rendu étrange ?

Answer 4

J'ai résolu le problème en supprimant les virgules , par espaces