5

I am recently working on a svg map app. everything is running fine on ios7. when i move my project to ios8. strange things happened, I found when UIWebview read local html file which has a svg file embedded, the svg file will not shown on ios8.

sample code is here:

@implementation ViewController

- (void)viewDidLoad {
[super viewDidLoad];
NSString *path = [[NSBundle mainBundle] pathForResource:@"test" ofType:@"html"];
NSURL *fileURL = [[NSURL alloc] initFileURLWithPath:path];
NSURLRequest *req = [NSURLRequest requestWithURL:fileURL];
[self.webView loadRequest:req];
}

- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
}
@end

and the html file used:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>SVG DEMO</title>
</head>
<body>
<div>
    <embed src="410.svg" width="64" height="64" type="image/svg+xml" />
    <object type="image/svg+xml" data="410.svg" width="64" height="64" border="1"></object>
</div>
</body>
</html>

Does anyone know what's going on?

Thanks

Liu Yale
  • 51
  • 1
  • 2

4 Answers4

5

I had the same problem with my application. And I found this solution:

<!DOCTYPE html>
<html>
    <head>
        <title>Informations</title>
    </head>
    <body>
        <center><img src="logo.svg" width="200" height="200" /></center>
    </body>
</html>

Works with iOS 7.0.3 and 8.0

jbejean
  • 51
  • 4
3

I noticed that SVGs that had an animate tag showed up fine, while those without did not show up. Adding a dummy animate tag to the svg is the workaround I'm using for the time being.

...
<animate attributeName="opacity" values="0.99;1.0" dur="0.01s" begin="0s" repeatCount="1"></animate>
</svg>

Update:

This issue is fixed in iOS 8.1.2 (possibly earlier), so this is no longer needed.

tarun2000
  • 89
  • 7
0

Using this solution How can I force WebKit to redraw/repaint to propagate style changes? solved it for me, without modifying the HTML structure through an image (I needed the svg to remain embeded).

So my final code is something of the like:

var emb = document.querySelector( '.myCSSClass');
svgItem = emb.getSVGDocument.getElementsByTagName('svg')[0]

svgItem.style.display='none';
var somethinguseless = svgItem.offsetHeight; // SHOULD not need to store this anywhere, the reference is enough. Without a ref, the closure compiler removes it
svgItem.style.display='block';
Community
  • 1
  • 1
Moustachiste
  • 412
  • 4
  • 14
0

just FYI: I've tested iOS 8.1 Update this morning an SVGs in embed tags are fixed...

Andreas
  • 492
  • 5
  • 16