Windows 10 will reach EOS (end of support) on October 14, 2025. For more information, see this article.

Avatar for Username

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

This thread was closed and archived. Please ask a new question if you need help.

How to fix display bug for .svg images

  • 2 replies
  • 1 has this problem
  • 2 views
  • Last reply by cor-el

SuMo Bot
SuMo Bot
more options

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

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 (3)

jscher2000 - Support Volunteer
jscher2000 - Support Volunteer
  • Top 10 Contributor
more options

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.

cor-el
cor-el
  • Moderator
more options

If I hide that element via "opacity:0" then it looks better.

SuMo Bot
SuMo Bot Question owner
more options

This question has been locked because the original author has deleted their account. While you can no longer post new replies, the existing content remains available for reference.