0

In all other browsers I get the SVG to appear as 80% of page width. However in Safari i get a reduced size svg within a much larger scrollable (horiz & vertical) area.

I've been reading around and I think the problem is that safari needs .xhtml (it doesn't parse svg in .html), this however as you can see is .php so I've changed the header/content-type... but still nothing. Any ideas?

 <?php header('Content-Type: application/xhtml+xml; charset=utf-8'); ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">     
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
<style> 
#svgobject{width: 80%;margin-right:auto;margin-left:auto;}
</style>   
  </head>
 <body>
<object type="image/svg+xml" id="svgobject" data="question0final.svg" >  
 </object>
</body>
</html>
2
  • What does the code for question0final.svg look like?
    – robertc
    Commented Mar 16, 2012 at 0:51
  • You don't need to use xhtml here in any case since the svg elements are not inline in the document you posted. Commented Mar 16, 2012 at 7:30

2 Answers 2

1

I removed this and it fixed my safari rendering problems

<svg version="1.1" id="Background_1_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="350.08px" height="290.066px" viewBox="0 0 350.08 290.066" enable-background="new 0 0 350.08 290.066" xml:space="preserve">

0

It turns out the real problem with my SVG images was that when converting them with illustrator there were grouped elements and embedded bitmaps in my image file and Safari does not like this at all. I would be seeing all elements that were not grouped or bitmaps in Safari leaving the image unfinished. Hope this helps some else experiencing this problem.

Not the answer you're looking for? Browse other questions tagged or ask your own question.