SVG canvas too big, android default browser only

Question

I've made a mobile website, which has a SVG file which acts as a fancy HR. We choose svg because it scales good.

It works as expected in all (mobile)browsers, apart from Android's Stock browser, which produces the screenshot (all other browsers only show the green part of the screenshot, which is good).

• The designer saved this image with a full green background (select all, make green)
• I've css-ed it something like this: #wrap > img{ background: red; }

In the Android browser the SVG is 100% screen height:
If it helps, this is the content of the svg.

I have no clue what to look for. The SVG seems fine, other svg's always load as expected, what makes this one different?

"What have you tried?" Not much since I don't have a clue where I start.
- The svg has been resaved (No effect)
- css #wrap > img{ height: auto;} (no effect)
- css #wrap > img{ max-height: 60px;} (makes the #Wrap 60 height, the SVG pushed together)
- Took it through a 'svg optimiser' (no changes)

Answer 1

After some time, the solution:

If you open the SVG in a text editor, the first part will have something like:

viewBox="0 0 190 70"

If you add width="190 and height="70" after it, the problem will disappear. This will create some small difficulties when you want to resize, but the major problem is solved:

viewBox="0 0 190 70" width="190" height="70"

Answer 2

For me, the solution to SVG bounding box issues has been to edit the first section to have width="100%" height="100%" instead of specified values.