Wrights HQ

A blog by Ian Wright - Front-end web developer

I tend to do the following method when using both SVG & PNG graphics in html code.

<object type="image/svg+xml" data="image.svg">
  <img src="image.png" alt="image"/>
</object>

Recently though I ran into a problem where the page was loading & I could see double graphics. First the SVG overlapped the PNG & then once the page had fully loaded the PNG was still slightly visible for modern browsers. I thought the reason for this was actually due to some CSS positioning I use to allow for the SVG to have an anchor.

<a href="#" title="Home" class="svg">
  <object data="image.svg" width="230px" height="62px" type="image/svg+xml" class="img-resp">
    <img src="image.png" width="230" height="62" class="img-resp">
  </object>
</a>

CSS code for SVG positioning & anchors

a.svg {
  position: relative;
  display: inline-block;
}

After experimenting a little more it turns out it’s actually due to modern browsers render both elements.

How to fix / improve SVG & PNG graphics

I believe the following method works the best across all browser version & still allows for the anchor tag without needing to add any absolute positioning. If you ever find yourself in a similar position have a play with both and see which works for you.

<!--[if lte IE 8]><img src="logo.png" /><![endif]-->
<!--[if gt IE 8]><img src="logo.svg" /><![endif]-->
<!--[if !IE]><!--><img src="logo.svg" /><!--<![endif]-->

Alternative Methods

There are other methods available for SVG with PNG fallback but the two above produce the best results at present for the browsers I work in without the need for external libraries or JS.