postcss-encode-background-svgs

PostCSS plugin to urlencode background svgs

Usage no npm install needed!

<script type="module">
  import postcssEncodeBackgroundSvgs from 'https://cdn.skypack.dev/postcss-encode-background-svgs';
</script>

README

PostCSS Encode Background SVGs

Build Status Code Coverage StyleCI npm version

PostCSS plugin to encode background-image SVGs for cross browser compatibility.

The Problem

Background image SVGs are great but they don't render on IE unless encoded properly.

The Solution

Write your background as you usually would:

/* Input example */
background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg"></svg>');

This encoder will then take your readable SVG and return a UTF-8 cross browser encoded solution like so:

/* Output example */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3C/svg%3E");

Installation

yarn

yarn add postcss-encode-background-svgs

npm

npm install postcss-encode-background-svgs

Usage

postcss([require('postcss-encode-background-svgs')()])

See the PostCSS docs for examples for your environment.

Once included in your environment, the plugin will search for any scss value with data:image/svg+xml.

Credits

Big thanks for Vasi and Rob for their help with the Regex.

MIT © Chris Boakes