css - How to use an SVG logo in a web application? -

css - How to use an SVG logo in a web application? -

my web application required back upwards modern browsers (ie starting @ 10). has responsive, should on possible display sizes , resolutions.

it has standard logo in upper left corner, linked start page. want utilize svg logo, should @ resolution. @ first, had logo in normal <img> tag, height , 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 , clips logo instead of stretching given size. looked around , found this suggestion placing svg image in page. have

<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 image in both ie , firefox (haven't tried other browsers yet), link works in ie. neither in ie nor in firefox cursor alter clicking hand, , ff adblockplus shows "block" suggestion on hover, perchance because object tag.

is there way display svg image correctly everywhere, while preserving link function? i'm not limited css, can radical changes markup, if needed, , can alter svg source.

i played initial code bit , got working... seems need set width percentage , scale height appropriately.

#logo { width: 25%; }

try changing percentage , adjusting result window size in jsfiddle demo tested in ie10 (+ ie9 in emulator) , chrome , worked expected.

css svg responsive-design cross-browser