Hier ist ein cooles PostCSS-Plugin, das es uns ermöglicht, SVG direkt in CSS mit unseren anderen Stilen zu schreiben.
.arrow {
@svg {
polygon {
fill: green;
points: 50,100 0,0 0,100;
}
}
}Diese Werte werden dann in eine Daten-URI konvertiert, wie folgt:
.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)
}Wie Sara Soueidan erwähnt, würde ich mir das auch in Sass wünschen.
Update: David Khourshid hat gerade sass-svg entwickelt, das es Ihnen ermöglicht, SVG innerhalb eines Mixins zu schreiben.