<svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    width="800" height="600"
    viewBox="0 0 400 300">
    <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="120" font-size="6" fill="red">
      It specifies a specific region of the canvas spanning from a 
      top left point at (0, 0) to a point at (400, 300).
    </text>
    <text x="0" y="130" font-size="6" fill="red">
      The SVG graphic is then cropped to that region.
    </text>
    <text x="0" y="140" font-size="6" fill="red">
      The region is scaled up (in a zoom-in-like effect) 
      to fill the entire viewport.
    </text>
    <text x="0" y="150" font-size="6" fill="red">
      The user coordinate system is mapped to the viewport coordinate system so that
    </text>
    <text x="0" y="160" font-size="6" fill="red">
    —in this case—one user unit is equal to two viewport units.
    </text>
</svg>