css-align-3/images/space-between.svg

<svg xmlns="http://www.w3.org/2000/svg" width='504' height='56' viewBox="0 0 504 56">
	<style>
		text { font-family: sans-serif; font-weight: bold; font-size: 30px; text-anchor: middle; }
		rect { stroke-width: 2px; stroke: #888; }
		g > rect:nth-child(1) { fill: #888 }
		g > rect:nth-child(2) { fill: #fcc; }
		g > rect:nth-child(3) { fill: #cfc; }
		g > rect:nth-child(4) { fill: #ccf; }
		g > rect:nth-child(5) { fill: transparent; }
	</style>
	<g transform="translate(2,2)">
		<rect x='0' y='0' width='500' height='50' />
		<rect x='0' y='0' width='100' height='50' />
		<rect x='160' y='0' width='80' height='50' />
		<rect x='300' y='0' width='200' height='50' />
		<rect x='0' y='0' width='500' height='50' />
		<text x='250' y='38'>space-between</text>
	</g>
</svg>