<svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    width="800" height="600">
    <rect x="0" y="0" width="100" height="100"></rect>
    <line id="ruler-vertical" x1="0" y1="0" x2="0" y2="800" stroke="red" />
    <line id="ruler-horizontal" x1="0" y1="0" x2="800" y2="0" stroke="blue" />
    <use xlink:href="#ruler-vertical" transform="translate(100,0)"></use>
    <use xlink:href="#ruler-vertical" transform="translate(200,0)"></use>
    <use xlink:href="#ruler-vertical" transform="translate(300,0)"></use>
    <use xlink:href="#ruler-vertical" transform="translate(400,0)"></use>
    <use xlink:href="#ruler-vertical" transform="translate(500,0)"></use>
    <use xlink:href="#ruler-vertical" transform="translate(600,0)"></use>
    <use xlink:href="#ruler-vertical" transform="translate(700,0)"></use>
    <use xlink:href="#ruler-vertical" transform="translate(800,0)"></use>

    <use xlink:href="#ruler-horizontal" transform="translate(0,100)"></use>
    <use xlink:href="#ruler-horizontal" transform="translate(0,200)"></use>
    <use xlink:href="#ruler-horizontal" transform="translate(0,300)"></use>
    <use xlink:href="#ruler-horizontal" transform="translate(0,400)"></use>
    <use xlink:href="#ruler-horizontal" transform="translate(0,500)"></use>
    <use xlink:href="#ruler-horizontal" transform="translate(0,600)"></use>
    <use xlink:href="#ruler-horizontal" transform="translate(0,700)"></use>
    <use xlink:href="#ruler-horizontal" transform="translate(0,800)"></use>
</svg>

// Code goes here

/* Styles go here */