You can write SVG by hand and embed it in HTML. This requires no use of an external editor nor any extra HTTP request. <svg height=10 width=20> <polygo

You can write SVG by hand and embed it in HTML. This requires no use of an external editor nor any extra HTTP request. <svg height=10 width=20> <polygon fill=red stroke-width=0 points="0,10 20,10 10,0" /> </svg> If you want to include it in your CSS, you can include it via a data URI, though you need to embed it as an actual XML document (within an HTML document, you can skip the namespace and use HTML syntax which doesn't require quotes around attributes) and can't include line breaks so the syntax is a little bit more cumbersome: .triangle { background: url("data:image/svg+xml;charset=utf-8,<svg height='10' width='20' xmlns='http://www.w3.org/2000/svg'><polygon fill='red' stroke-width='0' points='0,10 20,10 10,0' /></svg>") no-repeat left center; width: 20px; height: 10px; } Examples of both in action: http://jsfiddle.net/jtR4G/ http://jsfiddle.net/jtR4G/