CODEWITHSUNDEEP
htmliossvguiwebview
Liu Yale
Liu Yale

Reputation: 51

ios8 UIWebview svg embaded html not show

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

Upvotes: 5

Views: 2838

Answers (4)

tarun2000
tarun2000

Reputation: 109

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.

Upvotes: 3

Andreas
Andreas

Reputation: 502

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

Upvotes: 0

Moustachiste
Moustachiste

Reputation: 510

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';

Upvotes: 0

jbejean
jbejean

Reputation: 51

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

Upvotes: 5

Related Questions