SVG display problem with Affinity on Mac

[Peter Panino]

test3.zip

This SVG is displayed without problems and nicely centered in Affinity Designer 2.3.0  for Windows:

But in Affinity Designer 2.2.1 for Mac, it is displayed completely differently and NOT CENTERED:

Why is the image on Mac not centered? And how can I make it centered both on Designer for Mac and on Designer for Windows?

[R C-R]

I'm no expert on any of this but it appears that the coffeecup is a character in the Segoe UI Emoji font, which apparently is included in Windows 10 & 11 but not on Macs, so some substitute character is being displayed on the Mac version.

[v_kyr]

Quote

<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 4167 4167" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><text x="80.973px" y="3107.3px" style="font-family:'SegoeUIEmoji', 'Segoe UI Emoji', sans-serif;font-size:2916.67px;">☕</text></svg>

27 minutes ago, R C-R said:

I'm no expert on any of this but it appears that the coffeecup is a character in the Segoe UI Emoji font, which apparently is included in Windows 10 & 11 but not on Macs, so some substitute character is being displayed on the Mac version.

That‘s entirely right!

[Peter Panino]

Now I've used a font that is included in both Windows 10/11 and macOS - Arial:

Quote

<svg width="1000" height="1000" xmlns="http://www.w3.org/2000/svg">  
  <text x="50%" y="75%" text-anchor="middle" font-family="Arial" font-size="700">☂</text>
</svg>

But now it isn't centered either in Designer for Windows or in Designer for Mac:

Designer Windows:

Designer Mac:

  

How can I show it centered in both Mac and Windows versions?

[NotMyFault]

Try convert to curves.

[Peter Panino]

7 minutes ago, NotMyFault said:

Try convert to curves.

For specific reasons, I need to keep it as text.

[Peter Panino]

Even when I make the text centered with SVG attributes (central, middle), it is not centered in Affinity Designer (while it is correctly shown in any browser):

Quote

<svg width="1000" height="1000" xmlns="http://www.w3.org/2000/svg">  
  <text x="50%" y="50%" dominant-baseline="central" text-anchor="middle" font-family="Arial" font-size="700">☂</text>
</svg>

[Peter Panino]

Even when I set the VIEWBOX accordingly, the pictogram is not centered in Designer:

Quote

<svg viewBox="0 0 1000 1000" width="1000" height="1000" xmlns="http://www.w3.org/2000/svg">  
  <text x="50%" y="50%" dominant-baseline="central" text-anchor="middle" font-family="Arial" font-size="700">☂</text>
</svg>

 

[v_kyr]

5 hours ago, Peter Panino said:

...
Even when I set the VIEWBOX accordingly, the pictogram is not centered in Designer

As far as I recall Affinity's SVG parser doesn't take the available SVG text attributes into account, aka it doesn't know to make any use out of those. There should be some older related forum threads about the Affinity SVG text behavior theme. - Thus you best here arrange (center) the text in ADe and then export as SVG, which will generate and adjust the SVG text x/y coordinate dependent to the document dimensions (SVG bounding box size).

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 1000 1000" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
    <text x="150px" y="765.65px" style="font-family:'HiraginoSans-W4', 'Hiragino Sans', sans-serif;font-size:700px;">☂</text>
</svg>

 

[Dan C]

Hi @Peter Panino,

Thanks for your report!

I can confirm this SVG import error is logged with our development team as a bug - I'll be sure to 'bump' this with your report now to bring it to our teams attention once again.

I hope this helps 

[NotMyFault]

What happens when you put the text frame into a transparent rectangle?