Menu
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
Update 2: In order to draw it correctly on all browsers use xhtml insted of html extension, for example: index.html
Newbie error :)
673
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).
158
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.
27
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
