4

Seems Safari is having some problems rendering my SVG, while other browsers does it correctly. Any idea on what is wrong?

Here is the URL:

http://bcndevcon.org/dev/infographic/

I've seen a lot of examples using iFrame, I don't know if it has something to do with the problem.

Update: Seems server is sending the wrong content type, Content-Type: text/html

enter image description here

Update 2: In order to draw it correctly on all browsers use xhtml insted of html extension, for example: index.html

Newbie error :)

Mc-
  • 3,968
  • 10
  • 38
  • 61

2 Answers2

6

You have an XHTML page being served as text/html. Change your server to serve your page as application/xhtml+xml, or include the following as the first element in the <head>:

<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />

If Safari is interpreting your XHTML page as HTML, it will not interpret SVG elements as anything other than custom markup.

For reference, here is an example of SVG in XHTML that works in Safari, including using JavaScript to create SVG elements.

Edit: Additionally, you have broken XHTML; your <link> tag is missing a self-closing marker; see the validation results.

The real problem, however, is that you have a broken URI for your <script> element when referencing jQuery:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

Throw a proper "http:" at the front of that URI and you will find your page working (if you fix the other two problems).

Phrogz
  • 296,393
  • 112
  • 651
  • 745
  • 1
    @Xavi See the edit. I have verified that with these fixes it works on Safari locally. – Phrogz Jun 20 '11 at 12:58
  • That isn't a broken URI in the script element. It's a perfectly valid "protocol-less" URL: http://stackoverflow.com/questions/4831741/can-i-change-all-my-http-links-to-just – RoToRa Jun 20 '11 at 14:26
  • I validated the whole document, still not working on Safari Version 5.0.5 (6533.21.1) and IE 8.0 – Mc- Jun 21 '11 at 00:15
  • @Xavi You have `` in your head. You need an XHTML mime type, not an HTML mime type. Look again at the meta tag I supplied above. – Phrogz Jun 21 '11 at 12:55
  • @RoToRa Interesting, thanks for that. It is 'broken' when I'm testing locally via `file:` and the browser needs to fetch via `http:`, but of course that wouldn't be an issue for live deployment. – Phrogz Jun 21 '11 at 12:57
  • Sorry @Phrogz, I corrected that now and that's really weird, is not working yet, anyone else can see it in Safari OSX? – Mc- Jun 21 '11 at 19:46
  • 2
    @Xavi Interesting. It does not work for me when I view it on your site, but if I save the XHTML file (and the CSS and JS files) locally, it loads fine for me in Safari over `file://`. My assumption then is that this is because your web server is still sending `Content-Type: text/html`. – Phrogz Jun 21 '11 at 23:36
  • @Phrogz, You are right. I checked it out with Charles Proxy and the content Type sent by the server is: Content-Type text/html – Mc- Jun 22 '11 at 00:02
  • 2
    @Xavi Here is the final proof: http://phrogz.net/tmp/xavi_infographic.xhtml That file is sent with the proper mime type by the server and loads for me in Safari. Fix your server, and your problem will go away. – Phrogz Jun 23 '11 at 13:35
  • Holly **** :) Thanks @Phrogz, you really gave me the solution. I just had to change the index.html to index.xhtml. I'm sorry, I'm newbie on SVG – Mc- Jun 23 '11 at 14:14
  • Now I just need to find the way to animate it. XD – Mc- Jun 23 '11 at 14:16
2

That's relying on innerHTML (via the jQuery html function) to parse html5 correctly, which probably isn't the case for the version of Safari you're using.

If you instead used DOM Core for creating the element's it would work just fine, or alternativly to use the DOM Parser API for parsing the svg fragments. See this example.

Erik Dahlström
  • 59,452
  • 12
  • 120
  • 139