SVG to PNG fallback in AngularJS

March 28, 2014

SVG images are great for crisp graphics on retina displays. They are a necessity in any responsive design website in this day and age but the file format is not supported in older browsers. You can get SVG to PNG fallback in AngularJS with this simple directive.

To address dynamically loaded images in AngularJS we can use a directive. I developed a simple directive that works off of the image element whose only feature is to replace the SVG file extension with PNG in browsers that do not support SVG.

Provided that you have a PNG with the same file name in the same location as the SVG file, this solution will work perfectly.

The SVG to PNG fallback in AngularJS directive is available for download and install into your Angular apps using Bower or can be manually downloaded.

Check out angular-svg-png on Github.

SVG to PNG fallback in AngularJS preview in the browser