CODEWITHSUNDEEP
csshtmlsvgsafari
barbarity
barbarity

Reputation: 2488

SVG background image is not showing as it should in Safari/Safari Mobile

I'm renewing a webpage of a book publisher who has their books online. They have it in jpg but I'm migrating it to SVG. I'm doing a test of the book viewer and the only way I found to contain the SVG image to the container size was to make it a background image. It works perfectly in Chrome, but I'm having problems with Safari for Desktop and Mobile also. Both of them shows up the SVG image but they miss an essential part of it.

I uploaded it for you to see what I'm talking about: http://www.edicionesbabilonia.com/svg.html

I attach the code I've been using:

<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN”
“http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”>
<html>
    <head>
        <style type="text/css">
            body, html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
            .divsvg {
                border: 1px solid #999;
                height: 100%;             /* collapse the container's height */
                width: 50%;    /* specify any width you want (a percentage value, basically) */
    /* apply a padding using the following formula */
    /* this formula makes sure the aspect ratio of the container equals that of the svg graphic */  /* create positioning context for svg */
                background-image: url(pv-58.svg);
                background-size: contain;
                background-repeat: no-repeat;
            }

            #left {
                float: left;
                background-position: right center;
            }

            #right {
                margin-left: 50%;
                background-position: left center;
            }
        </style>
    </head>
    <body>
        <div class="divsvg" id="left">
        </div>
        <div class="divsvg" id="right">
        </div>
    </body>
</html>

Upvotes: 0

Views: 1674

Answers (1)

barbarity
barbarity

Reputation: 2488

Apparently there is a bug on Webkit that needs to load it as an object. It is possible to load it as an object and hidden it...

I've got the answer from: SVG with embedded bitmap not showing bitmap when using <img> tag in webkit browser

Upvotes: 1

Related Questions