resize svg wrapped in div that is wrapped in div

Question

I'm having a problem coverting inline SVG to be wrapped in divs. I was using nested SVGs before and now I'm told I have to use nested divs with inline SVG.

Basically, I need the SVG to be sized to the "container" - the "container" is size to the browser window.

For an example of what works before I tried the whole div thing:

SVG Only Example - works perfectly

But when I try to wrap divs around them, it just stays the same size as my viewBox, no matter what I've tried. I've looked up a lot on this on SO and elsewhere and nothing seems to work: padding tricks, 100vw, width, height, etc.

Here's the latest of what I've tried:

SVG wrapped in DIV Example - doesn't behave the same

I put a "border:dashed;" in the first div, just to make sure it is resizing with the browswer window and it is. It's just that everything inside that div doesn't change.

Any advice on how to get the "wrapped in div" strategy to match the "plain SVG" strategy?

More clarity: I guess what I'm saying is that "background" shape needs to be 1000w x 500h, relative to the "container" size. Any of it's children need to be absolutely positioned inside of that 1000w 500h and relative to it. The "container" size is the available space. So if if the browser window is 3000w x 2000h, then technically the "background" shape should be 3000w x 1500h (and the child shapes resize accordingly too - but the stay in their original relative position - relative to 1000w x 500h). If the window 800 w by 600 h, the "background" and child shapes shrink to fit that, relatively. Just like the SVG example.

It might be helpful to take the SVG example above, save it as an html file, launch locally and resize your browser up and down. That's what I'm to find help with, but divs don't seem to know how to handle this.

user_4867993 · Answer

There's no real equivalent to viewBox property of SVG on DIV elements. The closest one would transform scale. So if you give your div containers a specific size in pixel without adjusting on resize, you're going to somewhat override the viewbox calculations.

That being said, if your div containers are resized with the window, then it can work. Also with minimal javascript you can get the same result as viewbox.

For the css only solution, you define your div containers so they are 100% the size of the window. The SVG viewbox is then still making the calculations. You'll need to define a preserveAspectRatio to have the same behavior as your SVG example. Like this:

html, body {
  width: 100%;
  height: 100%;
  padding: 0px;
  margin:0px;
  
}

* {
  box-sizing: border-box;
}

For the javascript solution, you define the size on your div containers, and your svg can then be relative and not have the positioning info. And on resize you adjust the scale based on the innerWidth. Like this:

window.onload = window.onresize = calculateScale

function calculateScale() {
  var scaleFactor = innerWidth / 1000;
  document.getElementById('container').style.transform = `scale(${scaleFactor})`

}

html,
body {
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0px;
}

* {
  box-sizing: border-box;
}

user_11269391 · Answer

I think I got what you are looking for but this is two different svgs not the same vector image.

I'm wrapping both svgs with a div and im overlaying the second div using an absolute position.

user_11269391 · Answer

Like this?

EDIT: Changed the snippet.

This version uses a to wrap the inner svg with a div element. Outcome is as expected.

If you are trying to have something like this:

Then you'll need to overlay the divs on top of one another and you can't manipulate the svg any further

resize svg wrapped in div that is wrapped in div

3 Answers

Like this?