CODEWITHSUNDEEP
csssvgresponsive-designcross-browser
Rumi P.
Rumi P.

Reputation: 1737

How to use an SVG logo in a web application?

My web application is only required to support modern browsers (IE starting at 10). But it has to be fully responsive, so it should look good on all possible display sizes and resolutions.

It has the standard logo in the upper left corner, which is linked to the start page. I want to use an SVG logo, which should look good at any resolution. At first, I had the logo in a normal <img> tag, with height and width specified in css. 

<a href="@Url.Action("Index", "Home")" id="Home">
    <img id="logo" src="~/Content/images/mitoLogo.svg" />
</a>

    #logo {
    height: 3em;
    width: 9em;
    margin: 0.3em 1.5em 0.3em 0.2em;
}

Sadly, IE cannot work with that and clips the logo instead of stretching it to the given size. So I looked around and found this suggestion for placing an SVG image in a page. What I have now is 

<div id="logo">
    <a href="@Url.Action("Index", "Home")" id="Home">
        <object height="100%" width="100%"
                    data="~/Content/images/mitoLogo.svg" type="image/svg+xml">
        </object>
    </a>
</div>

This displays the image properly in both IE and Firefox (haven't tried other browsers yet), but the link only works in IE. Neither in IE nor in Firefox does the cursor change to a clicking hand, and FF with AdBlockPlus shows a "block" suggestion on hover, possibly because this is an object tag.

Is there a way to display the SVG image correctly everywhere, while preserving its link function? I'm not limited to css, but can do radical changes to the markup, if needed, and I can also change the SVG source.

Upvotes: 1

Views: 507

Answers (1)

JRulle
JRulle

Reputation: 7568

I played with your initial code a bit and got it working... it seems that you need to only set the width as a percentage and it will scale the height appropriately.

#logo {
    width: 25%;
}

Try changing the percentage and adjusting the result window size in the JSFiddle Demo I tested it in IE10 (+ IE9 in the emulator) and Chrome and it worked exactly as expected.

Upvotes: 1

Related Questions