claudios claudios -4 years ago 135
CSS Question

Svg responsive width with adjustable height

been having a hard time to come up with a good solution to have a responsive svg that will adopt the screen width plus an adjustable height. I tried setting

width to 100% and height to something like 200px
but no luck.



header.svg {
width: 100%;
max-height: 200px;
height: 200px;
}

<header>
<svg width="321px" height="141px" viewBox="0 0 321 141" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs></defs>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="header-copy-" fill="#262626">
<g id="header-copy-2">
<path d="M0,0.31823636 L321,0.31823636 L321,132.556396 C267.894961,138.185465 214.394961,141 160.5,141 C106.605039,141 53.1050387,138.185465 0,132.556396 L0,0.31823636 Z" id="Rectangle-Copy-12"></path>
</g>
</g>
</g>
</svg>
</header>





I also tried adding a
100%
width to the header element.

Answer Source

Firstly, your selector is incorrect, it should be header svg not header.svg. The SVG is a child of the header...the header does not have the class of .svg.

Secondly, I'd recommend removing the height and width from the SVG. It's not needed since you have set an appropriate viewbox.

Now, it seems you want the width of the SVG to be 100% of the page but the height to be limited to a set value.

To do this you will have to set the preserveAspectRatio attribute of the SVG to none.

Viewbox & PreserveAspectRatio

header {
  background: pink;
}

svg {
  max-height: 100px;
  width: 100%;
  margin: auto;
  display: block;
}
<header class="wide">
  <svg viewBox="0 0 321 141" version="1.1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
    <defs></defs>
    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="header-copy-" fill="#262626">
            <g id="header-copy-2">
                <path d="M0,0.31823636 L321,0.31823636 L321,132.556396 C267.894961,138.185465 214.394961,141 160.5,141 C106.605039,141 53.1050387,138.185465 0,132.556396 L0,0.31823636 Z" id="Rectangle-Copy-12"></path>
            </g>
        </g>
    </g>
</svg>
</header>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download