Jump to content

Recommended Posts

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

svg issue_affinity.png

Share this post


Link to post
Share on other sites

@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.


Patrick Connor
Serif (Europe) Ltd.

Latest releases on each platform 

Share this post


Link to post
Share on other sites

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.


Patrick Connor
Serif (Europe) Ltd.

Latest releases on each platform 

Share this post


Link to post
Share on other sites

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.

 

Share this post


Link to post
Share on other sites

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!


☛ Affinity Designer 1.7.1 ◆ Affinity Photo 1.7.1 ◆ OSX El Capitan

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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.

KeywordsFilter EffectsfeGaussianBlur


☛ Affinity Designer 1.7.1 ◆ Affinity Photo 1.7.1 ◆ OSX El Capitan

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

1159147_DesignervsBoxySVG.png.321ae2a1765b5ce8e68f1a5f1ceeb42a.png


This article has been written with the kind assistance of DeepL.

Share this post


Link to post
Share on other sites
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 %.


This article has been written with the kind assistance of DeepL.

Share this post


Link to post
Share on other sites
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.


☛ Affinity Designer 1.7.1 ◆ Affinity Photo 1.7.1 ◆ OSX El Capitan

Share this post


Link to post
Share on other sites

@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

Share this post


Link to post
Share on other sites

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".


☛ Affinity Designer 1.7.1 ◆ Affinity Photo 1.7.1 ◆ OSX El Capitan

Share this post


Link to post
Share on other sites

@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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×