Svgr: Black fill color disappears - Needed for react-native

[kg-currenxie]

🐛 Bug Report

SVG tranform removes the fill prop if the color is black

To Reproduce

Use the playground and paste this:

<svg viewBox="0 0 180 135" id="za">
  <g id="South-African-Rand">
    <polygon fill="#002395" points="0.6 0.9 0.6 135.9 180.6 136 180.6 0.999277156" />
    <polygon fill="#DE3831" points="0.6 0.9 0.6 68.4 180.6 68.4 180.6 0.999277156" />
    <polygon fill="#000000" points="0.6 25.875 0.6 110.475 63.15 110.475 63.15 25.875" />
    <path d="M61.2875482,68.4 L0.639039756,27.9676611 L0.6,0.9 L41.2503758,0.9 L142.412452,68.4 L41.2503758,135.9 L0.6,135.9 L0.6,108.886816 L61.2875482,68.4 Z M101.85,90.9 L101.85,45.9 L180.6,45.9 L180.6,90.9 L101.85,90.9 Z" fill="#FFFFFF" fillRule="nonzero" />
    <polygon fill="#FFB612" fillRule="nonzero" points="61.2875482 68.4 0.6 28.5425781 0.6 0.9 101.85 68.5 0.6 135.9 0.6 107.5485" />
    <path d="M77.5125289,68.4 L0.566362555,17.1025558 L0.518719952,1.02192007 L25.0863868,0.999277156 L126.187471,68.4 L25.0272297,135.840161 L0.631850962,135.947776 L0.602532928,119.673331 L77.5125289,68.4 Z M101.85,81.9 L101.85,54.9 L180.6,54.9 L180.6,81.9 L101.85,81.9 Z" fill="#007A4D" fillRule="nonzero" />
  </g>
</svg>

Expected behavior

Black color should stay. It doesn't:

import React from "react"
import Svg, { Path } from "react-native-svg"

function SvgComponent(props) {
  return (
    <Svg viewBox="0 0 180 135" {...props}>
      <Path fill="#002395" d="M.6.9v135l180 .1V1z" />
      <Path fill="#DE3831" d="M.6.9v67.5h180V1z" />
      <Path d="M.6 25.875v84.6h62.55v-84.6z" /> <---------------- BLACK MISSING HERE
      <Path
        d="M61.288 68.4L.639 27.968.6.9h40.65l101.162 67.5L41.25 135.9H.6v-27.013L61.288 68.4zm40.562 22.5v-45h78.75v45h-78.75z"
        fill="#FFF"
      />
      <Path
        fill="#FFB612"
        d="M61.288 68.4L.6 28.543V.9l101.25 67.6L.6 135.9v-28.352z"
      />
      <Path
        d="M77.513 68.4L.566 17.103.52 1.022 25.086.999 126.187 68.4l-101.16 67.44-24.395.108-.03-16.275L77.513 68.4zm24.337 13.5v-27h78.75v27h-78.75z"
        fill="#007A4D"
      />
    </Svg>
  )
}

export default SvgComponent

Render in react-native

Render on the web (without --native flag)

That works fine because svg fill on the web default to black
https://www.w3.org/TR/SVG/painting.html#FillProperty

## System:
 - OS: macOS Mojave 10.14.4
 - CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
 - Memory: 75.28 MB / 16.00 GB
 - Shell: 5.3 - /bin/zsh
## Binaries:
 - Node: 12.5.0 - ~/.nvm/versions/node/v12.5.0/bin/node
 - Yarn: 1.17.3 - ~/.nvm/versions/node/v12.5.0/bin/yarn
 - npm: 6.10.3 - ~/.nvm/versions/node/v12.5.0/bin/npm
 - Watchman: 4.7.0 - /usr/local/bin/watchman

[gregberge]

Hello looks like it is a bug in SVGO, but I have to check it. The SVGO disable toggle does not work in playground, another bug 🙄

[kg-currenxie]

Thanks. For now we'll use a workaround and do fill="#000001" :P

[ElForastero]

#000 is the default.
https://github.com/svg/svgo/issues/917#issuecomment-370162654

And it's being removed by removeUnknownsAndDefaults svgo plugin. So, just disable it.

#.svgo.yml

plugins:
  - removeUnknownsAndDefaults: false

[gregberge]

Seems solved!