Geek Answers Handbook

SVG does not use safari

Safari seems to be having trouble displaying my SVG, while other browsers are doing it right. Any idea what is wrong?

Here is the url:

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

I have seen many examples using iFrame, I do not know if this is related to the problem.

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

enter image description here

Update 2: for proper drawing in all browsers, use the xhtml insted html extension, for example: index.html

Newbie mistake :)

+4
source share
2 answers

You have an XHTML page that will be used as text/html . Change the 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 interprets 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.

Change In addition, you have broken XHTML; tag <link> no self-closing marker; see verification 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>

Follow the correct "http:" at the beginning of this URI and you will find your page working (if you fix the other two problems).

+6
source

What relies on innerHTML (via the jQuery html function ) to parse html5 correctly, which probably does not apply to the version of Safari you are using.

If you used the DOM Core instead to create an element, it will work fine or alternatively use the DOM Parser API to parse svg fragments. See this example .

+2
source

More articles:


All Articles