How to set up/display SVG gradient on website?

Question

JavaScript

Greetings
I can not understand what is the error in displaying the SVG gradient. There is a file - file.csv, it contains the code:

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 80 80" style="enable-background:new 0 0 80 80;" xml:space="preserve" display="none">
  <defs>

    <symbol id="xxxxx" viewbox="0 0 80 80">

      <linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="13" y1="20" x2="33" y2="20">
        <stop  offset="0" style="stop-color:#B42E27"/>
        <stop  offset="1" style="stop-color:#F11727"/>
      </linearGradient>

      <path fill="url(#SVGID_4_)" stroke="#404041" stroke-miterlimit="10" d="M30,30H16c-1.6,0-3-1.4-3-3V13c0-1.6,1.4-3,3-3h14
    c1.6,0,3,1.4,3,3v14C33,28.6,31.6,30,30,30z"/>
      <path fill="#404041" stroke="#404041" stroke-miterlimit="10" d="M55,30H41c-1.7,0-3-1.4-3-3V13c0-1.6,1.3-3,3-3h14c1.7,0,3,1.4,3,3v14C58,28.6,56.7,30,55,30z"/>
    
    </symbol>
  </defs>
</svg>

This code is displayed on the site like this:

<div class="m-img">
  <svg>
    <use xlink:href="custom/img/svg/file.svg#xxxxx"></use>
  </svg>
</div>

The gradient doesn't want to come out. Please tell me what is wrong and how to fix it!
There are two shapes in the file:
1. a shape with a gradient and a stroke (the stroke is displayed, the gradient is not displayed)
2. a shape with a fill and a stroke (the stroke and the fill are displayed)

Answer 1

Try like this:

<svg height="16" width="16" version="1.1">
<defs>
  <linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="13" y1="20" x2="33" y2="20">
    <stop  offset="0" style="stop-color:#B42E27"/>
    <stop  offset="1" style="stop-color:#F11727"/>
  </linearGradient>
  <path id="petal" fill="url(#SVGID_4_)" stroke="#404041" stroke-miterlimit="10" d="M30,30H16c-1.6,0-3-1.4-3-3V13c0-1.6,1.4-3,3-3h14
    c1.6,0,3,1.4,3,3v14C33,28.6,31.6,30,30,30z"/>
  <symbol id="xxxxx" viewbox="0 0 50 50">
    <use xlink:href="#petal" y="0" x="0"/>
  </symbol>
</defs>
</svg>

<svg height="112" width="64" version="1.1">
  <use xlink:href="custom/img/svg/file.svg#xxxxx"/>
</svg>