Export SVG - blank space what am I doing wrong?

[iconmuse]

Every time I export to SVG, I get black space on one side so the image is not centered. I'm not sure what I'm doing wrong.

my creation:

after export svg (selection only) - there is only text on the page, nothing else. Once exported and reopened in affinity it looks like this :-

When I open it, in a project I'm using, it looks like this:-

 

It always has extra space on the right side, when there was no extra space originally. What am I doing wrong? How can I get each project I create centered.

 

[firstdefence]

Have you tried converting the text to curves before exporting to SVG?

The letter spaces look odd, have you edited the text somehow? In the Project screengrab the text looks correctly spaced?

 

[v_kyr]

Show your SVG export settings, or even better attach the whole generated SVG file here for a review. - Further how do your SVG export options look like (see the more button on the bottom of the export panel), when you export as "selection only" from the export panel?

Do you have probably added accidently some space char after "Hello" so maybe like this "Hello "?

If I try what've shown above in ADe v1, things look like expected ...

[thomaso]

3 hours ago, v_kyr said:

things look like expected ...

Note, @iconmuse had tracking applied before export. – It looks quite similar to me and appears SVG doesn't handle tracking correctly. 

v1105 Hello.svg 

<?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 1191 879" 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;">
    <g transform="matrix(1,0,0,1,-850.227,-700.227)">
        <text x="813px" y="1033px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:464.883px;fill:rgb(0,141,71);">Hello</text>
        <g transform="matrix(1,0,0,1,0,539.93)">
            <text x="813px" y="1033px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:464.883px;fill:rgb(226,102,38);">H<tspan x="1195.21px 1500.25px 1650.02px 1799.79px " y="1033px 1033px 1033px 1033px ">ello</tspan></text>
        </g>
    </g>
</svg>

[v_kyr]

2 hours ago, thomaso said:

Note, @iconmuse had tracking applied before export. – It looks quite similar to me and appears SVG doesn't handle tracking correctly. 

In that case the by Affinity generated text size isn't handled correctly during the Affinity SVG code generation (export).

1)  How things should be for doc + text size, but with rounded up/down values then during SVG export for selection only here ...

2) What instead actually happens instead with the text size during export  ...

3) If the Affinity dev team always only checks SVG code generation things via "<svg width="100%" height="100%" ..." then they probably won't recognize that in a webbrowser preview, as ...

... versus ...

So the whole is more due to the fact, that Affinity in this case doesn't generate correct dimension sized SVG text code here. So that's sort of a bug!

Thus the OP shouldn't use tracking here for SVG and so better avoid this for any SVG export (code generation). Further if the whole is for some website or iOS app prototyping, it's even better to not rely entirely on Affinity here with SVG text centerings and the like, as for websites it's better to define SVG positionings via HTML/CSS and for iOS apps etc. to do that via Xcode and the like here!

[thomaso]

48 minutes ago, v_kyr said:

So the whole is more due to the fact, that Affinity in this case doesn't generate correct dimension sized SVG text code here. So that's sort of a bug!

Thus the OP shouldn't use tracking here for SVG and so better avoid this for any SVG export (code generation).

Different to tracking it appears that hairspaces get transferred correctly with SVG export.

But this unveils an UI / redraw glitch in Affinity: Different to the initial text frame Affinity does not display in the placed SVG its special character 'hairspace' symbols below a minimal zoom level, in this setup for instance 58 %, although the object has a width of ~12 cm in this sample.

v1105 Hello Hairspace.svg

[v_kyr]

8 hours ago, thomaso said:

Different to tracking it appears that hairspaces get transferred correctly with SVG export. ...

Well those are treated in SVG as common font glyphs, the SVG spec tells all here about certain aspects about SVG text and tspan definitions etc.

• https://www.w3.org/TR/SVG/text.html#Introduction
• https://www.w3.org/TR/SVG/text.html#FontsGlyphs

Commonly just like in HTML, SVG suppresses consecutive spaces and line breaks in the text. For things like the above mentioned text with tracking, in SVG one usually would use text with setup letter spacing values. - For a quite good made overview article related to SVG text I recommend to take a look over this one ...

• SVG Text  (DE)
• SVG Text  (EN translated)

For text aligment treating in SVG read this follow up article then ...

• SVG Text alignment  (DE)
• SVG Text alignment  (EN translated)

NOTE however that Affinity apps do only support (and generate) a minimal subset of what "SVG text" usually offers here.

 

[iconmuse]

Exported as curves, seemed to solve the issue for me

This is good enough for what I need to do at the moment. Thank you!