--- a/client/src/components/fairway/AvailableFairwayDepth.vue	Fri Jul 05 11:03:35 2019 +0200
+++ b/client/src/components/fairway/AvailableFairwayDepth.vue	Fri Jul 05 11:03:51 2019 +0200
@@ -75,7 +75,7 @@
 import debounce from "debounce";
 import { mapState } from "vuex";
 import filters from "@/lib/filters.js";
-import canvg from "canvg";
+import svg2pdf from "svg2pdf.js";
 import { diagram, pdfgen, templateLoader } from "@/lib/mixins";
 import { HTTP } from "@/lib/http";
 import { displayError } from "@/lib/errors";
@@ -120,7 +120,7 @@
           {
             type: "diagram",
             position: "topleft",
-            offset: { x: 20, y: 60 },
+            offset: { x: 20, y: 30 },
             width: 290,
             height: 100
           },
@@ -134,7 +134,7 @@
           {
             type: "diagramlegend",
             position: "topleft",
-            offset: { x: 30, y: 160 },
+            offset: { x: 30, y: 170 },
             color: "black"
           }
         ]
@@ -297,10 +297,8 @@
     addDiagram(position, offset, width, height) {
       let x = offset.x,
         y = offset.y;
-      var svg = this.$refs.diagramContainer.innerHTML;
-      if (svg) {
-        svg = svg.replace(/\r?\n|\r/g, "").trim();
-      }
+      var svgElement = this.$refs.diagramContainer.firstElementChild;
+
       // use default width,height if they are missing in the template definition
       if (!width) {
         width = this.templateData.properties.paperSize === "a3" ? 380 : 290;
@@ -314,16 +312,12 @@
       if (["bottomright", "bottomleft"].indexOf(position) !== -1) {
         y = this.pdf.height - offset.y - height;
       }
-      var canvas = document.createElement("canvas");
-      canvas.width = window.innerWidth;
-      canvas.height = window.innerHeight / 2;
-      canvg(canvas, svg, {
-        ignoreMouse: true,
-        ignoreAnimation: true,
-        ignoreDimensions: true
+
+      svg2pdf(svgElement, this.pdf.doc, {
+        xOffset: x,
+        yOffset: y,
+        scale: 0.4 // TODO depend on the size and aspect ration on paper
       });
-      var imgData = canvas.toDataURL("image/png");
-      this.pdf.doc.addImage(imgData, "PNG", x, y, width, height);
     },
     addDiagramLegend(position, offset, color) {
       let x = offset.x,
@@ -540,7 +534,7 @@
         .attr("y", this.dimensions.mainHeight - this.labelPaddingBottom)
         .attr("x", this.widthPerItem / 2)
         .attr("text-anchor", "middle")
-        .attr("font-size", "smaller");
+        .attr("font-size", "9");
     },
     drawScaleLabel() {
       const center = this.dimensions.mainHeight / 2;
@@ -550,7 +544,7 @@
         .attr("text-anchor", "middle")
         .attr("x", 0)
         .attr("y", 0)
-        .attr("dy", "1em")
+        .attr("dy", "10")
         .attr("transform", `translate(0, ${center}), rotate(-90)`);
     },
     drawScale() {

--- a/client/src/components/gauge/Waterlevel.vue	Fri Jul 05 11:03:35 2019 +0200
+++ b/client/src/components/gauge/Waterlevel.vue	Fri Jul 05 11:03:51 2019 +0200
@@ -314,6 +314,7 @@
       svg2pdf(svg, this.pdf.doc, {
         xOffset: x,
         yOffset: y,
+        // TODO depend on the size and aspect ration on paper
         scale: this.templateData.properties.paperSize === "a3" ? 0.45 : 0.25
       });