0

I just wanna know how to change a svg size using css. What I need to do is this. I have multiple svg files. So for different screen sizes I need to display that different svg files. But when I trying to increase the scale of that svgs, that won't happen at all.

    <body>
        <div class="top-left-img">
        </div>
        <div class="bottom-right-img">
        </div>
    </body>

    @media only screen and (max-width:375px){
    
    }
    @media only screen and (min-width:375px){
    
    }
    @media only screen and (min-width:1440px){
       .top-left-img{
           background-image:url("/images/bg-pattern-top-desktop.svg");
           background-repeat:no-repeat;
           width:400px;
    }

These are my code lines for your reference.

Tharusha Induwara
  • 74
  • 1
  • 2
  • 9
  • This has nothing to do with SVG. When used as a background-image or in an img tag SVG behaves no different than an image. Maybe this will help you https://stackoverflow.com/questions/12609110/responsive-css-background-images – JHeth May 07 '21 at 20:54

1 Answers1

0

This should work:

.top-left-img {
    background-image:url("/images/bg-pattern-top-desktop.svg");
    background-repeat:no-repeat;
    background-size: cover;
    width:400px;
    height: auto;
}
Fluxium
  • 100
  • 1
  • 9