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 archived. Please ask a new question if you need help.

Failed to show SVG properly

harver
harver
more options

In desktop version of Firefox (version 56.0), the SVG image was displayed incorrectly. For example, with the following SVG image for twitter logo, it shows something that not even close to twitter logo. The same SVG image is displayed properly in other browsers, (IE11, Edge, Chrome, etc.). Is this a bug in Firefox? or there is a workaround to make it work? (two screenshots for working and not-working pages in attachment)

In desktop version of Firefox (version 56.0), the SVG image was displayed incorrectly. For example, with the following SVG image for twitter logo, it shows something that not even close to twitter logo. The same SVG image is displayed properly in other browsers, (IE11, Edge, Chrome, etc.). Is this a bug in Firefox? or there is a workaround to make it work? (two screenshots for working and not-working pages in attachment) <blockquote> <img style="width:640px; height:640px;" src="data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2032%2032%22%20enable-background%3D%22new%200%200%2032%2032%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20fill%3D%22%2355ACEE%22%20d%3D%22M32%2C6.4c-1.2%2C0.5-2.4%2C0.9-3.8%2C1c1.4-0.8%2C2.4-2.1%2C2.9-3.6c-1.3%2C0.8-2.7%2C1.3-4.2%2C1.6c-1.2-1.3-2.9-2.1-4.8-2.1%2Cc-3.6%2C0-6.6%2C2.9-6.6%2C6.6c0%2C0.5%2C0.1%2C1%2C0.2%2C1.5C10.3%2C11.1%2C5.5%2C8.5%2C2.2%2C4.5c-0.6%2C1-0.9%2C2.1-0.9%2C3.3c0%2C2.3%2C1.2%2C4.3%2C2.9%2C5.5%2Cc-1.1%2C0-2.1-0.3-3-0.8c0%2C0%2C0%2C0.1%2C0%2C0.1c0%2C3.2%2C2.3%2C5.8%2C5.3%2C6.4c-0.6%2C0.1-1.1%2C0.2-1.7%2C0.2c-0.4%2C0-0.8%2C0-1.2-0.1%2Cc0.8%2C2.6%2C3.3%2C4.5%2C6.1%2C4.6c-2.2%2C1.8-5.1%2C2.8-8.2%2C2.8c-0.5%2C0-1.1%2C0-1.6-0.1c2.9%2C1.9%2C6.4%2C2.9%2C10.1%2C2.9c12.1%2C0%2C18.7-10%2C18.7-18.7%2Cc0-0.3%2C0-0.6%2C0-0.8C30%2C8.9%2C31.1%2C7.7%2C32%2C6.4z%22%2F%3E%3C%2Fsvg%3E" /> </blockquote>
Attached screenshots

Modified by harver

All Replies (3)

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

Is this problem specific to the file:// protocol? For example if you compare:

https://upload.wikimedia.org/wikipedia/commons/e/e9/Emojione_1F405.svg

with the PNG:

does that one work?

harver
harver Question owner
more options

Hi jscher2000

If you can use the quote link from my original post, you can see the source code of img tag that I am trying to do. For some reason, this forum does not show the source code. I would like to attachment the file that I am testing but it does not allow upload files except images.

Modified by harver

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

Gotcha.

I don't know why Firefox draws that image the way it does. Hopefully you can find a site more focused on SVG where they may have documentation on browser differences.