CODEWITHSUNDEEP
safarisvgcontent-type
EnglishAdam
EnglishAdam

Reputation: 1390

SVG not rendering properly in SAFARI

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>

Upvotes: 0

Views: 1520

Answers (2)

EltonFlow
EltonFlow

Reputation: 111

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.

Upvotes: 0

EltonFlow
EltonFlow

Reputation: 111

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">

Upvotes: 1

Related Questions