Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

SVG rendered on 15.3 but broken on 15.4+ #2412

Closed
gtokman opened this issue Aug 14, 2024 · 3 comments
Closed

SVG rendered on 15.3 but broken on 15.4+ #2412

gtokman opened this issue Aug 14, 2024 · 3 comments
Labels
Repro provided

Comments

@gtokman
Copy link

gtokman commented Aug 14, 2024

Description

We are using this SVG and it renders in 15.3 but fails to render correctly on 15.4+.

<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M30.4687 0C36.25 0 40 3.75 40 9.53127V30.4687C40 36.25 36.25 40 30.4687 40H9.53127C3.75 40 0 36.25 0 30.4687V9.53127C0 3.75 3.75 0 9.53127 0H30.4687Z" fill="url(#paint0_linear_9403_2487)"/>
<path d="M29.9127 11H10.0869C8.93435 11 8 11.9343 8 13.0869V26.6519C8 27.8045 8.93435 28.7388 10.0869 28.7388H29.9127C31.0653 28.7388 31.9996 27.8045 31.9996 26.6519V13.0869C31.9996 11.9343 31.0653 11 29.9127 11Z" fill="#D9D6CC"/>
<path d="M30.9562 11.7832H9.04346V22.7396H30.9562V11.7832Z" fill="#D8D8D8"/>
<mask id="mask0_9403_2487" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="9" y="11" width="22" height="12">
<path d="M30.9566 11.7852H9.04395V22.7415H30.9566V11.7852Z" fill="white"/>
</mask>
<g mask="url(#mask0_9403_2487)">
<path d="M29.6523 12.043H10.3483C9.62791 12.043 9.04395 12.6269 9.04395 13.3473V15.9559C9.04395 16.6763 9.62791 17.2603 10.3483 17.2603H29.6523C30.3727 17.2603 30.9566 16.6763 30.9566 15.9559V13.3473C30.9566 12.6269 30.3727 12.043 29.6523 12.043Z" fill="#3EA3D6"/>
<g filter="url(#filter0_d_9403_2487)">
<path d="M29.6523 13.8672H10.3483C9.62791 13.8672 9.04395 14.4512 9.04395 15.1715V17.7802C9.04395 18.5005 9.62791 19.0845 10.3483 19.0845H29.6523C30.3727 19.0845 30.9566 18.5005 30.9566 17.7802V15.1715C30.9566 14.4512 30.3727 13.8672 29.6523 13.8672Z" fill="#FFB003"/>
</g>
<g filter="url(#filter1_d_9403_2487)">
<path d="M29.6523 15.6953H10.3483C9.62791 15.6953 9.04395 16.2793 9.04395 16.9996V19.6083C9.04395 20.3287 9.62791 20.9126 10.3483 20.9126H29.6523C30.3727 20.9126 30.9566 20.3287 30.9566 19.6083V16.9996C30.9566 16.2793 30.3727 15.6953 29.6523 15.6953Z" fill="#50BE3D"/>
</g>
<g filter="url(#filter2_d_9403_2487)">
<path d="M29.6523 17.5215H10.3483C9.62791 17.5215 9.04395 18.1055 9.04395 18.8258V21.4345C9.04395 22.1548 9.62791 22.7388 10.3483 22.7388H29.6523C30.3727 22.7388 30.9566 22.1548 30.9566 21.4345V18.8258C30.9566 18.1055 30.3727 17.5215 29.6523 17.5215Z" fill="#F26D5F"/>
</g>
</g>
<g filter="url(#filter3_d_9403_2487)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.116 19.3477H32.0001V26.6518C32.0001 27.8044 31.0667 28.7388 29.9123 28.7388H10.0883C8.93525 28.7388 8.00049 27.8038 8.00049 26.6518V19.3477H14.116C14.1061 19.3477 14.1011 19.3478 14.1011 19.3478H20.0003V20.859V22.3702C20.7546 22.3729 21.7642 22.1002 22.314 21.293C23.6723 19.2988 25.8995 19.3488 25.8995 19.3488H20.0003V20.859V22.3692C19.246 22.3719 18.2364 22.0991 17.6866 21.292C16.3932 19.393 14.3117 19.3477 14.116 19.3477Z" fill="#D9D6CC"/>
</g>
<defs>
<filter id="filter0_d_9403_2487" x="8.00048" y="12.9542" width="23.9995" height="7.30372" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<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="0.130433"/>
<feGaussianBlur stdDeviation="0.521731"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.39 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_9403_2487"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_9403_2487" result="shape"/>
</filter>
<filter id="filter1_d_9403_2487" x="8.00048" y="14.7823" width="23.9995" height="7.30372" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<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="0.130433"/>
<feGaussianBlur stdDeviation="0.521731"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.39 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_9403_2487"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_9403_2487" result="shape"/>
</filter>
<filter id="filter2_d_9403_2487" x="8.00048" y="16.6085" width="23.9995" height="7.30372" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<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="0.130433"/>
<feGaussianBlur stdDeviation="0.521731"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.393314 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_9403_2487"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_9403_2487" result="shape"/>
</filter>
<filter id="filter3_d_9403_2487" x="7.47876" y="18.6955" width="25.043" height="10.4341" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<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="-0.130433"/>
<feGaussianBlur stdDeviation="0.260865"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.139634 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_9403_2487"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_9403_2487" result="shape"/>
</filter>
<linearGradient id="paint0_linear_9403_2487" x1="0" y1="0" x2="0" y2="40" gradientUnits="userSpaceOnUse">
<stop stop-color="#1E1E1F"/>
<stop offset="1" stop-color="#1E1E1F"/>
</linearGradient>
</defs>
</svg>

Steps to reproduce

const image = '<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M30.4687 0C36.25 0 40 3.75 40 9.53127V30.4687C40 36.25 36.25 40 30.4687 40H9.53127C3.75 40 0 36.25 0 30.4687V9.53127C0 3.75 3.75 0 9.53127 0H30.4687Z" fill="url(#paint0_linear_9403_2487)"/>
<path d="M29.9127 11H10.0869C8.93435 11 8 11.9343 8 13.0869V26.6519C8 27.8045 8.93435 28.7388 10.0869 28.7388H29.9127C31.0653 28.7388 31.9996 27.8045 31.9996 26.6519V13.0869C31.9996 11.9343 31.0653 11 29.9127 11Z" fill="#D9D6CC"/>
<path d="M30.9562 11.7832H9.04346V22.7396H30.9562V11.7832Z" fill="#D8D8D8"/>
<mask id="mask0_9403_2487" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="9" y="11" width="22" height="12">
<path d="M30.9566 11.7852H9.04395V22.7415H30.9566V11.7852Z" fill="white"/>
</mask>
<g mask="url(#mask0_9403_2487)">
<path d="M29.6523 12.043H10.3483C9.62791 12.043 9.04395 12.6269 9.04395 13.3473V15.9559C9.04395 16.6763 9.62791 17.2603 10.3483 17.2603H29.6523C30.3727 17.2603 30.9566 16.6763 30.9566 15.9559V13.3473C30.9566 12.6269 30.3727 12.043 29.6523 12.043Z" fill="#3EA3D6"/>
<g filter="url(#filter0_d_9403_2487)">
<path d="M29.6523 13.8672H10.3483C9.62791 13.8672 9.04395 14.4512 9.04395 15.1715V17.7802C9.04395 18.5005 9.62791 19.0845 10.3483 19.0845H29.6523C30.3727 19.0845 30.9566 18.5005 30.9566 17.7802V15.1715C30.9566 14.4512 30.3727 13.8672 29.6523 13.8672Z" fill="#FFB003"/>
</g>
<g filter="url(#filter1_d_9403_2487)">
<path d="M29.6523 15.6953H10.3483C9.62791 15.6953 9.04395 16.2793 9.04395 16.9996V19.6083C9.04395 20.3287 9.62791 20.9126 10.3483 20.9126H29.6523C30.3727 20.9126 30.9566 20.3287 30.9566 19.6083V16.9996C30.9566 16.2793 30.3727 15.6953 29.6523 15.6953Z" fill="#50BE3D"/>
</g>
<g filter="url(#filter2_d_9403_2487)">
<path d="M29.6523 17.5215H10.3483C9.62791 17.5215 9.04395 18.1055 9.04395 18.8258V21.4345C9.04395 22.1548 9.62791 22.7388 10.3483 22.7388H29.6523C30.3727 22.7388 30.9566 22.1548 30.9566 21.4345V18.8258C30.9566 18.1055 30.3727 17.5215 29.6523 17.5215Z" fill="#F26D5F"/>
</g>
</g>
<g filter="url(#filter3_d_9403_2487)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.116 19.3477H32.0001V26.6518C32.0001 27.8044 31.0667 28.7388 29.9123 28.7388H10.0883C8.93525 28.7388 8.00049 27.8038 8.00049 26.6518V19.3477H14.116C14.1061 19.3477 14.1011 19.3478 14.1011 19.3478H20.0003V20.859V22.3702C20.7546 22.3729 21.7642 22.1002 22.314 21.293C23.6723 19.2988 25.8995 19.3488 25.8995 19.3488H20.0003V20.859V22.3692C19.246 22.3719 18.2364 22.0991 17.6866 21.292C16.3932 19.393 14.3117 19.3477 14.116 19.3477Z" fill="#D9D6CC"/>
</g>
<defs>
<filter id="filter0_d_9403_2487" x="8.00048" y="12.9542" width="23.9995" height="7.30372" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<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="0.130433"/>
<feGaussianBlur stdDeviation="0.521731"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.39 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_9403_2487"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_9403_2487" result="shape"/>
</filter>
<filter id="filter1_d_9403_2487" x="8.00048" y="14.7823" width="23.9995" height="7.30372" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<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="0.130433"/>
<feGaussianBlur stdDeviation="0.521731"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.39 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_9403_2487"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_9403_2487" result="shape"/>
</filter>
<filter id="filter2_d_9403_2487" x="8.00048" y="16.6085" width="23.9995" height="7.30372" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<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="0.130433"/>
<feGaussianBlur stdDeviation="0.521731"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.393314 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_9403_2487"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_9403_2487" result="shape"/>
</filter>
<filter id="filter3_d_9403_2487" x="7.47876" y="18.6955" width="25.043" height="10.4341" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<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="-0.130433"/>
<feGaussianBlur stdDeviation="0.260865"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.139634 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_9403_2487"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_9403_2487" result="shape"/>
</filter>
<linearGradient id="paint0_linear_9403_2487" x1="0" y1="0" x2="0" y2="40" gradientUnits="userSpaceOnUse">
<stop stop-color="#1E1E1F"/>
<stop offset="1" stop-color="#1E1E1F"/>
</linearGradient>
</defs>
</svg>'

  <SvgXml testID={testID} width={width} height={height} xml={image} />

Snack or a link to a repository

n/a

SVG version

15.3.0

React Native version

0.74.5

Platforms

iOS

JavaScript runtime

JSC

Workflow

None

Architecture

Paper (Old Architecture)

Build type

None

Device

None

Device model

iPhone

Acknowledgements

Yes
@github-actions github-actions bot added the Missing repro This issue need minimum repro scenario label Aug 14, 2024
@github-actions GitHub Actions
Copy link

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 bohdanprog added Repro provided and removed Missing repro This issue need minimum repro scenario labels Aug 14, 2024
@jakex7
Copy link
Member

jakex7 commented Aug 19, 2024 •
edited
Loading

Hey @gtokman, it's the same situation I mentioned here: #2364 (comment). Previously, we didn't support filters at all, but now we can render only a few of them that has been implemented so far.

@gtokman
Copy link
Author

gtokman commented Aug 19, 2024

gotcha, thanks for the info @jakex7!

@gtokman gtokman closed this as completed Aug 19, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Repro provided
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@gtokman @jakex7 @bohdanprog