CODEWITHSUNDEEP
javascriptiossvg
Cosmin Stamate
Cosmin Stamate

Reputation: 145

iOS not displaying SVG in <img> tag

I have a simple <img> tag with a SVG source which is not displayed at all on Chrome and Safari on iOS (iPad 3, iOS 7.1).

Here is a jsfiddle with it.

The SVG is also displayed incorrectly on Safari on Windows 8.1 (it is squashed on the x-axis).

I have exported this SVG from Illustrator and it was created entirely in Illustrator. I suspect there is something wrong with the SVG itself and these browsers cannot interpret that correctly, but I have no idea what it might be.

I have searched for previous cases, but usually people have problems with inline SVGs or object SVGs and none of the solutions I found apply to my case.

EDIT: Upon further investigation, I have found out that there is indeed an issue with my SVG image. This blog post has a working <img> with SVG source, so there's proof that it works.

Also, using an <object> is not acceptable, because I also need to use this image as a background-image, which is also officially supported on iOS (and present in the blog post as well), but does not work with my image.

So my question becomes: are there pitfalls in creating a SVG image which can cause it to not display on certain browsers?

Upvotes: 4

Views: 13071

Answers (3)

kenecaswell
kenecaswell

Reputation: 7598

I had this issue. My svg was not appearing on iOS 7.x, but was working on iOS 8.x. The problem was with my svg file. When viewing the svg file in a text editor, it didn't have a width and height defined in the svg tag.

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
<g>
    ...
</g>
</svg>

After adding width and height attributes I was able to see my svg in my img tag.

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="40px" height="40px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">

...

Upvotes: 9

ares777
ares777

Reputation: 3628

Try to embed your svg as object . Also read this http://benfrain.com/attempting-to-fix-responsive-svgs-in-desktop-safari

Tested html bellow (no .js needed): 

<html>
<head>
<style>
object {
width: 100%;
display: block;
height: auto;
position: relative;
padding-top: 0;
} 
svg {
width: 100%;
height: 100%;
/* position: absolute;
top: 0;
left: 0;*/
} 
</style>
</head>
<body>
<object data="http://monovertex.com/static/Logo.svg" type="image/svg+xml">
<img src="http://monovertex.com/static/Logo.svg"  width="200" height="200"/>
</object>

 </body></html>

Upvotes: 2

Liviu R
Liviu R

Reputation: 689

If your doing the SVG usage due to the lack of support of SVG natively - I would consider instead using SVGKit - https://github.com/SVGKit/SVGKit

I used it for a few demos I did on the fly and it worked great.

Upvotes: -2

Related Questions