SVG container height issues ie11

[Visual-Q]

This is a css or svg problem not specifically gsap but it affects my animation so maybe someone can shed some light on it.

 

I've got various svgs on my page. They are working fine except that ie11 seems to be adding extra height to the container. This happens regardless of whether the svg is inside an img tag or placed as inline code and regardless of whether the svg has internal height and width or preserve aspect ratio settings. This is to say it occurs on svgs with only an internal viewbox setting and svgs with viewbox and additional height/width/aspect ratio setting equally.

 

For instance an svg with viewbox 0 0 500 500 scales responsively and computes to equal values height and width in chrome safari etc but in ie11 the height is larger. The svg content isn't stretched it renders correctly there just seems to be extra height to the container added that's throwing page element out of alignment.

 

It seems that ie11 just wants to arbitrarily add height to the svg container. Does anyone know why this occurs?

 

 

[Visual-Q]

For anyone who can benefit from it I found this discussing it https://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/.

 

The solutions contained in it appear to fix the issues in ie11 at least for inline svg code and svg in img tags that i needed it for.

 

in my case this worked:

 

width:100% on img tags

 

and on containing element for svg objects/code i.e.(div.svg-container > svg)

 

  .svg-container {
    width: 100%;
    height: 0;
    padding-top: 100%;
    position: relative;
}

.svg-container svg {
    position: absolute;
    top: 0;
    left: 0;

}

 

 

 

[Visual-Q]

I found another good post that contains voluminous information about placing and sizing svgs. Worth bookmarking.

 

https://css-tricks.com/scale-svg/