Write SVG: a PostCSS plugin

Here’s a cool PostCSS plugin that lets us write SVG directly in CSS with the rest of our styles:

.arrow {
    @svg {
        polygon {
            fill: green;
            points: 50,100 0,0 0,100;
        }
    }
}

These values will then be converted into a data URI, like so:

.arrow {
    background-image: url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpolygon%20fill%3D%22green%22%20points%3D%2250%2C100%200%2C0%200%2C100%22%2F%3E%3C%2Fsvg%3E)
}

Like Sara Soueidan mentions, I’d love to see this in Sass.

Update: David Khourshid has just made sass-svg which lets you write SVG inside a mixin.

Direct Link →