I have an svg picture that is displayed two different ways on mobile devices.
On most mobile phones it looks the proper way:
But the other part of phones display the svg like this:
Galaxy Note S3
How can I fix that?
<img src="http://imgh.us/rectangle.svg" width="150">
<div style="text-align: center">Some text beneath</div>
margin: auto auto;
You can save your SVG in a file and use it as a resource, via
<embed>. I've used both and it scales nicely.
<img> stops you from accessing the SVG, so if you need access to the SVG then I would recommend using
I had the same problem, In my case I did:
<embed id="gaugeSpeed" class="gaugeImage" width="200" height="200" type="image/svg+xml" src="assets/gauges/speed.svg">
and it scaled it nicely. Same for when I use SVG with the tag. I've tested on Transformer Prime and Nexus 7 running both ICS and Jellybean, works fine.