iOS not displaying SVG in <img> tag
Question
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?
3 answers
solution1
4 2015-05-05 18:14:43
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">
...
solution2
2 2014-03-23 16:30:06
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>
solution3
-2 2014-03-23 15:14:46
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.