SVG completely unresponsive in Safari

Question

(This question is a follow up from Safari Scrollbars & SVG - the workaround suggested was to use javascript, but Safari is not responding even to javascript. Or even straight css.)

I am unable to get a fully sized svg from Safari. It refuses to enlarge at all. I want the min-width to follow the jquery window width but it ignores the javascript (other browsers seem fine) and then even if I change the css directly it ignores even "width: 700px;"

SVG File

  viewBox="0 0 800 800"

(no height or width specified)

HTML

<!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="text/html; charset=utf-8" />

 <style type="text/css">
   .objectwrapper{
    max-width: 80%;
    margin-right:auto;
    margin-left:auto;
  }
 .objectdiv{
    max-width: 100%;
    margin-right:auto;
    margin-left:auto;
    display:block;
  }
 .svg{
    width:100%;
    display:block;
  }
 </style>
 <script type="text/javascript"      
  src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
 <script  type="text/javascript">

  var sixtypercentInnerWidth = .6*$(window).width();


  $("document").ready(function(){
      $(".objectwrapper").css("max-width",sixtypercentInnerWidth);
  });
  </script>
</head>
<body>
 <div class="objectwrapper">
 <div class="objectdiv">
         Object4
        <object class="svg" type="image/svg+xml"       data="question0optimize1.svg" >      
         </object>   

 </div>
 </div>

 </body>
 </html>

EDIT

I've just found that editing the .svg is getting some response...

   $("document").ready(function(){
        $(".svg").css("width",sixtypercentInnerWidth);
        $(".svg").css("height",sixtypercentInnerWidth);
    });

I needed to add HEIGHT as well as WIDTH.. so it seems SAFARI can't do svg %'s???????

Why was this downvoted? Safari doesn't allow css to control svg image size and does not render unless height and width are specified — EnglishAdam, Apr 13 '12 at 21:34

score 1 · Accepted Answer · answered May 25 '12 at 02:12

1

Safari is absolutely capable of sizing SVG elements using CSS. I do it every day :)

The reason that your

.svg{
width:100%;
display:block;

}

isn't applying is because your objectwrapper and objectdiv elements don't have an explicit width in CSS. A max-width is not enough. Give those parent elements an explicit 100% width and that should solve things. No need to go round the bend with JS on this one.

A few related points:

a) Jquery selectors and functions generally don't play well together with SVG. I've used the jquery animate method on a path attribute, but that's about it. Everything else fails. You will need to write vanilla js to do much of anything with SVG.

b) Troubleshooting SVG is way easier in Chrome. Dev Tools still has some weird bugs with SVG that are being worked out, but generally if it works in Chrome it works in Safari.

answered May 25 '12 at 02:12

Ben

11,082
8
33
47

Cheers! Yes with this Safari is indeed 'reponsive' and that's much better than before... but it is still wanting'n'needing height. Play around with changing the window and watch the smoothness of the other browsers but you can see that safari has created a box around the svg (which also minimises the width onload if your proportions are different than their default WxH). But yes this is how you get more responsive safari. +1 accepted & upgrade the question please too, or tell me why it's been downgraded! – EnglishAdam May 25 '12 at 21:24
It's hard to say without seeing a linked example, but again, you will need to declare explicit percentage heights on all your containing elements for height to cascade correctly. Also, understand that the svg VIEWBOX gets drawn inside its containing element according to how you have specified the preserveAspectRatio attribute:What you are currently seeing is the default "meet" value – Ben May 29 '12 at 18:00
It's hard to say without seeing a linked example, but again, you will need to declare explicit percentage heights on all your containing elements for height to cascade correctly. Also, understand that the svg VIEWBOX gets drawn inside the SVG element according to how you have specified the preserveAspectRatio attribute. The behavior you are currently seeing is the default "meet" value, which scales the viewbox as large as possible within the svg element without distortion and without cropping. If cropping is desirable, use "slice" instead of "meet". Google the W3 spec on this for the details. – Ben May 29 '12 at 18:06

score 0 · Answer 2 · answered Apr 13 '12 at 15:07

In my opinion safari is perfectly capable of doing svg, either on os x, windows or ios. I don't use but and I find JQuery sometimes not behaving intuitive with svg. On animation I do even some javascript backed animation, working in all browsers but MS IE.

SVG completely unresponsive in Safari

2 Answers2