Svg loses gradients displaying a black color

[tiagocorreiaitcenter]

Bug

I'm trying to use svg's which have some gradients, when I import them using as a file with react-native-svg-transformer I get the svg displayed but with a black color instead of keeping the defined colors/gradients.
Same happens if I convert the web svg into a react-native-svg component using svgr.now.sh

Svg file:

Svg displayed on react-native:

Environment info

info Fetching system and libraries information...
System:
    OS: Linux 5.0 Ubuntu 18.04.3 LTS (Bionic Beaver)
    CPU: (4) x64 Intel(R) Core(TM) i5-7200U CPU @ 2.50GHz
    Memory: 2.02 GB / 7.69 GB
    Shell: 4.4.20 - /bin/bash
  Binaries:
    Node: 10.16.2 - /usr/bin/node
    npm: 6.9.0 - /usr/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    Android SDK:
      API Levels: 23, 27, 28, 29
      Build Tools: 23.0.1, 27.0.3, 28.0.3, 29.0.2
      System Images: android-29 | Google APIs Intel x86 Atom
  npmPackages:
    react: 16.9.0 => 16.9.0 
    react-native: 0.61.2 => 0.61.2 
  npmGlobalPackages:
    react-native-cli: 2.0.1
    react-native-debugger-open: 0.3.20

Versions

    "react": "16.9.0",
    "react-native": "0.61.2",
    "react-native-svg": "^9.11.1",
    "react-native-svg-transformer": "^0.13.0"

Describe what you expected to happen:

1. To see the svg displayed correctly with the default gradients and colors

Reproducible sample code with svg file and react component

/~https://github.com/tiagocorreiaitcenter/react-native-svg-file-test

[msand]

The issue is that you're specifying the stop-color as a style rather than an attribute. It's possible to fix quite easily with a change in js. Fix coming up. Meanwhile, here's a workaround:

App.js

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

const xml = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
  <defs>
    <radialGradient id="gradient1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="#FF00FF" />
      <stop offset="100%" stop-color="#FFBD2E" />
    </radialGradient>

    <radialGradient id="gradient2" cx="50%" cy="50%" r="70%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="#FF00FF" />
      <stop offset="100%" stop-color="#FFBD2E" />
    </radialGradient>

    <radialGradient id="gradient3" cx="20%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="#FF00FF" />
      <stop offset="100%" stop-color="#FFBD2E" />
    </radialGradient>

    <radialGradient id="gradient4" cx="50%" cy="50%" r="50%" fx="20%" fy="90%">
      <stop offset="0%" stop-color="#FF00FF" />
      <stop offset="100%" stop-color="#FFBD2E" />
    </radialGradient>

    <radialGradient id="gradient5" cx="20%" cy="20%" r="50%" fx="20%" fy="20%">
      <stop offset="0%" stop-color="#FF00FF" />
      <stop offset="100%" stop-color="#FFBD2E" />
    </radialGradient>

    <radialGradient id="gradient6" cx="50%" cy="50%" r="50%" fx="80%" fy="80%">
      <stop offset="0%" stop-color="#FF00FF" />
      <stop offset="100%" stop-color="#FFBD2E" />
    </radialGradient>
  </defs>

  <circle cx="40" cy="60" r="30" fill="url(#gradient1)" />
  <circle cx="100" cy="60" r="30" fill="url(#gradient2)" />
  <circle cx="160" cy="60" r="30" fill="url(#gradient3)" />

  <circle cx="40" cy="140" r="30" fill="url(#gradient4)" />
  <circle cx="100" cy="140" r="30" fill="url(#gradient5)" />
  <circle cx="160" cy="140" r="30" fill="url(#gradient6)" />
</svg>`;

const App = () => {
  return (
    <SafeAreaView style={{flex: 1, backgroundColor: 'white'}}>
      <SvgXml width="100%" height="100%" xml={xml} />
    </SafeAreaView>
  );
};

export default App;

[msand]

Can you try with the latest commit from the develop branch?

[msand]

🎉 This issue has been resolved in version 9.12.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[prateekchachra]

Still not working. It's a completely black fill.

Loading it from file

[msand]

I wonder if it's related to react-native-svg-transformer then, @kristerkari would you mind having a look?

[kristerkari]

I just tested with v9.12.0, and both the svg file from this issue and @msand's workaround are working for me when I use react-native-svg-transformer.

[msand]

@kristerkari Great. Btw, there's support for the style element coming up, essentially removing the need for svgo, or at least giving support for css/style elements when fetching content from e.g. uris: #1150 (comment)

my experiment is available from the css branch: /~https://github.com/react-native-community/react-native-svg/tree/css

[tiagocorreiaitcenter]

@msand with the svg I had on the repo works perfectly but I just tested with another and the problem persists if I use a javascript svg or a .svg file, want me to update the repository with the reproducible code? Or are you already aware of the situation?

[tiagocorreiaitcenter]

Just updated it, give it a new look @msand and thanks for your time

[msand]

@tiagocorreiaitcenter The other svg file contains a style element with css inside it, and if you use svgr, you need to specify settings (onlyMatchedOnce to false) for the inlineStyles plugin, because the selectors in your css match more than a single element, and by default it doesn't inline those css rules:

{
  "plugins": [
    {
      "inlineStyles": {
        "onlyMatchedOnce": false
      }
    }
  ]
}

@neoziro Perhaps this should be made the default when setting the react-native option in svgr?

Alternatively, you can use the SvgCss element from react-native-svg like this:

import React from 'react';
import {SvgCss} from 'react-native-svg';

const xml = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
  <style>.bones{fill:#ccc ;} .eye{fill:#666;}</style>

  <path class="bones"
        d="M38.8 97.7c-2.1 1.1-4.2 2.4-6.1 4-.9.8-3.4 3.1-3.1 4.5.6 3.1 6.4.1 7.9-.7 2.7-1.4 8.6-3.7 9.9-6.6 2.4-5.3-6.7-2.2-8.6-1.2zM143.4 82c-.9-4.1-4.2-8.9-7.7-11.2-5.1-3.3-14.6-8.2-20.1-3.1l.6-.4c-5 4.7 5.5 1.2 6.2 3.1.4 1.1-2.6 2.2-3.3 3-1.1 1.2-1.7 3.1-1.6 4.9.4 6.3 7.9 10.6 13.5 11.4 4.5.7 13.8-1.7 12.4-7.7z"/>

  <path class="bones"
        d="M179.1 128.8c-4.9-4.2-10.6.5-19-4-2.2-1.2-9.1-5.7-18.3-11.7 1.7-.9 3-1.9 4.1-3 3.9-4.1 4.5-7.1 4.6-8.2 1.2-1 4.8-4.7 5.2-13.2.3-6-2.6-8.7-7.1-11-.2-.1-.5-.3-.7-.4-1-.7-1.9-1.9-2.7-3-.5-.7-1-1.3-1.6-1.9-1.4-1.5-2.9-2.9-4.3-4.1 2.6-3.2 4.5-5.5 5.5-6.5 6.6-6.9 13.5-4.3 16.8-9.8 3.3-5.5 1.6-11.9-2-12.5-2.7-.4-5.2 1.1-7 .3-.7-.3-1.3-1-1.8-2.3-.9-2.5-1.3-5.8-4.6-6-4.5-.2-11.6.8-10.7 9 .9 8.2 5.1 6.2-5.9 21.7l-.1.1c-2-.7-3.9-1.1-5.7-1.1-1.2 0-2.5.2-3.6.5-5.9 1.6-9 3.6-11 4.9-1.2.8-2.1 1.3-2.8 1.3-.3 0-.6-.1-.9-.2-.6-.2-1.2-.6-2-1-2.2-1.2-5.1-2.9-8.4-2.9-2.2 0-4.4.8-6.3 2.4-2.2 1.8-2.6 4-3.1 6-.2.8-.3 1.6-.6 2.5-8.7-6-15-10.4-16.2-11.4-4.6-3.8-1.5-14.7-5.8-16.5-4.3-1.9-8.6 3.8-13.6 2.9-5-.9-10.8.7-10.7 8.4s10.3 6.9 15.1 10c1.6 1 10.3 6.7 21.8 14.3-2.3.9-5.2 1.7-8.8 2.5C40.8 90.8 19 96.6 17 106.3c-1 4.8.5 8.2 4.4 10.1.1.1.2.3.4.4l.6.6c.4.4.6 1 .8 1.6.2.5.4 1.1.8 1.6.7 1.2 1.6 2.4 2.8 2.4 1.3 0 2-1.4 2.2-1.8.2-.5.4-1 .5-1.3.3-.9.3-1.1 1.3-1.2h.1c.8 0 1.4.4 2.1 1 .5.4 1.1.9 2 1.2.7.3 1.1.4 1.5.4 1.2 0 1.3-1.1 1.4-1.6 0-.4.1-.8.3-1.2.1-.3.3-.6.6-.8.5 0 1-.1 1.5-.2.2.1.4.2.6.4.1.1.5.7.7 1.2.8 1.4 1.5 2.8 2.7 2.8h.1c1-.1 1.3-1.3 1.8-3 .2-.7.5-1.8.7-2.1l.3-.3c.5-.1 1.1-.2 1.7-.3.3.3.6.8.9 1.3.8 1.2 1.7 2.8 3.4 2.8.3 0 .6-.1.9-.2 1.3-.4 2-1.9 2.7-3.2.7-1.4 1.2-2.4 1.9-2.4.3 0 .8.2 1.2.5.4.3.8.7 1.1 1.2.7.9 1.5 1.9 3 1.9.4 0 .8-.1 1.2-.2 1.7-.6 2.2-2 2.6-3.1.2-.6.4-1.2.8-1.7.7-.9 1.3-1.4 1.8-1.4.4 0 .8.3 1.1.7.2.2.3.5.5.7.5.8 1.1 1.7 2.2 1.7.7 0 1.4-.4 2.2-1.3.5-.5.8-1.2 1-1.8.4-1.1.6-1.5 1.3-1.6h.1c.3 0 .5.2.8.7.4.5 1 1.3 2.1 1.3.3 0 .5 0 .8-.1.9-.3 1.5-1.1 1.9-1.8.3-.5.6-.9.9-1.1.4-.2.7-.2.8-.3 0 .2 0 .5-.2 1.1-2 1.7-4.4 3.5-7 5.2h-.2c-.6 0-1.4 0-2.2.2-1.9.3-2.6 1.3-3.3 2.3-.3.4-.6.9-1.1 1.3-.5.5-.9.5-1.1.5-.3 0-.7-.1-1.1-.2-.6-.2-1.2-.4-2-.4h-.2c-2.2.1-2.7 1.2-3.2 2.3-.1.3-.3.7-.5 1-.2.4-.4.6-.5.7-.1 0-.1-.1-.2-.1-.4-.3-.9-.6-1.8-.8-.4-.1-.7-.1-1.1-.1-1.6 0-2.3 1.1-2.8 2-.1.2-.2.4-.4.6-.7 1.1-.9 1.1-1.1 1.1-.3 0-.7-.1-1.3-.3l-.8-.2c-.7-.2-1.4-.4-2.1-.4-1.2 0-2.1.6-2.8 1.6-.4.7-.5 1.3-.6 1.9-.2 1-.2 1-.8 1h-.2c-.2 0-.7-.2-1.1-.4-.6-.3-1.4-.7-2.2-.7-.7 0-1.3.3-1.8.9-.6.7-.5 1.7-.5 2.4 0 .4.1.9 0 1-.1.1-.3.2-.7.2-.3 0-.6-.2-1-.4-.5-.3-1.2-.7-2-.7h-.3c-2.6.4-3.9 5.5-3.7 7.6.2 3.7 2 4.2 5.8 4.9.7.1 1.5.2 2.4.2 7.7 0 19.1-4.9 31.3-10.2-6.4 8-11 13.8-12 15-3.6 4.4-13.6 6.9-11.3 14.2 2.3 7.3 8.3 7 12.8 4.6 4.5-2.4 10.3 1.7 13.8-1.5s-2.8-12.5.4-17.5c1.1-1.7 8.4-11.3 17.8-23.6 4.7-1.7 9.3-3 13.4-3.7 8.2-1.4 14.8-2.6 20.2-3.8 7.4 5 13.5 9.2 16.8 11.7 15.3 11.3 10.7 10.7 12.4 18.8 1.7 8.1 8.7 6.8 13 5.2 3.1-1.2 2.4-4.5 2.5-7.1.1-1.4.4-2.2 1-2.7 1.5-1.3 4.3-.7 6.8-1.9 3.1-1.9 2.7-8.6-2.2-12.8zm-71.3-13.1c-10.3 1.8-22.6 7.1-34.4 12.2-6.3 2.7-12.6 5.6-19.1 7.8-2.6.9-5.3 1.8-8.1 2.2-.4.1-5.8-.1-4.3-1.9 1-1.3 2.4-.3 3.5-.7 1.8-.6.6-1.6 2-2.8 1.3-1 2.7.1 4-.2 1.8-.4 1.5-1.4 2.6-2.5 1.6-1.5 2.9-.5 4.6-.6 1.9 0 3.5-1.3 4.8-2.7 1.5-1.6 2.1-2.6 4.5-2.5 2 .1 3.7.6 5.6-.8 1.8-1.3 1.5-2.1 3.9-2.1 1.9 0 3.8 0 5.4-1.3 1.3-1 1.6-2.7 3.3-3.2 1.5-.4 2.9.7 4.6.2 1.8-.5 2.1-2.2 3.6-3 1.6-.9 3 .8 4.7.3 1.5-.4 1.9-2.4 3.4-2.9 1.8-.6 2.3 1 4 1.2 3.2.4 8.3-3.1 10.9-4.7 3.9-2.4 5.5-7.8 10.7-7.5 5.1.3 10.5 2.8 15.3-.3-5.3.8-10.5-2.1-15.7-3.2-4.6-1-9.5-.7-14.1.5-2.1.5-4.2 1.2-6.2 1.9-1.9.6-2.7 2.3-4.3 3-2.3 1-3-.5-4.6-1.7-3.1.3-3.3 3.6-6 4-2.9.4-4.9-2.6-8-2.1-3.8.6-7.8 2.1-11.6 2.9-4.5 1-9.2 1.7-13.7 2.9-6.1 1.6-12.1 3.3-18.3 4.4-5.8 1-22.9 2.8-20.7-8.1.2-1 .8-2 1.7-2.9-.2 1.2.5 1.9 2.7.9 1.2-.6 4.8-3.7 2.6-4.6 9.9-5.2 28.1-9.3 40.4-12.1 17.6-4 20.1-9.3 21.3-15.3.4-2 .7-3.1 1.9-4.1 1.3-1.1 2.6-1.6 4.1-1.6 2.4 0 4.8 1.4 6.7 2.5.8.5 1.6.9 2.3 1.2.8.3 1.5.5 2.3.5 1.7 0 3.1-.9 4.6-1.9 2-1.3 4.7-3 10.1-4.5.9-.2 1.8-.4 2.7-.4 3.4 0 7.1 1.5 11.4 4.7 2 1.5 4 3.3 6 5.4.4.5.9 1.1 1.4 1.7.9 1.2 2 2.6 3.4 3.6.4.3.8.5 1.2.7 4.2 2.1 5.4 3.9 5.2 7.8-.3 8.1-3.9 10.7-4.1 10.8l-1.5 1 .4 1.4c0 .4-.4 2.6-3.6 6-3.9 4.6-13.7 6.8-35.5 10.5z"/>

  <g>
    <path class="eye"
          d="M128.1 79.6c1.6 1.3 3.1 2.6 4.7 3.9.6.5 2.7 2.8 3.2 1.4.5-1.3-2.4-3.5-3.2-4.3-1-1-2.2-2-3.2-3.1-1.2-1.2-4.2-5.1-6.4-3.4-.8.6-.3.9.3 1.5 1.5 1.4 3 2.7 4.6 4z"/>
    <path class="eye"
          d="M130.4 78.1c-1.5 1.4-2.9 2.9-4.3 4.3-.5.5-3.1 2.4-1.7 3.1 1.2.6 3.7-2.1 4.6-2.8 1.1-.9 2.2-2 3.4-2.9 1.3-1.1 5.4-3.8 4-6.1-.5-.8-.8-.4-1.5.2-1.6 1.4-3.1 2.8-4.5 4.2z"/>
  </g>
</svg>`;

export default () => {
  return <SvgCss xml={xml} width="100%" height="100%" />;
};

[msand]

[msand]

@tiagocorreiaitcenter Can you try this?

yarn add react-native-svg-transformer@msand/react-native-svg-transformer#e5f3734

[tiagocorreiaitcenter]

@msand Hey, thanks for your time once again, I tested and with svg above the problem was indeed solved, but I just updated it to a simple circle with a linear-gradient and it still fails on this scenario, do you mind giving a new look to it? thanks

[msand]

@tiagocorreiaitcenter We currently don't have support for xlinkHref on the Gradient elements, there is a pr with partial support but not properly implemented yet: /~https://github.com/react-native-community/react-native-svg/pull/920/files

[tiagocorreiaitcenter]

@msand Ok, I will keep an eye on it, hoping it comes out soon, thanks for your time

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You may also mark this issue as a "discussion" and I will leave this open.

[stale]

Closing this issue after a prolonged period of inactivity. Fell free to reopen this issue, if this still affecting you.