se
svg-embed
npm i svg-embed
se

svg-embed

Embed SVG code into DOM. 600 Bytes (gzip)

by Anton Medvedev

1.0.6 (see all)License:MITTypeScript:Not Found
npm i svg-embed
Readme

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

Downloads/wk

19

GitHub Stars

15

LAST COMMIT

5yrs ago

MAINTAINERS

1

CONTRIBUTORS

1

OPEN ISSUES

1

OPEN PRs

0
VersionTagPublished
1.0.6
latest
7yrs ago
No alternatives found
No tutorials found
Add a tutorial