SVG not fully rendered on iOS with latest versions #2422
Labels
Comments
|
same issue. Even for web it does this. |
Haven't tested explicitly with web, but 15.2.0 (in the snack) works on the snack web preview (Brave, Version 1.68.141 Chromium: 127.0.6533.120 (Official Build) (arm64)) |
|
If you switch to 1 route to another. It breaks. |
|
I've seen the same issue. SVGs work fine on iOS in version |
|
Hello @facuacostag, @djaffer. |
|
@StefanWallin I'm not sure about the problem because when I changed that line: here is the full example: const Icon = () => {
const width = 200;
const height = 200;
const color = 'black';
return (
<Svg width={width} height={height} viewBox="0 0 475 599" fill="none">
<G clipPath="url(#a)">
<Mask
id="a"
width={147}
height={147}
x={391}
y={333}
maskUnits="userSpaceOnUse"
style={{
maskType: 'luminance',
}}>
<Path fill="#fff" d="M538 333H391v147h147V333z" />
</Mask>
<G mask="url(#a)">
<Path
fill={color}
d="M458.4 382h-6.1v-12.3h6v6.2h12.3v6.1h-6.1v6.1h-6.1V382zm12.2 73.5v-6.1h-6.1v6.1h6.1zm-6.1-91.9v-6.1h-12.3v6.1h6.2v6.1h6.1v-6zm49-6.1v36.8h-6.1V388h-24.5v-30.6h30.6zm-6.1 24.5v-18.4H489V382h18.4zm-85.8 12.3h-6.1v6h12.3v-6h-6.2zm0 18.3h6.1v6.1h6.2v-18.3h-6.1v6.1h-12.3v12.3h6.1v-6.2zm30.6 6.1V431h6.2v-12.3h-6.1zm24.6-61.2h-6.2v18.4h6.1v-18.4zm0 30.6V382h-6.2v6.1h6.1zM495 376h6.1v-6.1h-6v6zm-61.2-6.1h-6.1v6h6v-6zm12.2-12.3v30.6h-30.6v-30.6H446zm-6.1 6.1h-18.4V382H440v-18.4zm55.1 30.6v6.2h-6v-6.1h-12.3v6h-6v-6h-18.4V388H446v6.1h-6v6.2h6.1v12.2h6.1v-6.1h6.2v12.3h6.1v-12.3h18.4v6.1h-12.3v6.1H483v6.2h6.1v-18.4h6.1v6.1h6.1V425h6.2v-6.1h6.1v-6.2h-6.1v-6.1h-6.1v-6.1h6v-6.1h-12.2zm-67.4 49h6.2v-6h-6.1v6zm-12-18.3h30.6v30.6h-30.6V425zm6.1 24.5H440V431h-18.4v18.4zm73.5-18.4V425H489v6.1h6.1zm0 6.1H489v6.1h-6.1v-6h-6.1V431h6v-6.1h-12.2v-6.1h-6.1V431h-6.1v6.1h-6.1v18.4h6v-6.1h6.2v-6.1h12.3v12.2h6v-6.1h6.2v6.1h12.3v-6.1h6v-6.1h-12.2V437zM440 418.7h6.1v-6H440v6zm61.3 12.3v6.1h6v6.1h6.2V425h-6.1v6.1h-6.1zm12.2 24.5v-6.1h-6.1v6.1h6.1zm0-49v-6.1h-6.1v6.1h6.1zm-12.3-61.3h24.6v24.6H538V333h-36.8v12.3zm-98 24.6v-24.6h24.6V333H391v36.8h12.3zm24.6 98h-24.6v-24.6H391V480h36.8v-12.3zm98-24.6v24.6h-24.5V480H538v-36.8h-12.3z"
/>
</G>
</G>
<Path
fill={color}
fillRule="evenodd"
d="M247.3 22.2A52 52 0 01284 43a51 51 0 018.5 39.7c-10.1 46.6-19.2 87-27.8 125.5A7273 7273 0 00214.4 445v.2c-5 50.8.1 80.3 11 97.5a46.6 46.6 0 0014.6 14.7c-73.8-8.2-107.5-11.1-151.8-15L58.5 540C16.4 536.3 11 470.5 11 447c0-179 0-180.5 3.5-376 .3-16 21.1-49 44-49h181c2.6 0 5.2 0 7.8.2zm20.6.9c16.8 1.4 30.2 4.8 35.6 13.9 8.2 13.9 6.5 34 6.5 34h43c5.7 0 14.5 12.8 14 18.5-12.3 126.7-15.7 179.6-19 230.8-2.3 36.5-4.6 72.2-10 133.2-4.3 48-20.5 107.5-66.5 107.5l-13.3-1.5a43.6 43.6 0 01-28.5-19.4c-10-15.7-15.3-43.7-10.3-94.2 17.7-92 33-160.2 50.1-236.5 8.7-38.4 17.7-79 27.8-125.6a56 56 0 00-9.2-43.7 53.7 53.7 0 00-20.2-17zm46.3 447.6c-4 30.9-22.1 54-40.5 51.7-18.3-2.4-30-29.4-26-60.4s22.2-54 40.6-51.7c18.3 2.4 30 29.4 26 60.4zM69 176c-19.9-1-35.8 15.7-36.5 35.5C29 312 29 320.5 29 375c0 17.8 10.8 31.1 28.5 32.5 43.7 3.6 73.5 5.6 106 7.7l12 .8c16.2 1.1 29.2-10.5 32-26.5l3.3-18.6c11.6-66.5 14.1-81 24.7-151.4 2.7-18-5.8-40-24-40-75 0-75.5 0-142.5-3.5zm234 52.3h-3.6V221h3.5v3.6h7.2v3.6h-3.6v3.5h-3.6v-3.6zm7 0h3.6v3.5h-3.5v-3.6zm0-3.6V214h3.6v10.7h-3.5zm-3.5-3.6h-3.6v-3.5h-3.5V214h7.1v7.1zm3.6 49.9v-3.6h-3.6V264h7.1v7.1h3.6v-3.6h3.6v3.6h7v-3.6h3.6v3.6h3.6v-3.6h-3.6V264h3.6v-10.7h-3.6v-3.6h3.6v-3.5h-3.6v-3.6h3.6V239h-3.6v-3.5h3.6V214h-17.8v17.8h14.2v3.6h-7v3.5h-3.6v-3.5h-7.2v3.5h-3.5v-3.5h-10.7v-3.6h-3.6V214H278v17.8h17.8v3.6h-3.6v3.5h3.6v7.2h-3.6v3.5h3.6v-3.5h3.6v-3.6h3.5v7.1h-3.5v7.2h3.5v3.5h-3.5V271h3.5v-3.6h3.6v3.6h3.6zm-3.6-21.4v7.2h-3.6v-7.2h3.6zm3.6 0v-3.5h7v-3.6h-10.6v7.1h3.6zm7 3.6v-3.6h-7v3.6h7zm3.6 0h-3.5v3.6h-3.6v3.5h3.6v3.6h3.6v-3.6h3.5v3.6h7.1v-3.6H328v-3.6h3.5v-3.5H328V246h-3.6v-3.6h-3.6v10.7zm0 0h3.6v3.6h-3.6v-3.6zm10.7-14.3v3.6H328v-3.6h3.5zm0-10.7v-10.6h-10.6v10.7h10.6zm-49.8 7.2H278v3.5h7.1v3.6H278v7.1h3.6v-3.5h3.5v3.5h3.6V239H285v-3.5h-3.5zm42.7-10.7h3.6V221h-3.6v3.6zm-35.6-3.6H285v3.6h3.6V221zm3.6-3.5h-10.7v10.7h10.6v-10.7zm-7.2 46.3h3.6v-3.6H285v3.6zm-7.1-10.7h17.8V271H278v-17.8zm3.6 14.2h10.6v-10.6h-10.6v10.6z"
clipRule="evenodd"
/>
<Path
fill={color}
d="M450.4 321a2.5 2.5 0 105 0h-5zm-51.3-79l25 14.4v-28.8L399 242zm56.3 79c0-12.5.2-23.8 0-33.6-.3-9.8-1-18.4-3-25.4-2.1-7.1-5.5-12.9-11-16.8-5.6-3.8-13-5.7-22.8-5.7v5a34 34 0 0119.9 4.8c4.3 3.1 7.2 7.7 9 14a101 101 0 012.9 24.3c.2 9.7 0 20.8 0 33.4h5z"
/>
<Defs>
<ClipPath id="a">
<Path
fill="#fff"
d="M0 0h147v147H0z"
transform="translate(391 333)"
/>
</ClipPath>
</Defs>
</Svg>
);
};Does it solve the problem? |
|
Interesting! Thanks... I wonder why Figma outputted that. I'm no SVG expert. So not sure who's "In the wrong"... |
|
I'm going to try to look dipper into that issue, and if I find any other solutions I'll let you know ;) |
This did solve the problem for me, but not quite sure what way it's "supposed" to be. |
Let's keep it open, and maybe folks can send some examples of how we can reproduce that issue. |
|
Mask is not working when you put values as number or string for width, height, x and y inside the mask or its children or inside the children of the G with mask prop. |
|
@yousefArb |
bohdanprog
added
the
Close when stale
|
linearGradient doesn't work on web unless you refresh.
|
github-actions
bot
removed
the
Close when stale
|
Hi Dev, I was previously using version 15.6.0 in my React Native CLI project, but I encountered issues with some SVGs not rendering properly on iOS, although they worked fine on Android. I then upgraded to version 15.7.1, but the problem persisted. After checking in Expo, I found that the SVGs were rendering correctly there. Upon examining the version that Expo is using, I discovered it was 15.2.0. After downgrading to that version, my SVGs started working fine again. It seems there might be a regression or compatibility issue in versions 15.6.0 and 15.7.1 affecting iOS rendering when using SvgXml. Thanks for looking into this! |
|
Hi @MuneebQureshi1, |
|
@bohdanprog |
I guess that issue should be resolved, here is how it looks in iOS: |
|
@bohdanprog please, can you confirm this svg rendered properly with your fix ? the problem is with this tag 👇 this is the svg code 👇 |
|
Hello @yousefArb, |
|
#2422 (comment) |
EDIT: It also works at 15.8.0-rc.1. |
bohdanprog
added
the
Close when stale
|
The problem is still there. I have to get 2 copies of the same image with different names. It doesn't load in a different route page when using react native navigations. |
github-actions
bot
removed
the
Close when stale
|
@djaffer Can you provide a repro of how we can reproduce that problem? |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Description
Rendering in
"react-native-svg": "15.6.0"I made this SVG in Figma recently and tried using it in my app. I was on
[email protected]at the time. So I tried upgrading yesterday to 15.5.0 and to my surprise it worked on android but not iOS, so something was fixed in 15.3.0...15.5.0 that caused the SVG in the snack to start working on Android. It does still not work in iOS. It works on web. The issue is that the bottom right QR-icon is not rendered as shown on the attached image. The right hand render of the image is the expected state, the left hand shows how it renders previously on android.I tried today before submitting this bug with version 15.6.0 and as you can see in the top screenshot it is still buggy.
Steps to reproduce
./components/Icon.jsxfrom https://snack.expo.dev/@stefanwallin/react-native-svg-not-rendering-fully-on-ios with[email protected]as in the snack.[email protected](expo go does not support> 15.2.0yet)Snack or a link to a repository
https://snack.expo.dev/@stefanwallin/react-native-svg-not-rendering-fully-on-ios
SVG version
15.6.0
React Native version
0.74.5
Platforms
Android, iOS
JavaScript runtime
Hermes
Workflow
React Native
Architecture
Fabric (New Architecture)
Build type
Debug app & dev bundle
Device
Real device
Device model
iPhone 13 mini
Acknowledgements
Yes
The text was updated successfully, but these errors were encountered: