unable to use svg in react-CodePudding

I am using a svg image by importing that from a folder but its showing empty then I tried ti give path directly but it does not solve the problem.

image.svg

<svg xmlns="http://www.w3.org/2000/svg" 
viewBox="0 0 480 360">
<defs><linearGradient id="a" x1="19.5%" x2="77.5%" y1="71.8%" y2="16.7%">
<stop offset="0%" stop-color="#00AB55"/><stop offset="100%" stop-color="#00AB55" stop-opacity="0"/>
</linearGradient></defs>
<path fill="url(#a)" d="M0 198.8c0 41.4 15 79.2 39.5 107.8A151.3 151.3 0 0 0 154.3 360a148.4 148.4 0 0
 0 56.5-11c9-3.7 19.1-3.3 28 1a75.8 75.8 0 0 0 33.9 8 75.9 75.9 0 0 0 50.8-19.3 34.4 34.4 0 0 1 22.9-8.4h.1a129
  129 0 0 0 74.5-23.7c19-13.4 34.5-31.7 44.9-53.3 9-18.7 14.1-40 14.1-62.3
 0-77-59.8-139.3-133.5-139.3-7.5 0-14.9.6-22 1.9a107 107 0 0 0-92-53.6 103.7 103.7 0 0 0-45.9 10.7c-13.2 6.4-25
  15.7-34.6 26.9-32.7.5-63 11.7-87.7 30.3C25.3 97.2 0 144.9 0 198.8z" opacity=".2"/><image height="300" x="322"
   y="30" href="/assets/illustrations/characters/character_2.png"/><path fill="url(#b)" d="M216.3 138v108.3a4 4 0
    0 1-4 4H195a4 4 0 0 1-4-4V138a4 4 0 0 1 4-4h17.3a4 4 0 0 1 4 4zm-55-68H144a4 4 0 0 0-4 4v176.3a4 4 0 0 0 
    4 4h17.3a4 4 0 0 0 4-4V74a4 4 0 0 0-4-4zm102 93H246a4 4 0 0 0-4 4v75.7a4 4 0 0 0 4 4h17.3a4 4 0 0 0 4-4V167a4
     4 0 0 0-4-4z"/><path fill="#005249" d="M359.2 253.4a207 207 0 0 1-3.7 9.7l-15.2.4c-3.3.1-6.9.2-9.6 2.1-5.2 3.6-.7 
     6.1-1.3 9.6-.7 4.2-4.9 5.1-9 5.1-14.1.1-27.7 4.6-41.5 7.3s-28.9 3.5-41.2-3.4c-.8-.5-1.7-1-2-2-.6-1.6.9-3.2 2.3-4.2 
     3.2-2.2 6.7-3.7 10.5-4.5 2.2-.5 4.5-.8 6.5-2 1.9-1.2 3.3-3.7 2.3-5.8-32.1 2-64.1 4.8-96 8.4-41.1 4.8-81.8 12.9-123
      15.9h-.4c-2.9-2.9-5.5-6-7.9-9.3l.6-.7c2-2.2 5-3.2 7.8-4.1 15.9-4.9 32.4-7.4 48.8-9.9 81.6-12.3 164.2-21.1 246.8-15.3a359
       359 0 0 1 25.2 2.7z" opacity=".2"/><path fill="#DFE3E8" d="m81.7 204.2 74 11v60.7h8.5v3.6h-19.5v-2.3h8.7v-50.3l-70-13.
       5v49h9.7v1.7H73.6V262h8.2v-57.8h-.1z"/><path fill="#C4CDD5" d="m80.6 204.2 74 11v60.7h8.5v3.6h-19.5v-2.3h8.7v-50.3l-70-13.
       5v49H92v1.7H72.4V262h8.2v-57.8z"/><defs>
       <linearGradient id="b" x1="140" x2="276.5" y1="98" y2="312.5" gradientUnits="userSpaceOnUse"><stop stop-color="#C8FACD"/>
       <stop offset="1" stop-color="#007B55"/></linearGradient></defs></svg>

first I imported that image when it doesnot work I gave direct path in src,

    // import { girlFlyIcon } from '../../utils/appSvg';
<Grid item>
            <img src='../../svg/image.svg'
              style={{
                opacity: '0.8',
                zIndex: '999'
              }} alt='' />
          </Grid>

How to resolve this....Thanks in advance...

CodePudding user response：

use require in src prop of img like this

<img
src={require('../../svg/image.svg')}
... />

CodePudding user response：

Instead of using image, try to use svg as component

import {ReactComponent as ImageSVG} from '../../svg/image.svg'
...
<ImageSVG/>