I'm trying to figure out this, but having a lot of trouble:

    <div class="wrapper">
      <svg width="100%" height="100%" viewbox="0 0 100 100">
       <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
      </svg>
    </div>

How can I make it so that the viewbox coordinates stretch 100% in height & width, following the viewport coordinates of the svg element?

P.S. The wrapper is 100% wide and has a set height.

I'm trying to figure out this, but having a lot of trouble:

    <div class="wrapper">
      <svg width="100%" height="100%" viewbox="0 0 100 100">
       <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
      </svg>
    </div>

How can I make it so that the viewbox coordinates stretch 100% in height & width, following the viewport coordinates of the svg element?

P.S. The wrapper is 100% wide and has a set height.

• javascript
• css
• svg
• viewbox

1 Answer 1

Just remove the 'height' and 'width' attributes from your SVG element.

 <div class="wrapper">
    <svg viewbox="0 0 100 100">
        <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
    </svg>
 </div>

https://jsfiddle/mhcp4qpy/

SVGs are a bit odd because they scale differently than most img elements. Most ppl 'overthink' it.

If you'd like the height to also fill the container 100% and never overflow, you can change the 'preserveAspectRatio' attribute on the SVG to make it so that it will distort beyond its original aspect ratio.

https://developer.mozilla/en-US/docs/Web/SVG/Attribute/preserveAspectRatio