Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including postcss-inline-svg with all npm packages installed. Try it out:

var postcssInlineSvg = require("postcss-inline-svg")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

postcss-inline-svg v4.1.0

PostCSS plugin to reference an SVG file and control its attributes with CSS syntax

postcss-inline-svg Build Status

PostCSS plugin to reference an SVG file and control its attributes with CSS syntax.

@svg-load nav url(img/nav.svg) {
    fill: #cfc;
    path:nth-child(2) {
        fill: #ff0;
.nav {
    background: svg-inline(nav);
.up {
    background: svg-load('img/arrow-up.svg', fill=#000, stroke=#fff);
.nav {
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg fill='%23cfc'%3E%3Cpath d='...'/%3E%3Cpath d='...' fill='%23ff0'/%3E%3Cpath d='...'/%3E%3C/svg%3E");
.up {
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg fill='%23000' stroke='%23fff'%3E...%3C/svg%3E");

PostCSS parsers allow to use different syntax (but only one syntax in one svg-load() definition):

.up {
    background: svg-load('img/arrow-up.svg', fill: #000, stroke: #fff);
.down {
    background: svg-load('img/arrow-down.svg', fill=#000, stroke=#fff);


postcss([ require('postcss-inline-svg')(options) ])

See PostCSS docs for examples for your environment.



Array of paths to resolve URL. Paths are tried in order, until an existing file is found.

Default: false - path will be relative to source file if it was specified.


Default: false - with true removes all fill attributes before applying specified. Passed RegExp filters files by ID.


Default: false - with true removes all stroke attributes before applying specified. Passed RegExp filters files by ID.


Processes SVG after applying parameters. Default will be ommited if passed false.


function encode(code) {
    return code
        .replace(/%/g, '%25')
        .replace(/</g, '%3C')
        .replace(/>/g, '%3E')
        .replace(/&/g, '%26')
        .replace(/#/g, "%23")
        .replace(/{/g, "%7B")
        .replace(/}/g, "%7D");

options.transform(svg, path)

Transforms SVG after encode function and generates URL.


type: boolean default: true

Adds xmlns attribute to SVG if not present.

Frequently asked questions

Why svg-load() doesn't work and the color still black (or red or whatever)?

That's because svg-load() overrides attributes only in <svg> element and children inherit that color. But if there is already color on children nothing will be inherited.

For example

    <path fill="#ff0000" d="..." />

after inline-svg (fill: #000) will looks like

<svg fill="#000">
    <path fill="#ff0000" d="..." />

There are three solutions: to remove that attribute (preferable), to use extended @svg-load notation or to use removeFill option.

How to optimize svg on build step?

There is a plugin. :)

You are able to add postcss-svgo in your PostCSS plugins list which will detect every URL which contains data SVG URI and minify via svgo.


Or if you use cssnano your SVG URLs already minified as cssnano includes postcss-svgo.



MIT © Bogdan Chadkin

Support on Beerpay

Hey dude! Help me out for a couple of :beers:!

Beerpay Beerpay

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free