Pixelated SVG on Android when using SvgXml and applying style scale transform.

[israelcrux]

Bug

SVGs displayed using SvgXML are pixelated on Android when scaled using style transforms.

Conditions to reproduce:

• Use SvgXML
• Apply a style transformation on scale different to 1 (does not matter if less or more)
• Run on Android.

The following component:

import * as React from 'react';
import { SvgXml } from 'react-native-svg';

export const LogoSVG: React.FC = () => {
  const svgXML = `<svg width="20" height="20" viewBox="0 0 40 40" fill="none">
    <circle cx="20" cy="20" r="10" fill="#FF0000"/>
  </svg>`;
  return <SvgXml xml={svgXML} style={{ transform: [{ scale: 2.5 }] }} />;
};

Renders like this:

In contrast, when no scale transformation is applied (scale = 1);

import * as React from 'react';
import { SvgXml } from 'react-native-svg';

export const LogoSVG: React.FC = () => {
  const svgXML = `<svg width="60" height="60" viewBox="0 0 40 40" fill="none">
    <circle cx="20" cy="20" r="10" fill="#FF0000"/>
  </svg>`;
  return <SvgXml xml={svgXML} style={{ transform: [{ scale: 1 }] }} />;
};

It renders a sharp, geometrically precise figure:

[csath]

I'm also getting this issue on Android. I tried using react-native-svg 14.0.0, 13.14.0, 13.13.0 with RN 0.72.6. Still getting this issue. Any workaround or fix?

Seems the same issue mentioned in https://github.com/software-mansion/react-native-svg/issues/1885#issuecomment-1478531048

[welschmoor]

same here