mdawaffe wrote (in the readme for the bb-ratings plugin) :

If anyone can create better star images (SVG would be super cool), contact the author of this plugin.

See it at: http://boakes.org/images/star.svg

…just play with the width and height values to change it’s size.

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="10cm" height="10cm" viewBox="-15 -15 270 240"

xmlns="http://www.w3.org/2000/svg" version="1.1">

<desc>bbPress star by ear1grey - GPL</desc>

<polygon stroke="#2e6e15" fill="#888888" stroke-width="1ex"

points="120,000 149,086 239,086 167,130

193,226 120,175 047,226 073,130

001,086 091,086" />

</svg>

[@mdawaffe Member 18 years, 1 month ago]

Is it possible to make the background a fixed color (say white) and the inside of the star transparent (so that if I put the image on a red background, I get a red star, on a white background)?

Rock on.

[@ear1grey Member 18 years, 1 month ago]

This should work as described, but… firefox 2 has a major failing with SVG at the moment: it can’t be used in an img tag for content negotiation… so there would have to be some browser recognition and hocus-pocus coding to get it to work.

still, it all helps bring about an end to the use of px in css, so as you suggest, lets rock.

http://boakes.org/images/star2.svg

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="10cm" height="10cm" viewBox="0 0 270 240"

xmlns="http://www.w3.org/2000/svg" version="1.1">

<desc>bbPress inverted star by ear1grey - GPL</desc>

<g fill-rule="evenodd" stroke="#2e6e15" fill="#888888" stroke-width="3" >

<path d="M 135,000 L 164,086 254,086 182,130

208,226 135,175 062,226 088,130

016,086 106,086 135,000

M 0,-15 L 0,240 270,240 270,-15 0,-15 z" />

</g>

</svg>