Jump to content
You must now use your email address to sign in [click for more info] ×

SVG issues


Recommended Posts

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:

inkscape_Tkn5UVyqOs.png.543a8abd9525bd0f499dee7f37a951a3.png

And here's it imported to AD:

Designer_pZwNE0uVAY.png.277fc4106eac58b7b2c1040e968de1a2.png

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.

Linktree | Freebies

Affinity Photo, Affinity Designer, Affinity Publisher | 1.10.6
Windows 10 Home (64 bit) Version 22H2
Intel i5-6200U CPU @ 2.30 GHz (4 CPUs) | NVIDIA GeForce 940M | Intel HD Graphics 520 | 16GB RAM

Link to comment
Share on other sites

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

2021-08-15_143323.png.b5b1da90021c405d285e4d6d4410344c.png

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.

2021-08-15_141918.png.a001155f292873a58da1e12b58e4fb2c.png

 

<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]

Link to comment
Share on other sites

9 minutes ago, Wosven said:

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

2021-08-15_143323.png.b5b1da90021c405d285e4d6d4410344c.png

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!

Linktree | Freebies

Affinity Photo, Affinity Designer, Affinity Publisher | 1.10.6
Windows 10 Home (64 bit) Version 22H2
Intel i5-6200U CPU @ 2.30 GHz (4 CPUs) | NVIDIA GeForce 940M | Intel HD Graphics 520 | 16GB RAM

Link to comment
Share on other sites

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

Vectr

brave_Y8O3N8pfAy.png.d4f68efb50aea58bfe2e06fb06017eca.png

SVG Edit

brave_rGv9TsJ2we.png.dda00a2e1206ae37001c156710d16d00.png

Method Draw

brave_bA7U1Q2n2w.png.61371850727a0a1005603ea94e895d5e.png

LibreOffice Draw

soffice.bin_BxpJ45Tgpr.png.998e2cd6cdab5da2059d535aa14e5db1.png

Linktree | Freebies

Affinity Photo, Affinity Designer, Affinity Publisher | 1.10.6
Windows 10 Home (64 bit) Version 22H2
Intel i5-6200U CPU @ 2.30 GHz (4 CPUs) | NVIDIA GeForce 940M | Intel HD Graphics 520 | 16GB RAM

Link to comment
Share on other sites

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!

inkscape_5nqC2Z3P5i.png.6c9e13c662c688a1aa2bb6b845b7b5ab.png

Designer_pjgzJSg5VK.png.2a56e2ecbf2579562bec790c30bea450.png

Linktree | Freebies

Affinity Photo, Affinity Designer, Affinity Publisher | 1.10.6
Windows 10 Home (64 bit) Version 22H2
Intel i5-6200U CPU @ 2.30 GHz (4 CPUs) | NVIDIA GeForce 940M | Intel HD Graphics 520 | 16GB RAM

Link to comment
Share on other sites

  • Staff

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.
 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.