SVG does not render - React-CodePudding

I have been struggling to render a logo which is a .svg file. I am importing it like this

import logo from '../../stylesheets/logo.svg';

When I render it with an img tag, this is what I get:

 <img src={logo} style={{width:'175px', height:'40px'}} />

When I render it with an object or svg tag this is what I get

 <svg src={logo} style={{width:'175px', height:'40px'}} />

I am not sure what is wrong, but I have tried a few solutions that I saw online like adding this line to my svg file which didn't work.

 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

Here's my svg file

 <?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 26.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 800 250" style="enable-background:new 0 0 800 250;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#07A4AB;}
</style>
<g>
    <g>
        <path  d="M271.9,78.4c-0.9-0.9-2.5-2.1-4.9-3.6c-2.4-1.5-5.2-3-8.6-4.4c-3.4-1.4-7-2.7-10.9-3.6c-3.9-1-7.9-1.5-12-1.5
            c-7.2,0-12.6,1.4-16.1,4.1c-3.5,2.7-5.3,6.4-5.3,11.2c0,2.8,0.7,5.1,2,6.9c1.3,1.8,3.3,3.4,5.8,4.8c2.5,1.4,5.7,2.6,9.6,3.7
            c3.9,1.1,8.3,2.3,13.4,3.5c6.6,1.7,12.6,3.6,18,5.6c5.4,2,10,4.5,13.7,7.5c3.8,3,6.7,6.6,8.7,10.9c2,4.2,3.1,9.5,3.1,15.7
            c0,7.2-1.3,13.4-4,18.6c-2.7,5.1-6.3,9.3-11,12.5c-4.6,3.2-9.9,5.5-15.9,7c-6,1.5-12.3,2.3-18.9,2.3c-10.1,0.1-20.2-1.4-30.1-4.4
            c-9.9-3-18.8-7.2-26.7-12.8l11.5-22.7c1.1,1.1,3.2,2.6,6.2,4.4c3,1.8,6.5,3.6,10.6,5.5c4.1,1.8,8.6,3.3,13.5,4.6
            c4.9,1.2,10,1.8,15.2,1.8c14.4-0.1,21.6-4.7,21.6-14c0-2.9-0.9-5.4-2.5-7.4c-1.7-2-4-3.8-7.1-5.3c-3.1-1.5-6.7-2.9-11-4.1
            c-4.3-1.2-9.1-2.6-14.5-4.1c-6.5-1.7-12.1-3.6-16.9-5.7c-4.8-2.1-8.7-4.5-11.9-7.3c-3.2-2.8-5.6-6.1-7.2-9.8
            c-1.6-3.7-2.4-8.2-2.5-13.4c0-6.8,1.2-12.9,3.7-18.3c2.5-5.3,6-9.8,10.5-13.4c4.5-3.6,9.7-6.3,15.6-8.2c5.9-1.9,12.3-2.8,19.2-2.9
            c9.5-0.1,18.3,1.4,26.3,4.3c8,2.9,15,6.4,21,10.4L271.9,78.4z"/>
        .9-5.5,9.5C718.2,117.6,717.6,121.5,717.6,125.9z"/>
    </g>
    <g>
        <g>
          ....
        </g>
        <g>
            ....
        </g>
        <g>
            ....
        </g>
        <g>
          ....
        </g>
    </g>
</g>
</svg>

Am I missing something? Can someone please push me on the right direction? Thank you.

CodePudding user response：

import svg from './svg.svg';
<img src={svg} />

This is how to import svg's, feel free to respond if you need further help.

CodePudding user response：

You've to import it as a component. It is not an image so you can't put it in the img tag.

SVG's are rendered as a component so you can directly use it as a component.

import { ReactComponent as Logo } from '../../stylesheets/logo.svg';

And now use it as a component

<Logo />