[15.4.0] SVG including filters don't render properly #2364
Comments
github-actions
bot
added
the
Missing repro
|
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? |
|
Hello, @TomCorvus. Thanks for letting us know about that problem. |
bohdanprog
added
Repro provided
and removed
Missing repro
# Summary While debugging #2364 I've noticed that color shift in `FeColorMatrix` on Android is wrong. On web, elements 5, 10, 15, 20 is a color shift represented by number where 1 mean full color shift, while on Android it's 255 for full color shift. ## Test ```tsx <svg width="180" height="180" viewBox="0 0 180 180"> <rect width="180" height="180" fill="red" filter="url(#filter)"/> <filter id="filter"> <feColorMatrix type="matrix" values="0 0 0 0 1 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/> </filter> </svg> ```
|
Hi @TomCorvus, there are a few issues here, so let's break them down:
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. |
|
Thank you @jakex7 |
|
@jakex7 Here the results with 15.5.0 version of react-native-svg
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? Thanks for your help, and your works btw. |
|
@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 If you want to achieve the results from version 15.3.0, then you can remove the |
|
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:
#2356
#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
The text was updated successfully, but these errors were encountered: