SVG file rendered differently between AD and Chrome

[mrzl]

Hello,

I'm generating an SVG file using a Python script with the drawsvg library. When I open the SVG file with Chrome, everything is fine. However, when I open it with AD2, there are significant differences (text positioning, missing font, line heights, etc.).

Is this a bug in AD2, or am I missing some information to ensure that AD2 interprets SVG files like Chrome does?

Thank you in advance for your response.

periodic-table.svg

[v_kyr]

In case of the font ...

<g>
<rect x="2677.7" y="310.0" width="185.0" height="248.0" fill="#FFCCCC" stroke="white" stroke-width="7.0" />
<text x="2690.7" y="343.3" font-size="37.0" text-anchor="start" font-weight="bold" dominant-baseline="central">7</text>
<text x="2690.7" y="435.7" font-size="77.0" text-anchor="start" font-weight="bold" fill="#990000" stroke="" stroke-width="" font-family="October Tamil" dominant-baseline="central">N</text>
<text x="2690.7" y="489.95" font-size="31.0" text-anchor="start" font-family="Avenir Next Condensed" dominant-baseline="central">Azote</text>
<text x="2690.7" y="534.95" font-size="30.0" text-anchor="start" font-weight="600" dominant-baseline="central">14.01</text>
<text x="2849.7" y="343.3" font-size="30.0" text-anchor="end" dominant-baseline="central">3.04</text>
<text x="2849.7" y="391.40000000000003" font-size="25.5" text-anchor="end"><tspan x="2849.7" dy="0em">+5</tspan><tspan x="2849.7" dy="1em">+4</tspan><tspan x="2849.7" dy="1em">+3</tspan><tspan x="2849.7" dy="1em">+2</tspan><tspan x="2849.7" dy="1em">✽</tspan></text>
</g>

... it might not find "Avenir Next Condensed" here and probably does replace it with some other font here. - For the dy="1em" vertical distance in the tspan's, that's too close for Affinity here, if setup instead as dy="2em" it should look better for ADe.

A test SVG file (scroll to the right in order to see "Azote"...

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"
     width="3508" height="2480" viewBox="0 0 3508 2480" font-family="Avenir Next">
<defs>
</defs>
<g>
<rect x="2677.7" y="310.0" width="185.0" height="248.0" fill="#FFCCCC" stroke="white" stroke-width="7.0" />
<text x="2690.7" y="343.3" font-size="37.0" text-anchor="start" font-weight="bold" dominant-baseline="central">7</text>
<text x="2690.7" y="435.7" font-size="77.0" text-anchor="start" font-weight="bold" fill="#990000" stroke="" stroke-width="" font-family="October Tamil" dominant-baseline="central">N</text>
<text x="2690.7" y="489.95" font-size="31.0" text-anchor="start" font-family="Avenir Next Condensed" dominant-baseline="central">Azote</text>
<text x="2690.7" y="534.95" font-size="30.0" text-anchor="start" font-weight="600" dominant-baseline="central">14.01</text>
<text x="2849.7" y="343.3" font-size="30.0" text-anchor="end" dominant-baseline="central">3.04</text>
<text x="2849.7" y="391.40000000000003" font-size="25.5" text-anchor="end"><tspan x="2849.7" dy="0em">+5</tspan><tspan x="2849.7" dy="2em">+4</tspan><tspan x="2849.7" dy="2em">+3</tspan><tspan x="2849.7" dy="2em">+2</tspan><tspan x="2849.7" dy="2em">✽</tspan></text>
</g>

<text x="92.5" y="40" font-size="37.0" text-anchor="start" font-weight="bold" dominant-baseline="central">I</text>
<text x="277.5" y="40" font-size="37.0" text-anchor="start" font-weight="bold" dominant-baseline="central">II</text>
<text x="462.5" y="40" font-size="37.0" text-anchor="start" font-weight="bold" dominant-baseline="central">III</text>
<text x="647.5" y="40" font-size="37.0" text-anchor="start" font-weight="bold" dominant-baseline="central">IV</text>
<text x="832.5" y="40" font-size="37.0" text-anchor="start" font-weight="bold" dominant-baseline="central">V</text>
<text x="1017.5" y="40" font-size="37.0" text-anchor="start" font-weight="bold" dominant-baseline="central">VI</text>
<text x="1202.5" y="40" font-size="37.0" text-anchor="start" font-weight="bold" dominant-baseline="central">VII</text>
<text x="1387.5" y="40" font-size="37.0" text-anchor="start" font-weight="bold" dominant-baseline="central">VIII</text>
</svg>

• test.svg

[David in Яuislip]

Further to v_kyr's comment, it seems that affinity doesn't properly evaluate the value of em
If you replace "1em" with "25.5", ie the font-size in the affected tspans, then the file opens ok in affinity
Too many issues with affinity and svgs to use it seriously I'm afraid

periodic-tableNoem.svg

[mrzl]

Hello to both of you,

And thank you for your answers and the time you've spent on this.

I have finally decided to port the Python code to JavaScript and I generate the SVG file using Node.js (svg.js library). AD2 correctly interprets the generated SVG file.

For the record, fonts should be defined like this : font-family: "AvenirNextCondensed-Regular" = Avenir Next Condensed.

It's a good thing to generate SVG a cell of the periodic table from AD2. Then trying to get the SVG markup as close as possible as the AD2 generated markup.

[v_kyr]

3 hours ago, mrzl said:

Then trying to get the SVG markup as close as possible as the AD2 generated markup.

Note as David already indicated above, that ADe has a lot of limitations regarding the parsing and generation of SVG code. It just supports a pretty limited subset of the "W3C SVG v1.1 spec" and also doesn't handle always everything the right way here from those things it supports. - In short, I wouldn't always rely on what the Affinity software exports/generates as SVG code here. Nor how it then interprets specific other third-party SVG code!

The best known and closest SVG interpreters are still those embedded into WebBrower engines and after those probably Inkscape, as SVG is what it internally deals with for drawing and what it's file format is based on.