How to fix display bug for .svg images
I am in big trouble.
I have a website where I use .svg for illustrating my articles. The problem is that most illustrations do not display properly on Firefox (see attached images here: https://imgur.com/a/nEPF79y/ ). They display correctly on all browsers except Firefox...
For example, I have some issues with this file: https://salarship.com/wp-content/uploads/2022/01/wear-job-interview-fast-food.svg that you can see implemented in the article: https://salarship.com/article/dress-fast-food-job-interview/
Is there any fix for this? Is it a problem with the file itself or the implementation on my website?
Best, Nathan
All Replies (2)
That blue bar is this element within the SVG (as determined by right-click > Inspect Element on the stand-alone SVG page):
<path class="cls-107" d="m 553.78,288.31 c 0,-0.13 0,-0.24 0,-0.35 0,-0.11 0,-0.14 0,-0.19 a 0.54,0.54 0 0 1 0,-0.1 0.19,0.19 0 0 0 0,-0.08 0.31,0.31 0 0 1 0,-0.08 v -0.07 0 0 0 0 c 0,0 0,0 0,0 v 0 0 0 h -0.05 v 0 h -0.17 v 0 0 l -33.54,23.73 v 0 a 0.38,0.38 0 0 1 0.19,-0.06 v 0 a 0.22,0.22 0 0 1 0.17,0.08 v 0 0 0 0 0 c 0,0 0,0 0,0 0,0 0,0 0,0 v 0 a 0.25,0.25 0 0 0 0,0.07 0.19,0.19 0 0 1 0,0.07 8.510071e11,8.510071e11 0 0 1 0,0.18 c 0,0.06 0,0.13 0.05,0.2 0.05,0.07 0,0.22 0,0.35 0.34,3.29 -0.81,13 -2.91,23.87 -2.21,11.46 -4.72,20.27 -6,21.15 l 33.22,-19.42 c 1.22,-0.87 4,-14 6.27,-25.46 1.99,-10.87 3.11,-20.59 2.77,-23.89 z" id="path3700"/>
I don't know why it would be less visible in other browsers. Must be a different interpretation of one of those parameters I don't understand.
If I hide that element via "opacity:0" then it looks better.
