Alexander Shmatko Alexander Shmatko - 6 months ago 11
HTML Question

How to correct svg displaying on mobile?

I have an svg picture that is displayed two different ways on mobile devices.

On most mobile phones it looks the proper way:

enter image description here

But the other part of phones display the svg like this:

Galaxy Note S3

enter image description here

How can I fix that?

JSFiddle

HTML

<div class="auth-logo">
<img src="http://imgh.us/rectangle.svg" width="150">
</div>

<div style="text-align: center">Some text beneath</div>


CSS

.auth-logo {
width: 150px;
margin: auto auto;
margin-top: 50px;
}

Answer

You can save your SVG in a file and use it as a resource, via <img> or <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 <embed>.

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.