SVG viewBox="0 0 100 100" wont scale my path to 100%?

Question

I currently have an svg path that only shows about 50%. How can I get it to show 100%? Here is my code:

<div className="svgPathContainer">
   <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
     <path d="M82 88L0 0H123V170H0L82 88Z" fill="#F9B300" />
  </svg>
</div>

I have className="svgPath" set as:

.svgPathContainer{ 
  width: 100%;
  height: 100%;
} 

Here is also an example of the svg only showing at 50%: https://codesandbox.io/s/svg-scaling-fff1q?file=/src/App.js:93-357

The problem: Why wont the svg path scale to 100% of the.svgPathContainer?

Answer 1

The viewBox is like a canvas size. So drawings outside of this view box will be clipped. Like css overflow: hidden. And your drawing has a size of width 123px and height 170px. So you have to change the view box to this value. Check our some docs .

If you want to keep the viewbox of 100 x 100 px, you need to change your drawing element size (path).

The view box has nothing to do with the scale. It's just the canvas size. A rect clip with width, height and offset (xywh) for the SVG elements inside. And the SVG tag's width and height attributes are for scale the rendered image.

 <div className="svgPathContainer"> <svg width="100%" height="100%" viewbox="0 0 123 170" preserveAspectRatio="none"> <path d="M82 88L0 0H123V170H0L82 88Z" fill="#F9B300" /> </svg> </div>