example.svg


<svg version="1" xmlns="http://www.w3.org/2000/svg" width="1000" height="200" viewBox="-200 0 500 100">
	<style>
		.axis {
			stroke: #555;
			stroke-width: .2;
		}
		.scale {
			fill: #f0f0f0;
			stroke: #999;
			stroke-width: .2;
		}
		.shape {
			fill-opacity: .3;
			stroke-width: .5;
		}
		.shape:hover { fill-opacity: .6; }

		.shape.iphone { fill: #edc951; stroke: #edc951; }
		.shape.nexus  { fill: #cc333f; stroke: #cc333f; }
		.shape.galaxy { fill: #00a0b0; stroke: #00a0b0; }
	</style>
	<g transform="translate(50,50)"><g><circle class="scale" fill="none" r="41.66666666666667"></circle><circle class="scale" fill="none" r="27.77777777777778"></circle><circle class="scale" fill="none" r="13.88888888888889"></circle></g><g><polyline class="axis" points="0,0 0,-41.6667"></polyline><polyline class="axis" points="0,0 39.6274,-12.8757"></polyline><polyline class="axis" points="0,0 24.4911,33.709"></polyline><polyline class="axis" points="0,0 -24.4911,33.709"></polyline><polyline class="axis" points="0,0 -39.6274,-12.8757"></polyline></g><g><text class="caption" text-anchor="middle" font-size="3" font-family="sans-serif" y="-47.5" dy="1.5">Price</text><text class="caption" text-anchor="middle" font-size="3" font-family="sans-serif" x="45.1752" y="-14.6783" dy="1.5">Usefulness</text><text class="caption" text-anchor="middle" font-size="3" font-family="sans-serif" x="27.9198" y="38.4283" dy="1.5">Design</text><text class="caption" text-anchor="middle" font-size="3" font-family="sans-serif" x="-27.9198" y="38.4283" dy="1.5">Battery Capacity</text><text class="caption" text-anchor="middle" font-size="3" font-family="sans-serif" x="-45.1752" y="-14.6783" dy="1.5">Camera Quality</text></g><g><path class="shape iphone" d="M0,-41.6667L35.6646,-11.5881L24.4911,33.709L-17.1437,23.5963L-35.6646,-11.5881z"></path><path class="shape galaxy" d="M0,-33.3333L31.7019,-10.3006L14.6946,20.2254L-24.4911,33.709L-39.6274,-12.8757z"></path><path class="shape nexus" d="M0,-20.8333L23.7764,-7.7254L17.1437,23.5963L-19.5928,26.9672L-23.7764,-7.7254z"></path></g></g>
</svg>