There are still a few browsers that don't support SVGs so it is good practice to provide a proper fall back option. One technique to do this is to utilize the img tag onerror event. Lets say that your site uses all SVGs and if someone makes a request to your site with a browser that doesn't support SVGs this event is fired when an error occurs loading the image. Your HTML might look something like this:
Automate conversion of SVGs
The next process is converting all of your svg images to a png. You could use the Apache Batik Project which has good transcoding support for images and tie it into your maven build process or create a one off program to run. I prefer to automate the process so developers don't have to remember to run it is the way to go.
Automate adding the onerror event
If are dealing with a site with lots of images or various types of images you might want to be lazy and create a way to automate adding the onerror to reference to the fallback image. This will prevent developers having to remember the direcotry or image naming standards you set up, plus it will save a little typing which we all like.
Using grunt-text-replace we will use a regex to look for image tag containing svg in the html files and replacing the last > with the onerror snippet.