Mobile Safari SVG Problem

I'm trying to get an SVG image to show up on my iPhone (or iPad) default browser, but I can't seem to get even just a rect to show up.

Example at: http://www.invalidpage.com/svg/svgtest.html

Source:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/html1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
  <head>
    <title>SVG iPhone Test</title>
  </head>
  <body>
    <div>
      <svg width="500" height="220">
        <rect x="2" y="2" width="496" height="216" stroke="#000" stroke-width="2px" fill="transparent"></rect>
      </svg>
    </div>
  </body>
</html>

标签： iphone svg mobile-safari

8条回答

聊天终结者

2楼-- · 2019-01-21 11:16

Add xmlns="http://www.w3.org/2000/svg" version="1.1" to your svg tag.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/html1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
  <head>
    <title>SVG iPhone Test</title>
  </head>
<body >
      <svg width="500" height="220" xmlns="http://www.w3.org/2000/svg" version="1.1">
        <rect x="2" y="2" width="496" height="216" stroke="#000" stroke-width="2px" fill="transparent"></rect>
      </svg>


</body>
</html>

The HTTP MIME type being delivered by http://www.invalidpage.com/svg/svgtest.html is "Content-Type: text/html". HTML inline svg works with the MIME type "Content-Type: text/xml" You can create this by ending the document with XML instead of HTML as they have done here.

Not sure if Ipad cares about the Content-Type but other browsers do.

Updated

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

Can also be used; It is what is being shown on the Ipad svg examples. When the document is delivering as an XML not HTML, it should start with <xml version="1.0" standalone="no">;

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">


      <svg width="500" height="220" xmlns="http://www.w3.org/2000/svg" version="1.1">
        <rect x="2" y="2" width="496" height="216" stroke="#000" stroke-width="2px" fill="transparent"></rect>
      </svg>

0人赞添加讨论(0) 举报

何必那么认真

3楼-- · 2019-01-21 11:20

have you tried to embed it inside an tag.

<object type="image/svg+xml" item-prop="image" id="[give any id]" data=" [mention your file name] "></object>

e.g

<object type="image/svg+xml" item-prop="image" id="svgImage" data="images/svgImage.svg"></object>

I think this should do the trick!

0人赞添加讨论(0) 举报

傲

4楼-- · 2019-01-21 11:23

I have had this problem before too with mobile Safari. What you can do is load the SVG into the the DOM via javascript:

$(document).ready(function(){
    var svg = '<svg width="500" height="220" xmlns="http://www.w3.org/2000/svg" version="1.1"><rect x="2" y="2" width="496" height="216" stroke="#000" stroke-width="2px" fill="transparent"></rect></svg>';
    var chart = document.adoptNode($('svg', $.parseXML(svg)).get(0));

    $('body').html(chart);
);

That's just an example - obviously you're not going to store your SVG in a string like that in practice.

You could retrieve the SVG string from the server via ajax, and then load into the DOM using the above approach if you wanted.

0人赞添加讨论(0) 举报

甜甜的少女心

5楼-- · 2019-01-21 11:24

Even with all the other advice on this page I couldn't get it to work (even in Safari).

So I found a working example at:

http://upload.wikimedia.org/wikipedia/en/3/35/Starbucks_Coffee_Logo.svg

and copied the file to my own site. Still no luck, so I had a look at that file and my own using Rex Swain's HTTP viewer:

http://www.rexswain.com/httpview.html

The difference became obvious. My svg was being served as text/html, and the Starbucks logo was being served as image/svg+xml.

The solution was to change the header by adding:

addtype image/svg+xml .svg

to the .htaccess file.

0人赞添加讨论(0) 举报

趁早两清

6楼-- · 2019-01-21 11:28

Mixing SVG tags with HTML tags without using a well-formed XHTML document and namespaces (see Wayne's answer) is not supported in Safari for iOS 4.2.1 and earlier, nor is it supported in Safari 5.0.x and earlier on Mac OS X and Windows.

Including SVG tags within an HTML document is a new feature of HTML5 parsers. If you download and run a nightly build of WebKit for Mac OS X or Windows, you'll see that your test case works as expected.

0人赞添加讨论(0) 举报