"custom-location to PNG fallback" again

[ganlanyuan]

Hey, I have read #14, #19, #34, but still not clear what's going on with this feature?

Consider I have the same svg file, but different fallback png images based on background-color.

<svg><use xlink:href="path/to/svg#id" /></svg>

<!-- white background -->
<img src="black-img.png">

<!-- black background -->
<img src="white-img.png">

How can I approach this? Can you add support to custom-attribute like #19? Then we can change our fallback png very easily.

Also very interested in dynamic png fallback. An example usage is changing the fallback image on mouse over.

[timeiscoffee]

@ganlanyuan have you tried the following stated in the README?:

svg4everybody({
    fallback: function (src, svg, use) {
        // src: current xlink:href String 
        // svg: current SVG Element 
        // use: current USE Element 

        return 'fallback.png'; // ok, always return fallback.png
    }
});

if you put an attribute denoting background color on the svg element, you can programmatically switch the fallback image.

[ganlanyuan]

I'm using the fallback function. But still don't know how to switch. Can I do something like?

svg4everybody({
    fallback: function (src, svg, use) {
        // src: current xlink:href String 
        // svg: current SVG Element 
        // use: current USE Element 

        return use.getAttribute('data-fallback');
    }
});

[timeiscoffee]

@ganlanyuan fallback needs to return the path to the png image that you want the svg to fallback to. If 'data-fallback' contains that path, that should work. If not, let me know and I can try to debug.

[ganlanyuan]

Great! Thanks! That works!

How about dynamic png?

[timeiscoffee]

The PR you linked is dynamic SVG, not dynamic PNG, so it won't actually solve your problem (and TBH, I don't see the use case for this). Ofc, its up to the maintainers to decide whether to review & merge that PR or not :)

Glad you resolved your issue!

[ganlanyuan]

I see, thanks a lot for your help!

[nolybom]

@ganlanyuan could you please post your html/svg markup here? Great idea to make the fallback dynamic. Very nice.

Since i am using svg4everybody in combination with Vivus i am trying to incet the data attribute dynamically into the the markup. Here is my approach:

` var svglogo = new Vivus('svglogo', { file: 'logo.svg', type: 'delayed', duration: 200, },

function (addDataFallback) {
    addDataFallback.el.attr('data-fallback', 'logo.png');
}

); ` Any idea?

[ganlanyuan]

Hey, I was using it this way: Javascript

svg4everybody({
  polyfill: true,
  fallback: function (src, svg, use) {
    // src: current xlink:href String 
    // svg: current SVG Element 
    // use: current USE Element 

   var path = use.getAttribute('data-fallback');
   if (path) {
     return 'assets/svg/fallback/' + path + '.png';
   } else {
     return src.replace('sprites.svg#', 'fallback/') + '.png';
   }
  }
});

Markup

<!-- default fallback png -->
<svg role="img" title="right arrow" width="14" height="14"><use xlink:href="assets/svg/sprites.svg#rightangle90" /></svg>

<!-- special fallback png -->
<svg role="img" title="submit" width="48" height="48"><use xlink:href="assets/svg/sprites.svg#rightarrow-line" data-fallback="rightarrow-line-white" /></svg>

Svg is just a svg-sprites file, nothing special.

[moyarich]

how do I test that the fallback code? which browser do I need to load this code on to test it.