Using multiple svg transformations at the same time.

Question

Is it possible to use use multiple transformations on the same svg ? I have a transform="translate(-186.57429,-373.01893)" already in my code but I want to reduce the size of the image to half using scale(0.5).

I haven't been able to find an answer to this, maybe bad Googling skills on my part. Any help will be appreciated. Here is the SVG code

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="32.2"
   height="37"
   id="svg2"
   version="1.1"
   inkscape:version="0.48.2 r9819"
   sodipodi:docname="comment.svg">
  <defs
     id="defs4" />
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="2.8"
     inkscape:cx="51.134813"
     inkscape:cy="31.956267"
     inkscape:document-units="px"
     inkscape:current-layer="layer1"
     showgrid="false"
     inkscape:window-width="1920"
     inkscape:window-height="1147"
     inkscape:window-x="-8"
     inkscape:window-y="-8"
     inkscape:window-maximized="1"
     fit-margin-top="0"
     fit-margin-left="0"
     fit-margin-right="0"
     fit-margin-bottom="0"
     preserveAspectRatio="xMinYMin"/>

  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1"
     transform="translate(-186.57429,-373.01893)">
    <path
       style="fill:#ececec;stroke:#ececec;stroke-width:0.70775092px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       d="m 207.25539,445.72259 c 8.18855,-4.77517 9.49259,-8.30548 9.49259,-8.30548 0,0 -18.93579,3.54059 -24.23426,-3.35689 -5.29848,-6.89746 -8.67023,-55.71033 -1.44504,-58.3632 7.22519,-2.65288 50.58563,-4.2446 55.88411,2.12229 5.29847,6.3669 4.81679,51.99632 -0.48168,56.77149 -5.29848,4.77517 -18.5529,3.01002 -18.5529,3.01002 0,0 -7.65748,6.53005 -20.66282,8.12177 z"
       id="path2985"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="ccsssscc" />
  </g>
</svg>

Answer 1

You can just pass another transform definition for the scale:

<g transform="scale(0.5 0.5) translate(-186.57429 -373.01893)">

From the MDN docs on transform:

The transform attribute defines a list of transform definitions that are applied to an element and the element's children. The items in the transform list are separated by whitespace and/or commas, and are applied from right to left.

Alternatively, you can pass a transformation matrix to apply both scale and translate:

<g transform="matrix(0.5 0 0 0.5 -186.57429 -373.01893)">

How does it work? Transformation matrices have six attributes, as can be seen by examining the arguments in the above snippet - matrix(<a> <b> <c> <d> <e> <f>).

Each argument maps to a parameter of the transformation in the following manner:

<a> - scale X
<b> - skew Y
<c> - skew X
<d> - scale Y
<e> - translate X
<f> - translate Y