SVG document cannot be loaded in Affinity Designer

[Peter Aschbacher]

This SVG document containing an Unicode emoji character as text cannot be loaded in Affinity Designer 2.5.5 in Windows 11 (although it can opened without problems in any browser, e.g. Edge):

<?xml version="1.0" encoding="UTF-8" standalone="no"?>                            

<svg                                                                              

    xmlns="http://www.w3.org/2000/svg"                                            

    width="200"                                                                  

    height="200"                                                                  

    viewBox="0 0 200 200">                                                        

  <!-- Optional background for visibility -->                                    

  <!-- <rect width="100%" height="100%" fill="#fff" /> -->                        

  <text                                                                          

    x="50%"                                                                      

    y="50%"                                                                      

    font-size="100"                                                              

    font-family="Segoe UI Emoji, Apple Color Emoji, Noto Color Emoji, sans-serif"

    text-anchor="middle"                                                          

    alignment-baseline="middle">                                                  

    😋

  </text>                                                                        

</svg>

It also seems the emoji character is not centered in the SVG. How can it be centered?

Food.zip

Edited November 5, 2024 by Peter Aschbacher

[David in Яuislip]

Affinity svg parser is not the best, opening a file in a browser is not much help, the browsers tend to understand everything

  <text
    x="50%"
    y="50%"  these need to be pixels
    text-anchor="middle"   not recognised
    alignment-baseline="middle">   not recognised

Try placing that emoji in an Affinity document, export to svg and see what it produces eg
<svg width="100%" height="100%" viewBox="0 0 834 834" 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="130.615px" y="563.558px" style="font-family:'SegoeUIEmoji', 'Segoe UI Emoji', sans-serif;font-size:416.667px;">😋</text>

[mopperle]

I think the problem is the font. As you see, the emoji in your post looks totally different as when you open your posted svg file in a browser.

Attached two SVGs with a textelement (as yours) and one with graphic elements (crircles).

test2.svg test1.svg