CODEWITHSUNDEEP
iphonesvgmobile-safari
Nathan Wheeler
Nathan Wheeler

Reputation: 5932

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>

Upvotes: 39

Views: 73621

Answers (7)

Mohammad Faizan
Mohammad Faizan

Reputation: 5

have you tried to embed it inside an <object> 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!

Upvotes: 0

Wayne Smith
Wayne Smith

Reputation: 4868

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>

Upvotes: 46

Steffan
Steffan

Reputation: 733

I also had a problem displaying large SVGS (dimensions) in IOS browsers. By scaling it down I did get it to work.

I think around 1000px and down will do it.. A friend of mine told me it perhaps had something to with Integer Limits for IOS.

http://msdn.microsoft.com/en-us/library/7fh3a000.aspx

Upvotes: 2

Andrew Swift
Andrew Swift

Reputation: 2237

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.

Upvotes: 0

Aaron Krauss
Aaron Krauss

Reputation: 7612

Figured I would tack this on here, though it's mostly just related to the title.

I had my SVG tag rendering everything properly in every browser (even IE9+), except for iOS. I had the css height of the svg set to 100%, which worked everywhere, but on iOS it appeared to be 100% of the height of the entire page, instead of just its parent element! This was causing my inner SVG elements to render outside of their viewport.

Adding a position: absolute to the svg tag fixed my issue and it rendered properly on iOS and everywhere else (the parent element was already positioned, so this didn't change the actual position of the svg). Other position styles may also work.

Upvotes: 14

asgeo1
asgeo1

Reputation: 9078

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.

Upvotes: 5

ddkilzer
ddkilzer

Reputation: 179

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.

Upvotes: 1

Related Questions