Use templates instead of replacing (#292)

* Use templates instead of replacing

* Use Renderer to avoid loading templates ourselves

---------

Co-authored-by: Thomas Phillips <thomas@teknique.com>

tools/reccmp/template.svg

@@ -37,7 +37,7 @@
         <clipPath
    id="progBarCutoff">
           <rect
-   width="{progbar:127.18422}"
+   width="{{progbar}}"
    height="8.6508904"
    x="21.118132"
    y="134.05507"
@@ -50,7 +50,7 @@
        height="53.066437"
        preserveAspectRatio="none"
        style="image-rendering:optimizeSpeed"
-       xlink:href="data:image/png;base64,{icon}"
+       xlink:href="data:image/png;base64,{{icon}}"
        id="image1060"
        x="58.13345"
        y="51.967873" /><text
@@ -62,7 +62,7 @@
          id="tspan738"
          style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:monospace;-inkscape-font-specification:mono;text-align:center;text-anchor:middle;stroke:#000000;stroke-width:1.25161812;stroke-opacity:1;stroke-dasharray:none;paint-order:stroke fill markers"
          x="84.666656"
-         y="118.35877">{name}</tspan></text><g
+         y="118.35877">{{name}}</tspan></text><g
        id="g1250"
        transform="translate(-0.04358834,8.1397473)"><rect
          style="display:inline;fill:none;fill-opacity:1;stroke:#000000;stroke-width:2.50324;stroke-dasharray:none;stroke-opacity:1"
@@ -85,7 +85,7 @@
            style="font-size:4.23333px;fill:#ffffff;fill-opacity:1;stroke-width:1.05833"
            x="76.884926"
            y="139.89182"
-           id="tspan2150">{percent}</tspan></text><rect
+           id="tspan2150">{{percent}}</tspan></text><rect
          style="display:inline;fill:#ffffff;stroke:none;stroke-width:2.6764"
          id="rect1169"
          width="127.18422"
@@ -103,7 +103,7 @@
            style="font-size:4.23333px;fill:#000000;fill-opacity:1;stroke-width:1.05833"
            x="76.884926"
            y="139.89182"
-           id="tspan16">{percent}</tspan></text></g><text
+           id="tspan16">{{percent}}</tspan></text></g><text
        xml:space="preserve"
        style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:4.23333px;font-family:monospace;-inkscape-font-specification:mono;text-align:start;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.83441208;stroke-dasharray:none;stroke-opacity:1;opacity:1;stroke-linejoin:miter;stroke-linecap:butt;paint-order:stroke fill markers"
        x="46.947659"
@@ -112,8 +112,8 @@
          id="tspan1258"
          style="font-size:4.23333px;stroke-width:0.83441208;stroke:#000000;stroke-opacity:1;stroke-dasharray:none;stroke-linejoin:miter;stroke-linecap:butt;paint-order:stroke fill markers"
          x="46.947659"
-         y="129.67447">Implemented: {implemented}</tspan><tspan
+         y="129.67447">Implemented: {{implemented}}</tspan><tspan
          style="font-size:4.23333px;stroke-width:0.83441208;stroke:#000000;stroke-opacity:1;stroke-dasharray:none;stroke-linejoin:miter;stroke-linecap:butt;paint-order:stroke fill markers"
          x="46.947659"
          y="134.96613"
-         id="tspan1262">Accuracy:    {accuracy}</tspan></text></g></svg>
+         id="tspan1262">Accuracy:    {{accuracy}}</tspan></text></g></svg>