internet explorer 11 ie11 edge svg problem: auto replace all svgs to png convert svg to png #js

.htaccess

# automatically redirect ie11/edge users to png fallback if exists
RewriteCond %{HTTP_USER_AGENT} Trident|MSIE|Edge [NC]
RewriteCond %{REQUEST_URI} \.(svg)$ [NC]
RewriteCond %{REQUEST_FILENAME}.png -f
RewriteRule ^ %{REQUEST_URI}.png [QSA,L]

bash.sh

// recursively convert svgs to pngs

// with svgexport (best results)
find . -name '*.svg' -type f -exec svgexport {} "{}".png 300: \;

// with rsvg
find . -name '*.svg' -type f -exec rsvg-convert --width 300 --height 300 --keep-aspect-ratio --output "{}".png {} \;

// with inkscape
find . -name '*.svg' -type f -exec inkscape -z -e "{}".png -w 300 -h 300 {} \;

// with imagemagick
find . -name '*.svg' -type f -exec convert -background none -density 2400 -size 300x300 {} "{}".png \;

script.js

// variant 1 (does not work on pseudo elements and does not check if file exists)
document.addEventListener('DOMContentLoaded', () =>
{  
        if( navigator.userAgent.indexOf('MSIE') !== -1 || navigator.appVersion.indexOf('Trident/') > 0)
        {
            [].forEach.call(document.body.querySelectorAll('*'), (el) =>
            {
                if( el.tagName === 'IMG' && el.hasAttribute('src') && el.getAttribute('src').indexOf('.svg') > -1 )
                {
                    el.setAttribute('src', el.getAttribute('src').replace('.svg','.svg.png'));
                }
                else if( window.getComputedStyle(el).backgroundImage != '' && window.getComputedStyle(el).backgroundImage.indexOf('.svg') > -1 )
                {
                    let prop = window.getComputedStyle(el).backgroundImage;
                    if( prop.indexOf('.svg")') > -1 ) { prop = prop.replace('.svg")','.svg.png")'); }
                    if( prop.indexOf('.svg\')') > -1 ) { prop = prop.replace('.svg\')','.svg.png\')'); }
                    if( prop.indexOf('.svg)') > -1 ) { prop = prop.replace('.svg)','.svg.png)'); }
                    el.style.backgroundImage = prop;
                }
            });
        }
});