SVG With Object Tag Doesn't Scale In Safari

Question

I have two svg images on my home page that are inside object tags. They scale beautifully when the browser is resized in Chrome and Firefox, but in Safari they won't scale, they just get get off. I have tried making adjustments to the width and height of the svg image itself but that just causes the svg to become too large on tablet size screens. I've searched and searched for a solution, but have yet to find one. While I wish there was a way to just target Safari since it works great in both Chrome and Firefox, if anyone can offer some help with this I would greatly appreciate it.

My html code for one of the svg images:

    <a href="about.html">
            <div class="svg-container">
                <object class="img-responsive" type="image/svg+xml" 
                data="images/portrait-md.svg" >
               <img src="images/portrait-md.png" />
                </object>
           </div>
        </a>

The css I have used for the div container class:

    .svg-container {
        display: inline-block;
        overflow: hidden;
        position: relative;
        vertical-align: middle;
    }

    .svg-container object {
        pointer-events: none;
    }

    .img-responsive {
        display: block;
        height: auto;
        width: 100%;
        position: relative;
     }

My site: http://rachelhkay.com

Answer 1

You can make the width and height of the svg 100% in css.

svg {
height: 100%;
width: 100%;
}

For more information. Visit this link below, and see if that helps.

http://benfrain.com/attempting-to-fix-responsive-svgs-in-desktop-safari/