PROBLEM: Safari is not playing ball and is rendering my SVG images with a scroll bar.
Improved version of Question: "How do I get an to fill a set width and have the height calculated based on the aspect ratio in Safari?" (thanks Phrogz)
Relevant code:
SVG File
viewBox="0 0 800 800"
(no height or width specified)
.objectwrapper {
max-width: 600px;
min-width: 150px;
margin-right: auto;
margin-left: auto;
}
.objectdiv {
max-width: 60%;
margin-right: auto;
margin-left: auto;
display: block;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5" />
<meta http-equiv="expires" content="0" />
</head>
<body>
<div class="objectwrapper">
<div class="objectdiv">
<object type="image/svg+xml" data="question0optimize1.svg" width="100%" height="100%">
</object>
</div>
</div>
</body>
</html>
In all the other browsers I've tried I get a nice smooth scaling with window size changes and ctrl + zooming. But Safari offers me a smaller svg and scroll bars. What am I doing wrong?
You are getting a scrollbar in Safari because:
height="100%" on the object is making it as tall as the body, and- Because the
<object> defaults to display:inline you get an additional baseline (4px-6px) below the object. 100% + anything is taller than the window, and thus a scrollbar shows.
If you can be clear about what you want the final presentation to be—specifically, what should the height be for your <object>—I can help you make it work cross-browser.
Most likely you want to a) set display:block on the <object> via CSS, and/or b) remove the height="100%" from the <object>. (If you want cross-browser height control, set the height via CSS, not presentational attributes.)
You can see an annotated example of my failing test at
http://phrogz.net/svg/svg_via_object.html
and the fixed version at
http://phrogz.net/svg/svg_via_object.xhtml
(The use of HTML4 versus XHTML is unrelated to the problem or fix.)
I had a similar problem with an SVG under Safari5 on Windows. It showed scrollbars for no obvious reasons.
Found a solution for me here: https://stackoverflow.com/a/8025526/2244646 :
I had to open the SVG in a texteditor and rounded the height-attribute of the svg-node from 79.999px to 80px. Somehow Safari5 doesnt like odd numbers in these fields.
I had the same issue with SVG using Safari on Windows. The SVG had vertical and horizontal scrollbars.
However, I opened the SVG files in a text editor and I had odd height and width attributes. I changed them to even numbers and it solved the problem.
