CODEWITHSUNDEEP
csshtmlsvg
Poiple Shadow
Poiple Shadow

Reputation: 195

SVG Links and PNG fallback without Javascript

I have a good selection of SVG graphics on my site here

http://www.poipleshadow.com

They look crisp and I would love to continue using them, although I have a problem when i combine them with fallback for IE when they have links.

For example this is fine

<a href="index.htm">
<img src="Images/Poiple-Shadow.svg" width="32" height="32" alt="Poiple Shadow Charity Website" class="logo200">
</a>

But when I add the svg as an object and include a line for PNG support the link does not work anymore. 

<a href="Goa-India-Map.htm" title="Goa Tourist Map">
<object type="image/svg+xml" data="Images/Buy-Items-To-Donate.svg" class="myimgleft">
<img src="Images/Buy-Items-To-Donate.png" width="200" height="156" alt="Give to charity - Donate to Street Children Charity"  class="myimgleft">
</object>
</a>

I have searched and found that I could include the link in the SVG itself, although this means that the SVG would only link to a single address. Not ideal. Anyone know of a clean, basic, solution as I like to keep my site as basic as possible where ever I can just using HTML5 and CSS.

Upvotes: 2

Views: 1268

Answers (1)

Benjamin
Benjamin

Reputation: 1070

This is hacky, but I've used a trick from CSS Tricks in the past.

Unfortunately there's not a convenient anchor on that page to link to, but it looks like this:

.my-element {
  background-image: url(fallback.png);
  background-image: url(image.svg), none;
}

Apparently support of multiple backgrounds and SVG mostly overlap, so anything that doesn't support svg will use the top background-image while anything that does support svg will use the bottom. Clever, but like I said, hacky, and the best trick I know that doesn't use Modernizr.

CSS Tricks reports that "this works well in IE 6-8, but sadly not in Android 2.3 which supports multiple backgrounds but not SVG," so caveat emptor.

In reply to your comment below:

Your SVG looks like this right now:

<a href="index.htm">
  <img src="Images/Poiple-Shadow.svg" width="32" height="32" alt="Poiple Shadow Charity Website" class="logo200">
</a>

In your stylesheet, you can add to class .logo200:

.logo200 {
  background-image: url(Images/Poiple-Shadow.png); // make a png or jpg version of the image
  background-image: url(Images/Poiple-Shadow.svg), none;
  width: 32px;                                     //give it width and height
  height: 32px; 
}

Now, instead of using an <img> tag, use a div:

<a href="index.htm">
  <div class="logo200"></div>
</a>

The browser should show the SVG if it supports multiple backgrounds (and therefore svgs). If the browser does not support SVG, it likely doesn't support multiple backgrounds, so it will only show the first background-image property.

Upvotes: 1

Related Questions