Probelm with SVG images rendering properly

[Westlake]

I am creating a virtual tour using Pano2VR by Garden Gnome. I have created a number of graphics for this tour and others using Affinity designer, but this one is causing some difficulty that I need your help to resolve.

On the top of the attached sample is the way the SVG graphic is supposed to look and does look on laptops. Below that graphic is a  screen shot from a tablet, which shows how the same file looks on mobile devices.

I explored this issue with Pano2VR support and was:

"the problem lies in your SVG file and the text code specifically the use of <tspan>. What application did you create it in?"

"Converting your fonts to outline before creating the svg may resolve the issue. However the way it's creating the code and splitting elements is the problem.

<text x="27.072px" y="53.887px" style="font-family:'OpenSans-CondensedBold', 'Open Sans Condensed', sans-serif;font-weight:700;font-stretch:condensed;font-size:24px;">CLICK &amp; DRAG / SWIPE T<tspan x="250.76px 265.045px " y="53.887px 53.887px ">O </tspan>LOOK AROUND</text>

<text x="21.559px" y="87.887px" style="font-family:'OpenSans-CondensedBold', 'Open Sans Condensed', sans-serif;font-weight:700;font-stretch:condensed;font-size:24px;">CLICK ON A STETSON T<tspan x="228.805px 243.09px " y="87.887px 87.887px ">O </tspan>MO<tspan x="281.762px 293.856px " y="87.887px 87.887px ">VE</tspan> LOCA<tspan x="357.043px 367.414px " y="87.887px 87.887px ">TI</tspan>ONS</text>"

I have no understanding of how SVG files work so their explanation is lost on me. I'm hoping you can pointme in the direction of a solution!

[GarryP]

5 hours ago, Westlake said:

Converting your fonts to outline before creating the svg may resolve the issue.

Try exporting the text as curves and see how you get on – see attached image for how to do this.

[BofG]

Selecting "longer text spans" instead of converting to curves can also help.

SVG output code quality is terrible from Affinity. If you are using it as code and not just an image it's best to run it through an optimiser:

https://jakearchibald.github.io/svgomg/

[David in Яuislip]

5 minutes ago, BofG said:

Selecting "longer text spans" instead of converting to curves can also help.

Yes, why it's not the default is beyond me

mobileAP.svg

[v_kyr]

Well even converting text to curves may solve the issue, the text will be afterwards uneditable/unchangable in SVG. - I would alter the text inside an editor and remove the <tspan>'s there which do make the problems here. - Aka ...

<?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 800 600" 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="27.072px" y="53.887px" style="font-family:'OpenSans-CondensedBold', 'Open Sans Condensed', sans-serif;font-weight:700;font-stretch:condensed;font-size:24px;">CLICK &amp; DRAG / SWIPE TO LOOK AROUND</text>

<text x="21.559px" y="87.887px" style="font-family:'OpenSans-CondensedBold', 'Open Sans Condensed', sans-serif;font-weight:700;font-stretch:condensed;font-size:24px;">CLICK ON A STETSON TO MOVE LOCATIONS</text>

</svg>

... afterwards the showup should be fine. - Further the SVG text will be still editable!

Setting the SVG export option "longer text spans" (under "more") should do/produce the same result as shown above and editing manually.

YES, those as default setup and used <tspan>'s in the generated SVG text portions are not your best friends and shouldn't be the default setting!

[Westlake]

Thanks for all of the responses  in the end I had to do both Longer text spans and Export text as curves.  I tried the longer text spans alone the first time, and the text came out good but it did not fit inside the rounded rectangle that has been scaled for mobile devices.  When I also export the text as curves, both the text and the rectangles scaled on mobile devices and working properly on the laptop 

Thanks very much for the help and for the education about SVG files!