[Error: Expected > (0:110). If this is valid SVG, it's probably a bug. Please raise an issue

[Proman4713]

Bug

SvgXml element doesn't work with console log:

 ERROR  [Error: Expected > (0:110). If this is valid SVG, it's probably a bug. Please raise an issue

and a pointer pointing at the end of the xml

Unexpected behavior

It doesn't render the SVG and simply gives this error

Environment info

Run react-native info in your terminal and copy the results here. Also, include the precise version number of this library that you are using in the project

React native info output:

info Fetching system and libraries information...
System:
  OS: Linux 5.15 Ubuntu 22.04.3 LTS 22.04.3 LTS (Jammy Jellyfish)
  CPU: (4) x64 Intel(R) Core(TM) i5-3210M CPU @ 2.50GHz
  Memory: 1.00 GB / 3.68 GB
  Shell:
    version: 5.1.16
    path: /bin/bash
Binaries:
  Node:
    version: 20.11.0
    path: ~/.nvm/versions/node/v20.11.0/bin/node
  Yarn: Not Found
  npm:
    version: 10.3.0
    path: ~/.nvm/versions/node/v20.11.0/bin/npm
  Watchman: Not Found
SDKs:
  Android SDK: Not Found
IDEs:
  Android Studio: Not Found
Languages:
  Java: Not Found
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.73.4
    wanted: 0.73.4
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Library version: 14.1.0

Steps To Reproduce

1. import SvgXml
2. create an SvgXml with the following code: <SvgXml style={headerStyles.image} xml={uri} width={60} height={60} />
3. declare variable uri with the following value: "<Svg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox="0 0 460 460" style={{backgroundColor: "rgba(29,45,68,1)"}}><G fill="rgba(120,214,147,1)" stroke="rgba(120,214,147,1)" strokeWidth={2.3000000000000003}><Rect x='147' y='257' width='55' height='55'/><Rect x='257' y='257' width='55' height='55'/><Rect x='147' y='312' width='55' height='55'/><Rect x='257' y='312' width='55' height='55'/><Rect x='92' y='92' width='55' height='55'/><Rect x='312' y='92' width='55' height='55'/><Rect x='92' y='147' width='55' height='55'/><Rect x='312' y='147' width='55' height='55'/><Rect x='92' y='202' width='55' height='55'/><Rect x='312' y='202' width='55' height='55'/><Rect x='92' y='257' width='55' height='55'/><Rect x='312' y='257' width='55' height='55'/></G></Svg>"
4. npm start

Describe what you expected to happen:

1. The svg should render an Identicon

[Zeroxys]

Same issue here, did you find a solution?

[wodin]

I believe that what you give to SvgXml's xml param is supposed to be a valid SVG. Not the JSX version of an SVG component.

So something like this:

<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 460 460" style="background-color: rgba(29,45,68,1)"><g fill="rgba(120,214,147,1)" stroke="rgba(120,214,147,1)" stroke-width="2.3000000000000003"><rect x="147" y="257" width="55" height="55"/><rect x="257" y="257" width="55" height="55"/><rect x="147" y="312" width="55" height="55"/><rect x="257" y="312" width="55" height="55"/><rect x="92" y="92" width="55" height="55"/><rect x="312" y="92" width="55" height="55"/><rect x="92" y="147" width="55" height="55"/><rect x="312" y="147" width="55" height="55"/><rect x="92" y="202" width="55" height="55"/><rect x="312" y="202" width="55" height="55"/><rect x="92" y="257" width="55" height="55"/><rect x="312" y="257" width="55" height="55"/></g></svg>

[Proman4713]

I believe that what you give to SvgXml's xml param is supposed to be a valid SVG. Not the JSX version of an SVG component.

So something like this:

<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 460 460" style="background-color: rgba(29,45,68,1)"><g fill="rgba(120,214,147,1)" stroke="rgba(120,214,147,1)" stroke-width="2.3000000000000003"><rect x="147" y="257" width="55" height="55"/><rect x="257" y="257" width="55" height="55"/><rect x="147" y="312" width="55" height="55"/><rect x="257" y="312" width="55" height="55"/><rect x="92" y="92" width="55" height="55"/><rect x="312" y="92" width="55" height="55"/><rect x="92" y="147" width="55" height="55"/><rect x="312" y="147" width="55" height="55"/><rect x="92" y="202" width="55" height="55"/><rect x="312" y="202" width="55" height="55"/><rect x="92" y="257" width="55" height="55"/><rect x="312" y="257" width="55" height="55"/></g></svg>

@wodin you're the one who responded here as well 💀