Write SVG: a PostCSS plugin

Category: Link

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,

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 to ArticlePermalink

Write SVG: a PostCSS plugin is a post from CSS-Tricks