How can I set the background of SVG to transparent

Question

I created an SVG by Adobe Illustrator and use it in HTML:

 <?xml version="1.0" encoding="utf-8" ?>
    <!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    <svg version="1.1" id="Layer1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         viewBox="0 0 144 22" enable-background="new 0 0 144 22" xml:space="preserve">
<g>
    <path fill="#FFFFFF" d="M13.4,10.5c0,2.7,0,5.1,0,7.6c-3.7,0-7.4,0-11.1,0c0-0.6,0-1.1,0-1.7c3,0,6,0,9,0c0-1.3,0-2.5,0-3.8
        c-3,0-6,0-9,0c0-2.6,0-5,0-7.5c3.7,0,7.3,0,11,0c0,0.6,0,1.1,0,1.8c-3,0-5.9,0-9,0c0,1.2,0,2.4,0,3.6C7.3,10.5,10.3,10.5,13.4,10.5
        z" />

    <path fill="#FFFFFF" d="M139.8,18.4c0-0.9,0-1.6,0-2.5c-2.7,0-5.4,0-8.2,0c0-2.9,0-5.6,0-8.3c0.7,0,1.3,0,2.1,0c0,2.1,0,4.2,0,6.3
        c2.1,0,4,0,6.1,0c0-2.1,0-4.2,0-6.3c0.8,0,1.4,0,2.1,0c0,4.2,0,8.4,0,12.6c-3.5,0-6.8,0-10.3,0c0-0.6,0-1.1,0-1.8
        C134.3,18.4,137,18.4,139.8,18.4z" />

    <path fill="#FFFFFF" d="M16.6,18.2c0-3.6,0-7,0-10.6c3.4,0,6.7,0,10.2,0c0,1.9,0,3.9,0,5.9c-2.7,0-5.4,0-8.1,0c0,1,0,1.8,0,2.8
        c2.7,0,5.4,0,8.2,0c0,0.7,0,1.2,0,1.8C23.4,18.2,20,18.2,16.6,18.2z M18.6,11.6c2.1,0,4.1,0,6.1,0c0-0.7,0-1.4,0-2
        c-2.1,0-4.1,0-6.1,0C18.6,10.3,18.6,11,18.6,11.6z" />

    <path fill="#FFFFFF" d="M82.7,18.2c-3.3,0-6.5,0-9.8,0c0-3.5,0-7,0-10.6c2.5,0,5.1,0,7.7,0c0-0.9,0.1-1.6,0.1-2.4c0.7,0,1.3,0,2,0
        C82.7,9.5,82.7,13.8,82.7,18.2z M80.6,16.2c0-2.3,0-4.4,0-6.6c-1.9,0-3.8,0-5.6,0c0,2.2,0,4.4,0,6.6C76.9,16.2,78.7,16.2,80.6,16.2
        z" />

    <path fill="#FFFFFF" d="M39.5,18.2c-3.2,0-6.4,0-9.7,0c0-2,0-4,0-6.2c2.5,0,5,0,7.5,0c0-0.9,0-1.6,0-2.4c-1.6,0-3.3,0-5,0
        c0-0.7,0-1.3,0-1.9c2.4,0,4.7,0,7.2,0C39.5,11.1,39.5,14.6,39.5,18.2z M37.3,13.9c-1.9,0-3.7,0-5.5,0c0,0.8,0,1.6,0,2.3
        c1.9,0,3.7,0,5.5,0C37.3,15.4,37.3,14.7,37.3,13.9z" />

    <path fill="#FFFFFF" d="M99,18.1c0-0.5,0-1,0-1.6c2.6,0,5.3,0,8,0c0-1,0-1.8,0-2.8c-2.6,0-5.2,0-7.9,0c0-2.1,0-4,0-6
        c3.3,0,6.6,0,10.1,0c0,0.5,0,1,0,1.6c-2.6,0-5.2,0-8,0c0,0.9,0,1.7,0,2.6c2.6,0,5.3,0,8,0c0,2.2,0,4.2,0,6.3
        C105.8,18.1,102.4,18.1,99,18.1z" />

    <path fill="#FFFFFF" d="M93.9,16.4c0-2.9,0-5.8,0-8.8c0.7,0,1.4,0,2.1,0c0,3.5,0,7,0,10.6c-3.3,0-6.5,0-9.8,0c0-3.5,0-7,0-10.6
        c0.6,0,1.2,0,1.9,0c0,2.9,0,5.8,0,8.8C90,16.4,91.8,16.4,93.9,16.4z" />

    <path fill="#FFFFFF" d="M60.2,7.6c3.2,0,6.3,0,9.5,0c0,3.5,0,6.9,0,10.5c-0.6,0-1.2,0-2,0c0-2.8,0-5.7,0-8.6c-1.9,0-3.7,0-5.6,0
        c0,2.9,0,5.8,0,8.7c-0.7,0-1.3,0-2,0C60.2,14.6,60.2,11.2,60.2,7.6z" />

    <path fill="#FFFFFF" d="M119.3,7.5c0,0.7,0,1.3,0,2c-1.4,0-2.7,0-4.1,0c0,2.3,0,4.4,0,6.7c1.3,0,2.6,0,3.9,0c0,0.7,0,1.2,0,1.8
        c-2,0-3.9,0-6,0c0-2.8,0-5.6,0-8.4c-0.6-0.1-1-0.1-1.6-0.2c0-0.6,0-1.2,0-1.8c0.5,0,0.9-0.1,1.4-0.1c0-0.8,0.1-1.7,0.1-2.6
        c0.6,0,1.2,0,2,0c0,0.8,0,1.7,0,2.6C116.6,7.5,117.9,7.5,119.3,7.5z" />

    <path fill="#FFFFFF" d="M124.1,18.1c-0.8,0-1.4,0-2.1,0c0-3.5,0-7,0-10.5c2.3,0,4.5,0,6.9,0c0,0.6,0,1.2,0,1.8c-1.5,0-3.1,0-4.7,0
        C124.1,12.4,124.1,15.2,124.1,18.1z" />

    <path fill="#FFFFFF" d="M54.9,5.1c0.7,0,1.3,0,2.1,0c0,4.3,0,8.6,0,13.1c-0.7,0-1.3,0-2.1,0C54.9,13.8,54.9,9.4,54.9,5.1z" />

    <path fill="#FFFFFF" d="M45.1,4.7c0,4.5,0,9,0,13.5c-0.7,0-1.3,0-2.1,0c0-4.5,0-8.9,0-13.5C43.7,4.7,44.3,4.7,45.1,4.7z" />

</g>
</svg>

However, it always displays a white background in browser(Chrome ver 75.0.3770.100).

I tried to add the SVG into photoshop that ensures its background is transparent.

Why it turns out to be this? And how can I solve it?

Would you please help me? Thank you.

Answer 1

I found the problem now: whenever I set the container to display: flex. The background will not be transparent.

Solution: set a height(such as 100px) to the SVG element,then it will display now.