SVG Loader

You can use SVG loader just like using an image. For example, with <img> tag:

<img src="triangle.svg">

or as background image:

CSS Loader

CSS loader has two parts: stylesheet and HTML part. Stylesheet is embraced in <style> tag so you can copy the file content into the place you want the icon to show.

To increase reusability, you can separate stylesheet from html part into a standalone css file. For example:

will look like this:

GIF Loader

Use GIF loader in an <img> tag or as background of another element:

For example:

tl;dr

Use GIF loader if you need compatibility in Internet Explorer.

SVG Loader ( not for IE )

All SVG loaders use SMIL to animate elements. Modern browsers support SVG and SMIL except Internet Explorer:

• SVG: IE ≥ 9.0
• SMIL: IE doesn't Support

CSS Loader ( IE ≥ 10.0 )

All CSS loaders use CSS3 Animation to animate elements. Modern browsers support CSS3 except Internet Explorer:

• CSS3 Animation: IE ≥ 10.0
• CSS3 Transform: IE ≥ 10.0 (partially)

GIF Loader ( cross-platform )

All modern browsers support GIF loader. Use GIF loader to ensure optimized browser compatibility.

This tool is tested against following browsers:

• Google Chrome 34.0.
• Firefox 28.0
• Safari 7.03
• Opera 18.0.
• Internet Explorer 11.0

It's built upon bootstrap, angularjs, canvg, gif.js and web workers. It's known that some browsers ( e.g., IE10 ) are not supported, so please upgrade your browser if you want to use this tool.