How to export Text to SVG by keeping the Text's position and size?

[Oke]

Hello community,

I'm just new to Affinity Designer and don't know much about SVG as well, but may you can help me anyway.

I've just created a Logo with a Symbol and some graphic text in it as you can see in the attachments. When exporting this Picture as SVG for Export it's working well, but when I import this File to Adobe XD, the Text is displayed in a wrong size and at wrong position. I've found out that I can Export the Text as curves but than every letter is imported individually. Is there a way to Export the Picture as it is, with the text saved in right position and size hanging together? Or is it not even influenced by Affinity but XD?

I am using Affinity Designer 1.9.2.1035 and Adobe XD 41.0.12.11 on Windows 10. I hope you can help me and I did not forget something but If I did and you need further Information, I will try to answer your question.
 

Oke

logo.svg logo-affinity.afdesign

[v_kyr]

Hi and welcome,

it might would have helped if you would have shown some comparison screenshots here, so how it looks in Adobe XD in contrast to let's say Affinity Designer and a Webbrowser then. - For AD and FF it looks like this to me, aka pretty much the same ...

 

... thus it might be more an Adobe XD specific SVG engine code interpretation thing here (?). - Since I don't have and use Adobe XD I can't tell how things look up there then!

[Oke]

Hello, thanks for the reply. You're right. There seems to be no difference between the AD-Version and the version opened in Browser or importing in MS Word and so on. But in the screenshot you can see the difference in XD. Have a great evening, yours Oke

[v_kyr]

You can try to check/inspect the text's position and font size settings in XD from your imported SVG file ...

Quote

...
 <g transform="matrix(44.2747,0,0,44.2747,-244084,-21713.4)">
                    <g id="NISSEN">
                        <text id="NISSEN-only" serif:id="NISSEN only" x="5607.24px" y="506.886px" style="font-family:'RobotoCondensed-Bold', 'Roboto Condensed';font-weight:700;font-size:11.993px;fill:rgb(29,29,27);">NISSEN</text>
                    </g>
...

... in order to see if those are then shown as matching values there too or not.

 

 

[Oke]

Hello, thanks for your reply. Yes XD imports the wrong values from the SVG. So it seems to be another problem of XD. Maybe one of those what are listed as unsupported here? https://helpx.adobe.com/xd/user-guide.html/xd/kb/import-export-issues.ug.html

Thanks for your help, altough it wasn't a problem of XD.

Now I have one more question a little off-topic: For what cases is it good to use SVG for export as I did in comparison to the other SVG formats? What is the use-case for SVG for export?

Yours Oke

[v_kyr]

Not sure if you mean something other with ...

9 hours ago, Oke said:

For what cases is it good to use SVG for export as I did in comparison to the other SVG formats? What is the use-case for SVG for export?

... however, SVG is widely used for different Web services and apps which do can make use of it. You can for example include the SVG generated vector code for your websites, CMS, mobile apps etc. and thus use it to let graphics been rendered/drawn dynamically as vectors in the frontend part instead of using static pixel/raster images. Further most plotting and CAD software etc. supports a subset of the whole SVG format too, so it can be used as a file exchange format too for certain areas of software.

See also Wikipedia's description and explanation of the SVG format here ...

• Scalable Vector Graphics (de)
• Scalable Vector Graphics (en)

... etc.