Some URL svgs don't work

[1mehdifaraji]

Bug

I use SvgUri component from react-native-svg and it works perfectly fine but won't show some svg urls uploaded to aws in my case the algo crypto coin svg .

import { SvgUri } from 'react-native-svg';

{coinsTable.map((coin) => {
   return ( 
          <SvgUri
                     style={{width: 40, height: 40}}
                     uri={coin.img}
              />
     )
})}

The url for the not working algo svg is exactly like other svg urls :

https://hollaex-resources.s3.ap-southeast-1.amazonaws.com/icons/algo.svg

sand svg logo url which is working fine :

https://hollaex-resources.s3.ap-southeast-1.amazonaws.com/icons/sand.svg

Environment info

React native info output:

System:
    OS: macOS 13.3.1
    CPU: (8) arm64 Apple M1
    Memory: 107.09 MB / 8.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 16.8.0 - ~/.nvm/versions/node/v16.8.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v16.8.0/bin/yarn
    npm: 7.21.0 - ~/.nvm/versions/node/v16.8.0/bin/npm
    Watchman: Not Found
  Managers:
    CocoaPods: 1.11.3 - /Users/mehdi/.rvm/rubies/ruby-2.7.6/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 22.2, iOS 16.2, macOS 13.1, tvOS 16.1, watchOS 9.1
    Android SDK:
      API Levels: 28, 29, 30, 31, 32, 33
      Build Tools: 28.0.3, 29.0.2, 30.0.2, 30.0.3, 31.0.0
      System Images: android-29 | Google APIs ARM 64 v8a, android-29 | Google APIs Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 2021.3 AI-213.7172.25.2113.9123335
    Xcode: 14.2/14C18 - /usr/bin/xcodebuild
  Languages:
    Java: 15.0.2 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.2 => 17.0.2 
    react-native: 0.66.1 => 0.66.1 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Library version: ^12.1.0

Describe what you expected to happen:

I expected SvgUri component would show the algo svg url just like other svg urls .

[tamlyn]

This repo is littered with issues about SvgUri not displaying stuff correctly.

Here's a Snack I made that collects up some of the problematic URLs: https://snack.expo.dev/@tamlyn/react-native-svg-issues

Notes:

1. You'll need to run it on a real device since the component doesn't work at all in React Native Web
2. Snack only supports 13.4.0 of react-native-svg which doesn't even attempt to render the broken SVGs – the latest version 13.9.0 manages a bit better but the output is still wrong
3. SVG rendering is hard 😠

[cinc98]

I experienced the same issue as you. The problem is not with the package; it's with your SVG icon. The 'fill' attribute is missing inside the 'path' element. By default, it is black, but if it's not explicitly set, the package cannot display the icon. Just add fill="#000000" inside the 'path' tag in your icon, or set property fill in <SvgUri fill="#000000" ... />, and it should work.