https://github.com/antonmedv/svg-embed

Embed SVG code into DOM. 600 Bytes (gzip)
https://github.com/antonmedv/svg-embed

Last synced: 29 days ago
JSON representation

Embed SVG code into DOM. 600 Bytes (gzip)

• Host: GitHub
• URL: https://github.com/antonmedv/svg-embed
• Owner: antonmedv
• License: mit
• Created: 2015-10-27T10:42:35.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2017-11-18T12:20:43.000Z (almost 7 years ago)
• Last Synced: 2024-10-04T16:14:55.644Z (about 1 month ago)
• Language: HTML
• Homepage:
• Size: 14.6 KB
• Stars: 16
• Watchers: 3
• Forks: 3
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Embed SVG code into DOM

```

npm install svg-embed --save

```

  

Where are a few way to [use SVG](https://css-tricks.com/using-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](https://www.npmjs.com/package/svg-embed) doing.

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

## Usage

```css

    .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;

    }

```

```html



```

Require svgEmbed or include [embed.js](src/embed.js) as script on page, and call `svgEmbed` function. It will embed icons 

for all nodes with `data-svg-embed` attribute.

```js

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

svgEmbed();

```

> If you need IE9 support, include polyfill for [atob](https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/atob) function.

> Or don't use base64 encoded SVG. 

## Example

Go to example