Open TomCorvus opened 1 month ago
github-actions[bot]
commented
1 month ago Hey! 👋
The issue doesn't seem to contain a minimal reproduction.
Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?
bohdanprog
commented
1 month ago Hello, @TomCorvus. Thanks for letting us know about that problem. @jakex7 maybe you could take a look at it? Thank you
jakex7
commented
1 month ago Hi @TomCorvus, there are a few issues here, so let's break them down:
FeColorMatrix have been removed.FeColorMatrix.FeColorMatrix resulted in incorrect outcomes. This has been fixed (#2366).color-interpolation-filters property. This means we can't control which color interpolation is used when applying filters. From my tests, it appears that iOS uses linearRGB, while Android uses sRGB.In the next version (15.5.0) we will release the above fixes and your SVG should render much better, while there will still be a subtle difference due to point 4. If there is anything else I can help you with, feel free to ping me here.
TomCorvus
commented
1 month ago Thank you @jakex7 I'm waiting the next version to check all of that.
TomCorvus
commented
1 month ago @jakex7 Here the results with 15.5.0 version of react-native-svg
| Vanilla | iOS | Android |
|---|---|---|
Better than before but not perfect. Just to understand: on 15.3.0 version, this kind of SVG was render properly, why the render changes so radically on newest version? In other words, why change something that works? The vanilla render above is on iOS and the new render is blurred and colors are wrong.
Thanks for your help, and your works btw.
jakex7
commented
1 month ago @TomCorvus I apologize for any inconvenience caused by the introduction of filters. Since not all filters are implemented yet, the other filters are being removed, resulting in something like this:
<filter id="filter0_di_1585_4261">
// <feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="2"/>
<feGaussianBlur stdDeviation="4"/>
// <feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"/>
// <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1585_4261"/>
// <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1585_4261" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="-2"/>
<feGaussianBlur stdDeviation="1"/>
// <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.2 0 0 0 0 0.2 0 0 0 0 0.2 0 0 0 0.08 0"/>
// <feBlend mode="normal" in2="shape" result="effect2_innerShadow_1585_4261"/>
</filter>As you can see, there is no FeBlend. Instead, the output from FeGaussianBlur is used as the input for FeColorMatrix, which is the last filter function, producing the final image. That's why your results are blurred on the new version.
If you want to achieve the results from version 15.3.0, then you can remove the <filter> tags from your SVG code or remove the filter prop from elements.
TomCorvus
commented
1 month ago Don't be sorry about that, It just a way for me to understand the work behind all of this. I'll wait the whole filters implementation and it will be awesome. Thanks for the explanation.
Description
Since 15.4.0 version, SVG including filters don't render properly.
Steps to reproduce
Install react-native-svg 15.4.0 Try to render this example:
I saw this thread and this PR: https://github.com/software-mansion/react-native-svg/issues/2356 https://github.com/software-mansion/react-native-svg/pull/2360
But it only talks about IOS while the problem seems to also be present on Android.
Downgrade to 15.3.0 fix this problem.
Snack or a link to a repository
https://github.com/fikkatra/react-native-svg-with-filters
SVG version
15.4.0
React Native version
0.73.1
Platforms
Android, iOS
JavaScript runtime
Hermes
Workflow
React Native
Architecture
Paper (Old Architecture)
Build type
Debug app & production bundle
Device
Real device
Device model
All devices (Emulators/Real)
Acknowledgements
Yes