SVG component become pixelated when applying rotation

[paul-leymet]

Question

Environnement

• Google Pixel 3a (real device)
• reproduced on Google Pixel 4 (emulator)

Packages versions

    "react": "17.0.2",
    "react-native": "0.67.2",
    "react-native-svg": "12.4.4"

Issue

When applying rotation to the following SVG, the component become pixelated (see following images).

const HeartSvg = (props: SvgProps) => (
<Svg data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.32 15.01" {...props}>
  <Path
    d="M7.66 15.01c15.5-10.36 3.24-19.65 0-12.48-3.26-7.19-15.48 2.14 0 12.48"
    style={{
      fill: '#fff',
    }}
  />
  <Path
    d="M7.64 13.94c13.83-8.86 2.79-17.54 0-10.36-2.8-7.19-13.81 1.52 0 10.36"
    style={{
      fill: '#d51f39',
    }}
  />
</Svg>
)

export default HeartSvg

Without rotation	With rotation

Notice the jagged edges on the right images.

→ Do you guys know how to avoid this kind of effect ?

[pietroanello]

Same issue here

[tonyjaimep]

Same here with scale

[whalemare]

In my case iOS works very well, but Android pixelated It's just SVG with applied transform-scale property

    "react-native-svg": "13.9.0",
    "react-native": "0.71.6",

https://user-images.githubusercontent.com/9128731/233033868-2f6dd500-a566-465d-bdf9-d6a17cfc3ae3.mov

[samandarkuchkarov]

Same here with scale

[techgerm]

Seeing the same issue as well - any updates here?

[welschmoor]

same, on a real device too