SVG not appearing correctly

[Darren Rose]

Can someone tell me why my SVG file doesn't look correct in Affinity but fine in other apps?

Best explained by way of attached image - top is how SVG should look, bottom is how it looks in Affinity

Thanks

[Patrick Connor]

@Darren Rose

Welcome to the Serif Affinity forums.

I see an issue with line thickness on the triangle and it looks like the gradient has been lost or mis-transformed on the radial transparency white hilight.

We need the SVG file to understand more about this problem.

[Darren Rose]

Yes the main issue is the radial transparency highlighting

Please find the SVG file attached

Thanks for your reply

affinity.svg

[Darren Rose]

P.S. Ignore the line thickness on the triangle - that is not a problem, just be posting wrong image!!

[Patrick Connor]

OK, this has been reported to the developers, but it is not a new problem. Thanks for your help. I do not have a work around for this, sorry.

Perhaps you have another program that can read the SVG in and then re-Export without using fill:url(#x) to define the fill/transparency, which is the part we do not interpret accurately at present.

[Darren Rose]

Okay thanks for reply, I hope it can one day support it, as out of all the editing apps I have been testing I do prefer Affinity, and if this was working would be ready to purchase.

Several apps seem to suffer with same problem such as Xara, the only apps which open it okay so far are Inkscape and Boxy SVG.

 

[Patrick Connor]

Did you check if either of them can re-export it in a way that Affinity can import correctly?

[v_kyr]

That's an Inkscape generated SVG (in Inkscape format) with applied gaussian blur filters, which I believe Affinity's SVG parser doesn't know to make any use out of.

Quote

...
<filter
       height="1.72"
       width="1.72"
       y="-0.36000001"
       x="-0.36000001"
       id="a">
      <feGaussianBlur
         id="feGaussianBlur2-7"
         stdDeviation="2.46429" />
    </filter>
...
<path
       style="fill:#ffffff;fill-opacity:0.75;fill-rule:evenodd;filter:url(#a)"
       id="path36"
       d="m 111.31,731.2 c -3.283,-3.925 -3.5949,-6.1477 -2.0238,-10.438 3.3358,-6.1448 4.4954,-8.0682 5.41,-9.4048 1.9008,5.1616 2.1257,19.14 -3.3862,19.843 z"
       transform="matrix(0.75,0,0,0.80303,78.571,150.98)" />

Thus the applied filter isn't taken into account for those gradients and it looks instead like this in Affinity!

[Patrick Connor]

Yes, that seems to be correct, thanks @v_kyr

[Darren Rose]

4 hours ago, Patrick Connor said:

Did you check if either of them can re-export it in a way that Affinity can import correctly?

Yes, tried export but still same issue when opened in Affinity

[Darren Rose]

4 hours ago, v_kyr said:

That's an Inkscape generated SVG (in Inkscape format) with applied gaussian blur filters, which I believe Affinity's SVG parser doesn't know to make any use out of.

Thus the applied filter isn't taken into account for those gradients and it looks instead like this in Affinity!

Okay thanks for the information.  Hopefully one day Affinity will support Inkscape generated SVG files, since it is probably one of the most common sources of files

[v_kyr]

Well it doesn't matter if it's a Inkscape generated SVG (since Inkscape can also export SVG drawings as a more general SVG format compliance), or from some other SVG capable software here. Instead it has overall more to do with the spectrum/degree of SVG specification support, which is limited in Affinity and thus far from beeing complete.

Keywords:  Filter Effects,  feGaussianBlur

[Darren Rose]

Okay that make sense. as a newcomer to Affinity I am surprised they don't support it fully?, I thought the whole point of the product was to be the best at what it does? Seems odd that Boxy SVG (https://boxy-svg.com/) an app which can be bought for under £10 can do it, but Serif can't.

Shame as I like everything else about it, and would be ready to spend some money if this worked better

[Palatino]

I appreciate Boxy SVG very much and use it to prepare graphics for the web (control code and the like). But I don't design anything with Boxy SVG. The program is made for a very special field of application and is also very good in it, but in the sum is not comparable to Affinity Designer/Publisher.

I consider filters to be something very "special" and would never expect them to show the same results across multiple programs. Here's an example of what happens when I shrink your file in Affinity. The reverse effect is also available in Boxy SVG.

[Darren Rose]

In your image above you seem to have the blue affect looking okay in Affinity when compared to my post - how?

[Palatino]

5 hours ago, Palatino said:

Here's an example of what happens when I shrink your file in Affinity. The reverse effect is also available in Boxy SVG.

Reduce to 10 %.

[Palatino]

Ah! 2.5 px –> 25 px

[Darren Rose]

1 hour ago, Palatino said:

Ah! 2.5 px –> 25 px

Thank you Palatino - changing it from 2.5 to 25 works fine

[v_kyr]

14 hours ago, Darren Rose said:

Seems odd that Boxy SVG (https://boxy-svg.com/) an app which can be bought for under £10 can do it, but Serif can't.

Well that Boxy SVG tool uses a ...

Quote

Chromium-based rendering engine. The editor renders SVG documents exactly the same way as the most popular desktop and mobile web browsers.

... so it's no surprice, since Webbrowsers (Firefox, Chrome etc.) tend to have the best full feature supported SVG engines included. Thus tools which use webbrowser based SVG render engines do support a much wider and richer set of the SVG spec, they can parse and interpret a whole bunch more of possible SVG code.

[Darren Rose]

@v_kyr - that make sense

Any way all fixed now as just need gausian blue radius changing from 2.5px to 25px as per Palatino reply, and the images now look same in Affinity as they do in Boxy and Inkscape

[v_kyr]

Yes but there is one essential difference then now, when you save again as SVG code exported from Affinity, it will now contain pixels (an image) for the with gaussian blur affected parts. In Inkscape and Boxy those areas were vectors, in Affinity these now got pixels due to the applied "Gauße Unschärfe Ebeneneffect".

[Darren Rose]

@v_kyr Okay thanks for explanation, I see what you mean after saving it and reopening it.  I need to try and get the same blue effect using something Affinity does support then

[kboortz]

Old thread, but I hit the SVG import problem. I completed a test to become a drone pilot and the license card was downloadable in SVG. After importing into Affinity Designer 2, it looked not even close. The QR code was misplaced etc.

It imported fine in Inkscape, but exporting it again to SVG or PDF did produce something that Affinity Designer 2 think is blank.

The solution I found was to run a command line tool that I assume cleaned up and/or normalized the SVG to something Affinity Designer 2 is ok with

 

brew install librsvg
rsvg-convert -f svg -o dronecard_cleaned_up.svg dronecard.svg

kent

[charles-dyfis-net]

On 5/21/2023 at 12:32 PM, kboortz said:

Old thread, but I hit the SVG import problem. I completed a test to become a drone pilot and the license card was downloadable in SVG. After importing into Affinity Designer 2, it looked not even close. The QR code was misplaced etc.

It imported fine in Inkscape, but exporting it again to SVG or PDF did produce something that Affinity Designer 2 think is blank.

The solution I found was to run a command line tool that I assume cleaned up and/or normalized the SVG to something Affinity Designer 2 is ok with

 

brew install librsvg
rsvg-convert -f svg -o dronecard_cleaned_up.svg dronecard.svg

kent

Beautiful, thank you! Can confirm svg->svg round-tripping through rsvg transformed my sigil (originally constructed in Inkscape off a hand-drawn template) into a form in which the Affinity suite can handle it properly.

To allow the Affinity team to try to figure out the bugs that prevent a SVG that works in other, strictly standards-compliant renderers from behaving properly, I'm attaching both the original (`tcarls-sigil.svg`, rendering incorrectly in Affinity) and post-processed version (`tcarls-sigil-rsvg.svg`, which Affinity renders correctly) here.

tcarls-sigil.svg tcarls-sigil-rsvg.svg