PostCSS

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


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

CSS-Tricks