CODEWITHSUNDEEP
svg
Kirk Ross
Kirk Ross

Reputation: 7153

SVG 100vh height, with auto/responsive width?

Is there a simple way to have an SVG inside a div respond to the parent container's height and adjust the width accordingly? 

<div class="wrapper">
  <div class="svg-wrap">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192.75 512">
      <title>SVG FULL HEIGHT</title>
      <g id="Layer_2" data-name="Layer 2">
        <g id="export">
          <path class="cls-1" d="M41.71,256c0-110.21,61-206.16,151-256H0V512H192.75C102.7,462.16,41.71,366.21,41.71,256Z" />
        </g>
      </g>
    </svg>
  </div>
</div>

FIDDLE

Upvotes: 0

Views: 2088

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101800

Set the SVG to 100vh.

    body {
      margin: 0;
      padding: 0;
    }
    
    .svg-wrap svg {
      height: 100vh;
    }
    
    .wrapper {
      background: #CCC;
    }
    
    .cls-1 {
      fill: #ffcc00;
    }
<div class="wrapper">
  <div class="svg-wrap">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192.75 512">
      <title>SVG FULL HEIGHT</title>
      <g id="Layer_2" data-name="Layer 2">
        <g id="export">
          <path class="cls-1" d="M41.71,256c0-110.21,61-206.16,151-256H0V512H192.75C102.7,462.16,41.71,366.21,41.71,256Z" />
        </g>
      </g>
    </svg>
  </div>
</div>

Upvotes: 1

Related Questions