<svg width="700" height="500">
<defs>
<marker id="end" markerWidth="6" markerHeight="6" refX="4" refY="3" orient="auto">
<path d="M 0 0 L 4 3 L 0 6" />
</marker>
<marker id="start" markerWidth="6" markerHeight="6" refX="-.5" refY="3" orient="auto">
<path d="M 4 0 L 0 3 L 4 6" />
</marker>
<pattern id="trama" patternUnits="userSpaceOnUse" width="5" height="5" patternTransform="rotate(25)">
<line y2="5" />
</pattern>
<filter x="0" y="0" width="1" height="1" id="white">
<feFlood flood-color="white"/>
<feComposite in="SourceGraphic"/>
</filter>
<text id="textCarril"> Grid track (carril) </text>
<text id="textLinea"> Grid line (línea) </text>
<text id="textArea"> Grid area </text>
<text id="textCelda"> Celda </text>
</defs>
<g id="grid" transform="translate(100,100)">
<rect x="0" y="0" width="500" height="300" />
<path class="lines" d="M100,0 v300 M175,0 v300 M325,0 v300 M400,0 v300 M0,100 h500 M0,200 h500" />
<path class="flecha" d="M0 50 h500" />
<path class="flecha" d="M50 0 v300"/>
<rect class="celda" x="400" y="200" width="100" height="100"/>
<rect class="area" x="100" y="100" width="225" height="200" />
<use xlink:href ="#textCarril" x="250" y="55" />
<use xlink:href ="#textCarril" x="50" y="155" transform="rotate(-90 50 150)" />
<use xlink:href ="#textLinea" x="400" y="95" />
<use xlink:href ="#textLinea" x="100" y="195" transform="rotate(-90 100 200)" />
<use xlink:href ="#textArea" x="200" y="205" />
<use xlink:href ="#textCelda" x="450" y="255" />
<text class="textH" y="-15">[1]</text>
<text class="textH" x="100" y="-15">[2]</text>
<text class="textH" x="175" y="-15">[3]</text>
<text class="textH" x="325" y="-15">[4]</text>
<text class="textH" x="400" y="-15">[5]</text>
<text class="textH" x="500" y="-15">[6]</text>
<text class="textV" x="-25" y="0">[1]</text>
<text class="textV" x="-25" y="100">[2]</text>
<text class="textV" x="-25" y="200">[3]</text>
<text class="textV" x="-25" y="300">[4]</text>
</g>
</svg>
svg{ margin:0 auto;display:block;}
line{stroke:#CC3366; }
path{stroke:#CC3366;fill:none;}
.lines{stroke-dasharray:5,5; stroke-dashoffset:2.5;}
#grid{ fill:none;stroke:#d9d9d9;}
.flecha{stroke-width:3px;marker-end:url(#end); marker-start:url(#start);}
.celda, .area{fill:url(#trama);}
text{text-anchor:middle; font-family: Consolas; fill:#333; stroke:none; filter:url(#white); }
Also see: Tab Triggers