Home/ Questions/Q 6049247
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T07:33:15+00:00

Seems Safari is having some problems rendering my SVG, while other browsers does it

  • 0

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 🙂

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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).

    • 0