Issue
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)
Solution
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"
Answered By - Martijn
Answer Checked By - Clifford M. (JavaFixing Volunteer)