fix: svg with special characters leading to UnexpectedData

[kibolho]

Summary

Explain the motivation for making this change: here are some points to help you: Some SVG have especial characters that causes the following error:

• What issues does the pull request solve? Please tag them so that they will get automatically closed once the PR is merged https://github.com/software-mansion/react-native-svg/issues/1199

• What is the feature? (if applicable) No

• How did you implement the solution? Add a replace to escape some special characters

• What areas of the library does it impact? Components which use fetchText to fetch the svg: SvgWithCssUri, LocalSvg SvgFromUri and SvgUri

Test Plan

Demonstrate the code is solid. Example: The exact commands you ran and their output, screenshots / videos if the pull request changes UI.

What's required for testing (prerequisites)?

What are the steps to reproduce (after prerequisites)?

Compatibility

OS	Implemented
iOS	✅❌
Android	✅❌

Checklist

• [x] I have tested this on a device and a simulator
• [ ] I added documentation in README.md
• [ ] I updated the typed files (typescript)
• [ ] I added a test for the API in the __tests__ folder

[mschmid]

Hi @kibolho this fix could also help me with crashes in production, i am very happy you tackled this.

[WoLewicki]

How do those special characters end up in the svg? And does the same code work correctly on web? If so, I think we can merge the PR then.

[RyanHirsch-Phantom]

How do those special characters end up in the svg? And does the same code work correctly on web? If so, I think we can merge the PR then.

@WoLewicki, I've just run into this same issue. We have an SVG with a CR/LF in it that after passing through a Cloudflare proxy to sanitize potentially malicious content gets the escape sequence injected rather than the original CR/LF. The web displays both images fine, but react-native-svg displays an empty (black) square for the original with CR/LF and crashes when trying to render the one with the escape sequences. (I don't seem to be able to leverage error boundaries to gracefully handle the crash when there is the presence of the escape sequence)

example svgs: https://gist.github.com/RyanHirsch-Phantom/6a563603aefe1a3ca17955588159edfd

Note: we don't control these SVGs, we're presenting what is essentially user content so we can't simply fix the source, and its the reason we're attempting to sanitize.

[bohdanprog]

Hello @RyanHirsch-Phantom, I've just tested the solution from that PR, but unfortunately, it hasn't solved a problem.

[bohdanprog]

Hey @RyanHirsch-Phantom, I've just checked that gist.github.com/RyanHirsch-Phantom/6a563603aefe1a3ca17955588159edfd and everything worked well, I believed we can close PR, but if you still faced some problems with that feel free to open a new issue. Thank you.