svg images

how-to.md

1. load svginjector https://github.com/iconic/SVGInjector
2. place your svg + png fallback files in [see 'file layout']
3. make sure loadSVG() is run on page load / page ready.

Now when your browser can't use the svg file, it'll fallback to the png equivalent inside the 'fallback' directory.

Also here's the svg optimization tool which was mentioned, https://github.com/svg/svgo-gui

Enjoy.

[ file layout ]
/svg
  logo.svg
/svg/fallback
  logo.png

index.html

<img class="svg" src="/svg/logo-text.svg" alt="UXGent"/>

index.js

loadSVG = function() {
  var mySVGsToInject = document.querySelectorAll('.svg');
  var injectorOptions = {
    evalScripts: 'once',
    pngFallback: 'svg/fallback'
  };
  SVGInjector(mySVGsToInject, injectorOptions);
};

loadSVG();