Description

Hi all 👋 — first, thank you so much for this awesome open-source project ❤️. react-native-svg is a great tool and I deeply appreciate the work put into it.

🐛 Bug description

When rendering emojis (or other glyphs) inside a <Text> component, they become blurry or pixelated if the rendered size on screen is larger than the Text's font size.

It seems the emoji is rasterized based on the font size and then upscaled, rather than being rendered at the actual rendering resolution.

🔍 Possible root cause / suspicious code area

I believe the code in charge of emoji rendering was introduced in PR #746 (“Implement basic support for unicode emoji”) on this repo. I'm not sure if the code has changed much since, but I'm guessing the issue is somewhere in these files.

The heuristic or logic there may inadvertently constrain the rendering resolution to the fontSize of the text element or some fallback internal canvas size, causing upscaling artifacts when the displayed size is larger.

⚙️ Workaround

Scaling up all dimensions in the SVG file (using viewBox) seems to cause the Text to render natively at a higher resolution, fixing the issue. Unfortunately this is very tedious to do on the complex SVG files I'm given 😓

🧪 Reproduction

I’ve prepared a minimal reproduction here:
https://gist.github.com/TPXP/a2595d2f2f85c4524f470fc343787450

It shows 2 SVG: the one on the left has a smaller viewbox, while the right one has a larger viewbox and all dimensions multiplied by 10. As you can see, the right one looks less blurry.

Steps to reproduce

1. Create an SVG with a small viewbox, add text containing emojis in it.
2. Render the emoji at a size much bigger than its viewbox
3. Emoji looks blurry 😢
4. Try to multiply all dimensions in the SVG by 10, use save rendering sizes
5. Emoji looks better 😄 (it may still look a little blurry because iOS emojis are raster images but you get the idea)

Snack or a link to a repository

https://gist.github.com/TPXP/a2595d2f2f85c4524f470fc343787450

SVG version

15.12.0

React Native version

0.79.3

Platforms

iOS

JavaScript runtime

Hermes

Workflow

React Native

Architecture

Paper (Old Architecture)

Build type

Debug app & dev bundle

Device

iOS simulator

Device model

Screenshot for the issue comes from an iPad (10th generation simulator) running iPadOS 18.5. I'm seeing the same issue on an actual iPad device

Acknowledgements

Yes