SVG Fallbacks and Image Versioning

[aryazar86]

I’ve been building a site using SVG (which are AMAZING!) and trying to make it compatible with IE8 (significantly less amazing).

I followed along in the CSS-Tricks link for SVG Fallbacks, using both Modernizr and SVGeezy to try to get the compatibility to work. https://css-tricks.com/svg-fallbacks/

However, I am coming across a big problem with this tutorial: image versioning is not address. My site is running off of NationBuilder, a Rails app that dynamically builds my websites. It interfaces with Amazon’s AWS which uses buckets and versioning of images uploaded to keep track of where everything is and what version I am using. This means that in my code I write relative URLs like “image.svg”, which turn into “http://[omited].cloudfront.net/themes/52h2eea601925b4203000002/attachments/original/13906d1030/image.svg?1390621030” when my site loads

Using the fallback solutions outlined in the link above will not help, because all they do is replace the ‘svg’ in the above link with ‘png’, which is not where the png version of that image is … it has it’s own bucket and versioning that come with it.

I was wondering if anyone has come across this problem and if anyone has suggestions for overcoming it.

As it stands, I’ve had to go down this path with my code. I have HTML written for my images for both svgs and pngs, and the pngs only activate if IE8 is detected:

<img src="image.svg"><!--[if lt IE 9]><img src="image.png" style="display:none"/><![endif]-->    

Then, I use the following code that only activates in IE8, and basically hides the unsupported svg images and displays the png images that are right next to them.

<!--[if lt IE 9]>
<script type="text/javascript">
    $(window).load(function(){ 
      $("img").each(function() {
        if ((this.src.split('.').pop()).indexOf("svg") != -1) {
          $(this).css('display', 'none');
          var next = $(this).next()
          if(next.is("img")) {
            next.show();
          }
        }
      });
    });
  </script> 
<![endif]-->

This is a time-intensive process and I don’t like it.

Any ideas out there?

[dyr]

You said when you reference SVG’s you use a relative path such as image.svg and describe the path for PNG’s to differ somehow. Yet in your example here:

<img src="image.svg"><!--[if lt IE 9]><img src="image.png" style="display:none"/><![endif]-->    

You simply reference image.png. What is the actual way you need to reference the .PNGs?

[aryazar86]

Hi dyr,

The relative path for the png that you are referring to renders as the full URL when I load the site.

The code that I posted works, the problem is that it’s a really ‘hack-y’ and slow solution. I was wondering if there was anything better…

Thanks!

[dyr]

Forgive my ignorance, I’m not intimately familiar with the fallback technique outlined in Chris’ article.

Is there a reason why the following doesn’t work in your case?

<svg width="96" height="96">
  <image xlink:href="image.svg" src="image.png" width="96" height="96" />
</svg>

Shouldn’t both the paths image.svg and image.png then be expanded to their versioned URLs and the fallback .png displayed for browsers that don’t support SVG?

Are you able to post a CodePEN with a reduced case?

[Author]

Posts