Inconsistent SVG scaling in HTML between browsers

Question

I'm experimenting with using SVG in HTML, something I'm not too familiar with. It's embedded as an object in the html.

The SVG is scalable through CSS. When the window is at full size (i.e. large enough that the SVG is at its maximum allowed width through CSS) it looks normal in Firefox, Chrome, and Safari. When the browser window is small, the actual SVG image and what I assume is its container scales down appropriately in both Firefox and Chrome. However, in Safari (desktop and iOS) the SVG image itself scales down but its "container" stays at its original, maximum height. In other words there's too much space on the top and bottom of the actual image in narrow widths in Safari.

I currently have width, max-width, and max-height values assigned via CSS. Applying a height value other than "auto" gives me the problem across all browsers. I've removed the width and height values from the SVG itself to make it adjust to the browser size.

I want to know how to make Safari scale the SVG image in the same manner as Firefox and Chrome. Thanks for any input you can offer!

Please check out this example: http://jay-bee-why.com/demos/svg-scaling.html

And to see the actual site: http://twowordsfor.com (edit: now deprecated)

Here's how I've embedded the SVG in the HTML:

<div class="container">
       <object data="image.svg" type="image/svg+xml" id="logo">
             <img src="image.png">
       </object>
</div>

This is the CSS:

.container {width:99.8%;  -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; padding:30px;}

#logo {width:100%; max-width:974px; max-height:300px; display:block; margin:0px auto 0px auto;}

And this is the top of the SVG file:

<?xml version="1.0" encoding="utf-8"?>

<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="0 0 967 135" enable-background="new 0 0 967 135" xml:space="preserve">

http://stackoverflow.com/questions/16578484/how-can-i-display-an-svg-image-within-an-object-tag-at-a-different-scale — Cedric, Jun 20 '14 at 11:12

score 0 · Answer 1 · answered Sep 28 '17 at 07:16

Here is how this looks now:

.container {width:99.8%;  -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; padding:30px;}

#logo {width:100%; max-width:974px; max-height:300px; display:block; margin:0px auto 0px auto;}

<div class="container">
       <object data="https://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg" type="image/svg+xml" id="logo">
       </object>
</div>

Inconsistent SVG scaling in HTML between browsers

1 Answers1