SVG issues

[malayali]

SVGs with gradient colours are getting imported as black. 

Thanks to Wosven, I didn't notice that gradient layer was hidden underneath the black layer.

Here's how it appears in Inkscape:

And here's it imported to AD:

I'm attaching the SVG as well. 

fb like icon noti.svg

I know similar SVG issues were reported in the forum before; so I hope the team will consider fixing this ASAP.

[Wosven]

First thing, don't forget to check the layers:

There's a black layer, that if hidden, display the proper SVG.

 

Checking in other apps, we can see this round shadow effect is only visible in InkScape (and it's probably related to the "black" layer). Since neither Firefox or Chrome are able to render it, it's possible it's part of new effects and modes in test, but not yet in the specifications of SVG. It happens also with new CSS properties.

 

<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 16 16'>
<defs>
<linearGradient id='a' x1='50%' x2='50%' y1='0%' y2='100%'>
<stop offset='0%' stop-color='#18AFFF'/>
<stop offset='100%' stop-color='#0062DF'/>
</linearGradient>
<filter id='c' width='118.8%' height='118.8%' x='-9.4%' y='-9.4%' filterUnits='objectBoundingBox'>
<feGaussianBlur in='SourceAlpha' result='shadowBlurInner1' stdDeviation='1'/>
<feOffset dy='-1' in='shadowBlurInner1' result='shadowOffsetInner1'/>
<feComposite in='shadowOffsetInner1' in2='SourceAlpha' k2='-1' k3='1' operator='arithmetic' result='shadowInnerInner1'/>
<feColorMatrix in='shadowInnerInner1' values='0 0 0 0 0 0 0 0 0 0.299356041 0 0 0 0 0.681187726 0 0 0 0.3495684 0'/>
</filter>
<path id='b' d='M8 0a8 8 0 00-8 8 8 8 0 1016 0 8 8 0 00-8-8z'/>
</defs>
<g fill='none'>
<use fill='url(#a)' xlink:href='#b'/>
<use fill='black' filter='url(#c)' xlink:href='#b'/>
<path fill='white' d='M12.162 7.338c.176.123.338.245.338.674 0 .43-.229.604-.474.725a.73.73 0 01.089.546c-.077.344-.392.611-.672.69.121.194.159.385.015.62-.185.295-.346.407-1.058.407H7.5c-.988 0-1.5-.546-1.5-1V7.665c0-1.23 1.467-2.275 1.467-3.13L7.361 3.47c-.005-.065.008-.224.058-.27.08-.079.301-.2.635-.2.218 0 .363.041.534.123.581.277.732.978.732 1.542 0 .271-.414 1.083-.47 1.364 0 0 .867-.192 1.879-.199 1.061-.006 1.749.19 1.749.842 0 .261-.219.523-.316.666zM3.6 7h.8a.6.6 0 01.6.6v3.8a.6.6 0 01-.6.6h-.8a.6.6 0 01-.6-.6V7.6a.6.6 0 01.6-.6z'/>
</g>
</svg>

Strangely, feGaussianBlur seems to be implemented in Chrome and Edge Firefox*, but perhaps the way it's used there give a problem:

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feGaussianBlur

[edit] Not sure how I end up writting "Edge" instead of Firefox... [/edit]

[malayali]

9 minutes ago, Wosven said:

First thing, don't forget to check the layers:

There's a black layer, that if hidden, display the proper SVG.

Oops, I definitely forgot to check the layers. Thanks for the heads up!

[Wosven]

Nevertheless, there are bugs!

• In Firefox display,
• in Chrome display,
• in ADesigner display (and perhaps features, since it's not able to reproduce such effects).

I wonder how Safari display this SVG… and if those bugs were already reported.

[malayali]

I tried opening this in some online vector editors and LibreOffice Draw. Got weird results!

Vectr

SVG Edit

Method Draw

LibreOffice Draw

[malayali]

I noticed another issue with an SVG pattern downloaded from Pixabay.

Seamless-Geometric-Pixabay-Pattern-2.svg

Inkscape displays it correctly, while AD displays just the solid colour!

[Wosven]

Sadly, Affinity apps can't read and use or create SVG patterns.

[Wosven]

There's a workaround:

• Open the SVG in a text editor (not a word processor)
• delete the 2 lines with the pattern tag at the top and the bottom

 

• Save and open in AD:

 

 

Once you've corrected the pattern, you can copy and dupplicate it.

[Sean P]

Hi malayali,

I believe there are a couple of things going on with this SVG.

The first is that the filters used in SVG are very different to how they're implemented, which means they're not really mappable to our Filter Effects. Whilst a simple feGaussianBlur can be imported in Affinity (although the StdDeviation doesn't really map to Radius very well), when you start using all the different attributes available to the Filters it will stop working as they cannot be applied in Affinity.

The other is that the SVG references a separate path and then references filters to that. That just ignores the Filters (even if I just use a simple feGaussianBlur). However applying a simple feGaussianBlur to a <path> element it does work. I'll get this passed on

As for the second issue as Wosven mentions SVG Patterns are not something yet supported in Affinity, so are not imported.