Jump to content
You must now use your email address to sign in [click for more info] ×

SVG display problem with Affinity on Mac


Recommended Posts

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.

All 3 1.10.8, & all 3 V23.0 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7
Affinity Photo 
1.10.8; Affinity Designer 1.108; & all 3 V2 apps for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.7

Link to comment
Share on other sites

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!

☛ Affinity Designer 1.10.8 ◆ Affinity Photo 1.10.8 ◆ Affinity Publisher 1.10.8 ◆ OSX El Capitan
☛ Affinity V2.3 apps ◆ MacOS Sonoma 14.2 ◆ iPad OS 17.2

Link to comment
Share on other sites

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:

image.png.36be98b589d20180852843ca24c52130.png

Designer Mac:

image.png.85b216bacbcf64bc91f1bce2d7083efd.png  

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

Link to comment
Share on other sites

Try convert to curves.

Mac mini M1 A2348

LG34WK950U-W, calibrated to DCI-P3 with LG Calibration Studio / Spider 5

iPad Air Gen 5 (2022) A2589

Special interest into procedural texture filter, edit alpha channel, RGB/16 and RGB/32 color formats, stacking, finding root causes for misbehaving files, finding creative solutions for unsolvable tasks, finding bugs in Apps.

 

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

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>

 

Link to comment
Share on other sites

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>

 

☛ Affinity Designer 1.10.8 ◆ Affinity Photo 1.10.8 ◆ Affinity Publisher 1.10.8 ◆ OSX El Capitan
☛ Affinity V2.3 apps ◆ MacOS Sonoma 14.2 ◆ iPad OS 17.2

Link to comment
Share on other sites

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

Mac mini M1 A2348

LG34WK950U-W, calibrated to DCI-P3 with LG Calibration Studio / Spider 5

iPad Air Gen 5 (2022) A2589

Special interest into procedural texture filter, edit alpha channel, RGB/16 and RGB/32 color formats, stacking, finding root causes for misbehaving files, finding creative solutions for unsolvable tasks, finding bugs in Apps.

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.