svg images look scambled on iOS and macOS Safari

Sandra Naumann

• November 19, 2020 23:29

Hi,

any idea why a .svg image looks scrambled on Safari on macOS 10.14.x and 10.15.x as well as iOS 14?

Here is a screenshot taken from:

FireFox

 

Safari

on Safari these svg files look like the text spacing etc is wrong.

 

0

• 

  Sandra Prunici

  • November 20, 2020 14:57
  • Edited

  Hi,

  Could you please send us the URL link of the page where you encounter this problem? How should they display? Could you send us a screenshot from the editor mode? 

  Thanks!

  Best regards,
  Sandra

  0
• 

  Sandra Naumann

  • November 21, 2020 00:10

  Hey Sandra could you pm me? by the way it is the same page you already have tickets open with me.

  thanks

  0
• 

  Sandra Prunici

  • November 23, 2020 11:26

  Hi,

  Thank you for the information. This isn't a Brizy problem, it can be a problem from the way was created the SVG file. I found that entire square (with background colour, icon, text and button) is saved as SVG https://jmp.sh/bIWfLrQ, which isn't recommended. You can save as SVG only the icon and the rest of the elements to create using the Brizy element. This is what we recommend. But if you want to continue with the method you started, please make sure that the text is "Converted to outline" inside the SVG https://jumpshare.com/v/QQfEroLTnJVnnZCWMgfo. This option will save the text as an image and therefore, you will no have this problem with text in the different browsers. 

  Best regards,
  Sandra

  0

Please sign in to leave a comment.