Home/ Questions/Q 8000311
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T15:45:13+00:00

(This question is a follow up from Safari Scrollbars & SVG – the workaround

  • 0

(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???????

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0