PostCSS Encode Background SVGs

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