SVG having multi grouping is not rendring properly

[vikas837]

Description of the Issue
SVG having multi level groupings tag is not rendering with proper colour. Always black colour displays on the SVG.
Like in the below SVG fill="#FF0000" is the Red colour but it is displaying as black.

Sample SVG

Sample SVG code

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 24 25"> <g fill="none" fill-rule="evenodd"> <g fill="#FF0000"> <g> <g> <g> <path d="M22 4.5l-19.5.036v12.482h3.44l2.81 2.811 2.811-2.811H22V4.5zM4 6.032l16.5-.029v9.515h-9.56l-2.19 2.19-2.19-2.19H4V6.032z" transform="translate(-32 -1317) translate(16 1202) translate(0 99.5) translate(16 16)"/> </g> </g> </g> </g> </g> </svg>

Screenshots
Correct SVG:

Rendered SVG:

SVG displays black instead of red

Please help me to solve this issue.