<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="800" height="600"
viewBox="0 0 1200 900">
<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>
<text x="0" y="130" font-size="24" fill="red">
800 viewport units mapped to 1200 user units.
</text>
<text x="0" y="155" font-size="24" fill="red">
One user unit equals 0.66 viewport units.
</text>
</svg>