<svg width="300px" height="3oopx">

  <desc>Transformation with establishment of a new viewport

  </desc>

        font height of 12 pixels -->

  <text style="font-size: 12">This prints 12 pixels high.</text>

  <text style="font-size: 12px">This prints 12 pixels high.</text>

  <g style="transform: scale(2)">

           because each unit in the new coordinate system equals

           2 units in the previous coordinate system. -->

    <text style="font-size: 12">This prints 24 pixels high.</text>

           because the CSS unit specifier has been provided. -->

    <text style="font-size: 12px">This prints 12 pixels high.</text>

  </g>

  <g style="transform: scale(3)">

           some CSS unit specifiers. -->

    <svg style="left:0; top:0; right:100; bottom:100" width="100%" height="100%">

              font height of 36 screen pixels. The first text element

              defines its height in user coordinates, which have been

              scaled by 3. The second text element defines its height

              in CSS px units, which have been redefined to be three times

              as big as screen pixels due the <svg> element establishing

              a new viewport. -->

      <text style="font-size: 12">This prints 36 pixels high.</text>

      <text style="font-size: 12px">This prints 36 pixels high.</text>

    </svg>

  </g>

</svg>