url parts colour coded (with hideous colours)

url.svg

<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="350">
	<defs>
    	<style type="text/css">
    		<![CDATA[
.explain, .uri {
font-family: helvetica, arial;
font-weight: bold;
}
.explain { font-size: 20pt; }
.uri { font-size: 30pt; }
.scheme { fill: blue; }
.auth {	stroke: black; stroke-width: 2px; stroke-linecap: round; fill: transparent; stroke-dasharray: 5 3;}
.user {	fill: #ff8F80; }
.pwd { fill: #7fafff; }
.host {	fill: #ff7f00; }
.port { fill: #7f00ff; }
.path { fill: purple; }
.query { fill: teal; }
.frag { fill: green; }
]]>
		</style>
  	</defs>

	<text x="30"  y="140" class="uri">
		<tspan class="scheme">http</tspan>://<tspan class="auth"><tspan class="user">admin</tspan>:<tspan class="pwd">secret</tspan>@<tspan class="host">port.ac.uk</tspan>:<tspan class="port">80</tspan></tspan><tspan class="path">/a/path/</tspan>?<tspan class="query">x=4&amp;y=3</tspan>#<tspan class="frag">part_z</tspan>
	</text>
	<text x="340"  y="90" class="explain auth">Authority</text>
	<text x="15"  y="190" class="explain scheme">Scheme</text>
    <text x="140"  y="190" class="explain user">Username</text>
	<text x="280"  y="190" class="explain pwd">Password</text>
	<text x="500"  y="190" class="explain host">Host</text>
	<text x="630"  y="190" class="explain port">Port</text>
    <text x="710"  y="190" class="explain path">Path</text>
	<text x="860"  y="190" class="explain query">Query</text>
	<text x="1030"  y="190" class="explain frag">Fragment</text>
</svg>