SvgUri/SvgFromXml components don't un-escape special symbols

[DanilaFadeev]

Description

The SvgUri and its underlying SvgFromXml component do not un-escape text from the SVG element. It prevents displaying special characters (such as <, >, &, and others) in SVG text elements.

Example

Source SVG string, retrieved from remote URL:

<svg>
    <text x="10" y="32" fontSize="32">&amp; &lt; &gt;</text>
</svg>

React Native SVG component example:

import { SafeAreaView, StyleSheet } from 'react-native';
import { SvgFromXml } from "react-native-svg";

export default function App() {
  return (
    <SafeAreaView>
      <SvgFromXml
        xml={`<svg><text x="10" y="32" fontSize="32">&amp; &lt; &gt;</text></svg>`}
      />
    </SafeAreaView>
  );
}

Result

IOS	Android	Web

Expected behavior

The HTML special characters should be un-escaped inside the tag at the SVG rendering time, as it works on a web browser.

Steps to reproduce

Can be reproduced using a base React Native or Expo project.

Snack or a link to a repository

https://snack.expo.dev/@danilademidovich/23ac00?platform=ios

SVG version

15.2.0

React Native version

0.74.1

Platforms

iOS

JavaScript runtime

Hermes

Workflow

Expo Go

Architecture

None

Build type

Release app & dev bundle

Device

None

Device model

iPhone 14 Pro Max

Acknowledgements

Yes

[bohdanprog]

Hi @DanilaFadeev,

Thank you for your contribution to the library's development. I believe the optimal solution at this point is to display SVG using SVG components as we work on enhancing our parsing function.