Embed SVG code into DOM

npm install svg-embed --save

Where are a few way to use SVG on page. One of the simpler and convenient ways is to use SVG as background-image (with url to resource *.svg or with data url), but in such way of using SVG, it loses ability to change colors and animation of SVG.

Solution of this problem is to embed SVG from background-image to DOM. This is what svg-embed doing.

Support Chrome 11+, Safari 5+, iOS 5.1+, FireFox 4+, Android 4+, IE9+.

Usage

    .icon-bear {
        background: url("*.svg");
    }

    .icon-elephant {
        background: url("data:image/svg+xml,...");
    }

    .icon-tiger {
        background: url("data:image/svg+xml;base64,...");
    }
    
    .red path {
        fill: red;
    }

<i class="icon-bear red" data-svg-embed></i>

Require svgEmbed or include embed.js as script on page, and call svgEmbed function. It will embed icons for all nodes with data-svg-embed attribute.

var svgEmbed = require('svg-embed');
svgEmbed();

If you need IE9 support, include polyfill for atob function. Or don't use base64 encoded SVG.

Example

Go to example