PoC for a SVG "polyfill"

nosvg.js

/*
<svg class="icon" data-png-fallback="assets/img/src/icons/black/png/icon-modx">
  <title>Best CMS Ever</title>
  <use xlink:href="assets/img/icons.svg#icon-modx"></use>
</svg>
*/

  var hasSVG = false; //your feature detection here
  (function(hasSVG){
  if(!hasSVG) {
    var icons = document.querySelectorAll('svg.icons'); // ES6 because it's almost 2016
    for(var i = 0; i < icons.length; i++) {
      var icon = icon[i];

      var src = icon.getAttribute('data-png-fallback');
      var alt = icon.querySelector('title').innerHTML;
      var img = document.createElement('img');
      img.setAttribute('alt',alt);
      img.setAttribute('src',src);
      img.addClass('icon');

      icon.outerHTML = img.outerHTML;
    }
  }
})(hasSVG);

.no-js support?

What about if we can't rely on JavaScript? Try using <noscript> like this:

<svg class="icon" data-png-fallback="assets/img/src/icons/black/png/icon-modx.png">
  <title>Best CMS Ever</title>
  <noscript>
    <img src="assets/img/src/icons/black/png/icon-modx.png" alt="Best CMS Ever">
  </noscript>
  <use xlink:href="assets/img/icons.svg#icon-modx"></use>
</svg>