Question

Using a svg as a logo here (with a fallback to png when needed)

On the desktop all fine, and when i shrink the browser all fine.
But on an actual real ipad, my logo(svg) is pushing the navigation down…a lot.

There is obviously something wrong, but it cant work out what it is.
Have tried adding a max-height to it, but makes no difference.
Have tried adding a max-height to the surrounding div….no luck

…i could ignore the svg and just use the png, but would like to get it to work.

Can anyone help as to why this is happening ?

Answer 1

Ok i’ve sorted this out.

I was using modernizr and an img tag

if (Modernizr.inlinesvg) {
               //SVG.
        //    $('#logosvg').html('<img src="BLogo_Intra_RGB.svg" alt="alt" />');

        } else {
            //No SVG.
        //    $('#logosvg').html('<img src="logo.png" alt="alt" />');
}

whereas i’ve now change this to using an object tag

                <div id="logosvg" class="eleven columns" style="outline: 1px solid blue">
            <object data="Logo_Intra_RGB.svg" type="image/svg+xml" class="classsvg" alt="alt">
                <a href="Logo_Intra_RGB.svg">
                    <!--[if lte IE 8 ]-->
                    <img src="log.png" alt="alt">
                    <--![endif]-->
                </a>
            </object>
            </div>

and this seems to be working fine
I’ve got a css width 100% on the classsvg

mind you i can see why svg are not more widely used 🙂