16

I have noticed a strange thing on ios when using svg. The svgs seem to work fine in all other browsers, but on Safari ipad/iphone the viewbox has some weird space at the top and bottom of the svg. Has anyone else come across this and have you been able to fix it? Using some simple svg code such as:

<svg width="100%" viewBox="0 0 20 10">
    <polygon fill=red stroke-width=0 points="0,10 20,10 10,0" />
</svg>

On ipad/iphone if I put a border on the svg there strange space above and below the svg...??

fiddle goodness looks normal on desktop but if you look at it on an ipad etc you'll see the issues.

http://jsfiddle.net/InVAMPED/hck5gg1a/

Brian Webster
  • 30,033
  • 48
  • 152
  • 225
user2541153
  • 451
  • 2
  • 8
  • 16
  • If I add a height via CSS this pull everything back together but I need this to scale on the window width keeping the aspect ratio. From further reading this looks like a bug in webkit browsers a while back. I haven't updated my ipad in a while so I'm thinking this issue may have been resolved with a browser update?? – user2541153 Sep 29 '14 at 14:42

5 Answers5

19

The problem is that you are only setting width, not height of the SVG layout box. The viewBox is then being fit inside this layout box using the default xMidYMid meet setting, which scales it just to fit in the more constrained dimension and centers it in the other direction.

Firefox and the latest versions of Chrome (and I guess desktop Safari as well) will scale the SVG to match the viewBox aspect ratio when you leave one dimension as auto. However, other browsers will apply a default height/width, and then scale the image to fit:

  • IE applies the 150px height/300px width that is the default for embedded objects.
  • Safari mobile must be applying the old webkit default of 100vh (the height of the browser window).

It's not really a "bug" in the browsers, just a feature that was never clearly defined in the specifications.

Search for information about the "padding bottom aspect ratio hack" for a way of forcing the browser to respect an aspect ratio while still allowing the width to be responsive.

AmeliaBR
  • 27,344
  • 6
  • 86
  • 119
  • 3
    I added the attribute `preserveAspectRatio="none"` to my svg and set height and width to 100% - now it's all good. Might be worth a try. – RSeidelsohn May 19 '17 at 15:12
11

For me, setting the width and height to 100% to all svgs did the trick:

svg {
    width: 100%;
    height: 100%;
}

Feels a lot cleaner than the padding hack.

alexrogers
  • 1,514
  • 1
  • 16
  • 27
9

AmeliaBR is entirely right, a big thanks for leading me in the right direction!

Here's what google showed me: The padding-bottom hack

Because a percentage value for padding-bottom gets it's height from the width of the element and not the height itself we can leverage this to create responsive elements without a specified height.

On the SVG container:

.container {
    padding-bottom: 70%; /*this is your height/width ratio*/
    height: 0;
  }

On the SVG element itself:

.container svg {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}
undervers
  • 91
  • 1
  • 2
  • 2
    Great summary of the padding-bottom (or -top) hack. But doesn't .container need `position: relative`? – nydame Apr 09 '15 at 23:39
  • proper solution just 1 suggestion .container svg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 100%; width: 100%; } – AkshayBandivadekar Mar 10 '21 at 09:46
7

I use this media query for targeting ONLY safari browsers and works with svg height.

@supports (-webkit-backdrop-filter: blur(1px)) {
  svg {
    height: intrinsic;
  }
}
fruttino
  • 71
  • 1
  • 3
0

This worked for me: 

.mapContainer svg{
  max-height: 60vw; /* This will depend on the aspect ratio */
}

You need to set the max-height (in vw units) such that the svg is within bounds. Then it scales nicely everywhere. Note that the max-height will be different for different SVGs, depending on the aspect ratio.

Kirk Beard
  • 9,569
  • 12
  • 43
  • 47