13

I have a .svg logo on my website, http://www.dailydoog.com, and it renders correctly in every browser except for Internet Explorer. Even newer versions of IE (9+) that have built-in SVG support won't render the logo.

I'm using the following markup

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

but it doesn't seem to be having any impact. Am I just missing something really simple here?

patdugan
  • 787
  • 2
  • 7
  • 17
  • How do you render it? What content-type returned from server? – madhead Aug 27 '13 at 17:16
  • Is converting it to a PNG not a solution? It's pretty plain for an SVG... – Corey Ogburn Aug 27 '13 at 17:59
  • @madhead the svg was rendering correctly in IE, but I was applying a width without a height and therefor it wasn't showing up based on the CSS rules I had applied. – patdugan Aug 28 '13 at 17:17
  • @CoreyOgburn I wanted to use .svg because my site is responsive and I didn't want the extra overhead from a PNG. Honestly though either could have worked fine. – patdugan Aug 28 '13 at 17:18

1 Answers1

19

Navigating directly to the SVG in question works fine.

If you use the F12 Developer Tools to disable CSS on the page, the SVG image renders.

If you remove the width property from #logo-image img, it renders, or you can add a height:35px property instead and the SVG will render.

Perhaps related to this question? SVG in img element proportions not respected in ie9

Community
  • 1
  • 1
EricLaw
  • 56,563
  • 7
  • 151
  • 196
  • you're the man! Thanks so much for your help. I just left the svg at it's native resolution and now it's working correctly across all browsers. – patdugan Aug 28 '13 at 02:45