How do I use Svgeezy? (SVG fallback)

Question

I'm trying to switch out the SVG images I am using to PNG on browsers that don't support them - namely IE8/7 and old versions of Android.

After a lot of looking, I think I've found the tool for the job - svgeezy - The issue is, I have no idea how to use it! (I don't understand the tiny documentation given)

I'd really appreciate it if someone could explain it to like I'm two, I ahve no idea where to begin (I'm new at this) :)

p.s - I know there are other ways of doing it, but I was having all kinds of trouble with using the SVGs as a background, I want to avoid that way of doing it.

Thanks :)

Answer 1

Svgeezy's API is not all that intuitive or powerful, but it's simple. The first parameter is the class name you want to avoid replacing (if any) and the second is the type of fallback. This works at the document level, so you can't replace some SVGs with JPG and others with PNG.

// will replace all SVGs with PNGs
svgeezy.init('nothing', 'png');

// will replace all SVGs with JPGs except those that have class="noreplace"
svgeezy.init('noreplace', 'jpg');

Your fallback should have the same file name as the original SVG. So, for example, if you want to replace logo.svg, then logo.png should be in the same directory.

To load the javascript put this just before the closing </body> tag:

<script type="text/javascript">
    svgeezy.init('whatever', 'png');
</script>