https://github.com/anseki/polyfill-svg-uri

Polyfill for plain SVG as Data URI scheme.
https://github.com/anseki/polyfill-svg-uri

background css css-properties css-rules css-styles data-uri-scheme firefox ie iframe img polyfill src style svg

Last synced: about 2 months ago
JSON representation

Polyfill for plain SVG as Data URI scheme.

• Host: GitHub
• URL: https://github.com/anseki/polyfill-svg-uri
• Owner: anseki
• License: mit
• Created: 2015-10-14T15:34:27.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2022-08-19T03:37:20.000Z (over 2 years ago)
• Last Synced: 2024-10-30T13:56:44.397Z (about 2 months ago)
• Topics: background, css, css-properties, css-rules, css-styles, data-uri-scheme, firefox, ie, iframe, img, polyfill, src, style, svg
• Language: JavaScript
• Size: 19.5 KB
• Stars: 4
• Watchers: 4
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# polyfillSvgUri

[![npm](https://img.shields.io/npm/v/polyfill-svg-uri.svg)](https://www.npmjs.com/package/polyfill-svg-uri) [![GitHub issues](https://img.shields.io/github/issues/anseki/polyfill-svg-uri.svg)](https://github.com/anseki/polyfill-svg-uri/issues) [![dependencies](https://img.shields.io/badge/dependencies-No%20dependency-brightgreen.svg)](package.json) [![license](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)

Polyfill for plain SVG as Data URI scheme.

The plain SVG without encoding (e.g. Base64, URL encoding, etc.) that is written in the [Data URI scheme](http://tools.ietf.org/html/rfc2397) is easy to read, easy to edit and small size.  

That Data URI scheme is written in for example, `background-image`, `list-style-image`, `cursor` CSS properties, `src`, `data` attributes of ``, ``, ``, `` elements, etc..

```css

div {

  background: url('data:image/svg+xml;utf8,') center no-repeat;

}

```

But IE ignores it, and some browsers consider `#` as the hash.  

This polyfill solves those problems. It passes encoded SVG to IE, and it escapes `#`.

## Usage

```html

```

### Supported Places

The plain SVGs as Data URI scheme are enabled in:

#### CSS styles in stylesheets

For example: `` and `` tags

#### CSS styles in inline-style

For example:

```html

<div style="background-image: url('data:image/svg+xml;utf8,<svg>...')">

```

#### `src` and `data` attributes of `<img>`, `<input>`, `<iframe>`, `<object>` tags, etc.

For example:

```html

<img src="data:image/svg+xml;utf8,<svg>...">

```

#### CSS properties of `elment.style`

For example:

```js

document.getElementById('media-1').style.backgroundImage =

  'url(\'data:image/svg+xml;utf8,<svg>...\')';

```

#### `elment.style.cssText` property

For example:

```js

document.getElementById('media-1').style.cssText =

  'background-image: url(\'data:image/svg+xml;utf8,<svg>...\');';

```

#### `elment.style.setProperty` method

For example:

```js

document.getElementById('media-1').style.setProperty(

  'background-image', 'url(\'data:image/svg+xml;utf8,<svg>...\')');

```

#### New CSS rules

For example:

```js

var styleSheet = document.styleSheets[0],

  selector = '#media-1',

  cssText = 'background-image: url(\'data:image/svg+xml;utf8,<svg>...\');';

if (styleSheet.insertRule) {

  styleSheet.insertRule(selector + '{' + cssText + '}', 0);

} else if (styleSheet.addRule) {

  styleSheet.addRule(selector, cssText);

}

```

#### Existing CSS rules

For example:

```js

document.styleSheets[0].cssRules[0].style.backgroundImage =

  'url(\'data:image/svg+xml;utf8,<svg>...\')';

```

#### `elment.src` and `elment.data` properties

For example:

```js

document.getElementById('media-1').src =

  'data:image/svg+xml;utf8,<svg>...';

```