How can I make a .svg file to fill a 100% width of its <div> container?

html css svg

14,022

Change

width="800px" height="400px"

in your SVG to

width="100%" height="100%"

See here JSFiddle. test1.svg is your file and test2.svg is the file with the modifications above.

14,022

Omar Gonzalez

Sr. Web-dev, working at Pentalog México

Updated on June 04, 2022

Comments

Omar Gonzalez almost 2 years

Hi,

I'm trying to insert a .SVG into a div container. My problem is that I can't make the svg file to stretch itself to a 100% width. My code is the following:

<html> 
   <div id="frame1">
     <img src="svg/layer1.svg">
   </div>
</html>

CSS:

#frame1{
      width:100%;
      height: 400px;
      background-color: transparent;
}

SVG file:

<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"width="800px" height="400px" viewBox="0 0 800 400" 
enable-background="new 0 0 800 400" xml:space="preserve">
<g><defs><rect id="SVGID_1_" x="0" y="-0.371" width="800" height="400.742"/>

I tried with set preserveAspectRatio="none", and setting width to 100% inside the svg parameters but it is not working so far.

Thanks in advance

helderdarocha about 10 years

Remove width="800px" height="400px" from the SVG.

Omar Gonzalez about 10 years

It works with both, removing width-height altogether or with both being percent parameters. Apparently it doesn't work with one parameter being percent and the other bien pixels. thanks a lot!