CODEWITHSUNDEEP
csssvg
claudios
claudios

Reputation: 6656

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.

Upvotes: 4

Views: 5119

Answers (1)

Paulie_D
Paulie_D

Reputation: 114991

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>

Upvotes: 5

Related Questions