Rendering SVG images everywhere with Modernizr, CanVG and ExCanvas

529 views Asked by At

The website I'm making (here) has all its images as SVG. But since SVGs aren't compatible everywhere (notably IE <9 and Android browser on versions 2.x), I needed to find a workaround. That couldn't be SVGweb, since that uses Flash, and Flash doesn't work on mobile devices.

So I thought I had found a working solution.

compatibility.js:

$(document).ready(function() {  
    yepnope({
        test: Modernizr.svg,
        nope: ['extensions/canvg/rgbcolor.js','extensions/canvg/canvg.js'],
        complete: function(url,result,key) {
            if(!Modernizr.svg) {
                yepnope({
                    test: Modernizr.canvas,
                    nope: 'extensions/excanvas.compiled.js',
                    complete: function() {
                        canvg();
                    }
                });
            }
        }
    });
});

But this seems to have no effect whatsoever, and since there are no errors and I can't find any logical errors, I'm stumped. Here is my tag, in case I messed up the load order of something.

<script type="text/javascript" src="extensions/less-1.3.3.min.js"></script>
<script type="text/javascript" src="extensions/jquery-1.9.1.min.js"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
    IE!!!!
    <script type="text/javascript" src="extensions/selectivizr-min.js"></script>
<![endif]-->
<script type="text/javascript" src="extensions/modernizr-2.6.2.min.js"></script>
<script type="text/javascript" src="compatibility.js"></script>
<script type="text/javascript" src="scripts.js"></script>
<title>Myriam coiffure et esthétique</title>

Also, this isn't the main question, but if you happen to figure out why Selectivizr isn't working, please do tell.

0

There are 0 answers