diff --git a/src/app/cartography/shared/models/drawing.ts b/src/app/cartography/shared/models/drawing.ts
index b5d9826a..a94a6ccd 100644
--- a/src/app/cartography/shared/models/drawing.ts
+++ b/src/app/cartography/shared/models/drawing.ts
@@ -1,4 +1,5 @@
 import { Selectable } from "../managers/selection-manager";
+import { DrawingElement } from "./drawings/drawing-element";
 
 export class Drawing implements Selectable {
   drawing_id: string;
@@ -9,4 +10,5 @@ export class Drawing implements Selectable {
   y: number;
   z: number;
   is_selected = false;
+  element: DrawingElement; // @todo; move to context
 }
diff --git a/src/app/cartography/shared/widgets/drawings.ts b/src/app/cartography/shared/widgets/drawings.ts
index 7ddf8d0d..544c1a26 100644
--- a/src/app/cartography/shared/widgets/drawings.ts
+++ b/src/app/cartography/shared/widgets/drawings.ts
@@ -3,15 +3,27 @@ import {Drawing} from "../models/drawing";
 import {SVGSelection} from "../models/types";
 import {Layer} from "../models/layer";
 import { TextDrawingWidget } from "./drawings/text-drawing";
+import { SvgToDrawingConverter } from "../../map/helpers/svg-to-drawing-converter";
 
 
 export class DrawingsWidget implements Widget {
-  constructor() {}
+  private svgToDrawingConverter: SvgToDrawingConverter;
+
+  constructor() {
+    this.svgToDrawingConverter = new SvgToDrawingConverter();
+  }
 
   public draw(view: SVGSelection, drawings?: Drawing[]) {
     const drawing = view
       .selectAll<SVGGElement, Drawing>('g.drawing')
       .data((l: Layer) => {
+        l.drawings.forEach((d: Drawing) => {
+          try {
+            d.element = this.svgToDrawingConverter.convert(d.svg);
+          } catch (error) {
+            console.log(`Cannot convert due to Error: '${error}'`);
+          }
+        });
         return l.drawings;
       }, (d: Drawing) => {
         return d.drawing_id;
@@ -64,5 +76,6 @@ export class DrawingsWidget implements Widget {
     drawing
       .exit()
         .remove();
+
   }
 }
diff --git a/src/app/cartography/shared/widgets/drawings/text-drawing.spec.ts b/src/app/cartography/shared/widgets/drawings/text-drawing.spec.ts
index 6dc7d824..344ae86c 100644
--- a/src/app/cartography/shared/widgets/drawings/text-drawing.spec.ts
+++ b/src/app/cartography/shared/widgets/drawings/text-drawing.spec.ts
@@ -1,4 +1,3 @@
-import { instance, mock, when } from "ts-mockito";
 import { TestSVGCanvas } from "../../../testing";
 import { TextDrawingWidget } from "./text-drawing";
 import { Drawing } from "../../models/drawing";
@@ -21,8 +20,15 @@ describe('TextDrawingWidget', () => {
   });
 
   it('should draw text drawing', () => {
-    drawing.svg = '<svg height="23" width="106"><text fill="#000000" fill-opacity="1.0" ' +
-      'font-family="TypeWriter" font-size="10.0" font-weight="bold">THIS IS TEXT</text></svg>';
+    const text = new TextElement();
+    text.text = "THIS IS TEXT";
+    text.fill = "#000000";
+    text.fill_opacity = 1.0;
+    text.font_family = "TypeWriter";
+    text.font_size = 10.0;
+    text.font_weight = "bold";
+
+    drawing.element = text;
 
     const drawings = svg.canvas.selectAll<SVGGElement, Drawing>('g.drawing').data([drawing]);
     const drawings_enter = drawings.enter().append<SVGGElement>('g').classed('drawing', true);
@@ -33,12 +39,14 @@ describe('TextDrawingWidget', () => {
     const drew = drawings_merge.selectAll<SVGTextElement, TextElement>('text.text_element');
     expect(drew.size()).toEqual(1);
     const text_element = drew.nodes()[0];
-    expect(text_element.innerHTML).toEqual("THIS IS TEXT");
+    expect(text_element.innerHTML).toEqual('<tspan x="0" dy="0em">THIS IS TEXT</tspan>');
     expect(text_element.getAttribute('style')).toEqual('font-family: "TypeWriter"; font-size: 10pt; font-weight: bold');
   });
 
   it('should draw multiline text', () => {
-    drawing.svg = '<svg height="23" width="106"><text>THIS' + "\n" + 'IS TEXT</text></svg>';
+    const text = new TextElement();
+    text.text = 'THIS' + "\n" + 'IS TEXT';
+    drawing.element = text;
 
     const drawings = svg.canvas.selectAll<SVGGElement, Drawing>('g.drawing').data([drawing]);
     const drawings_enter = drawings.enter().append<SVGGElement>('g').classed('drawing', true);
diff --git a/src/app/cartography/shared/widgets/drawings/text-drawing.ts b/src/app/cartography/shared/widgets/drawings/text-drawing.ts
index b7078abb..51791e39 100644
--- a/src/app/cartography/shared/widgets/drawings/text-drawing.ts
+++ b/src/app/cartography/shared/widgets/drawings/text-drawing.ts
@@ -1,8 +1,6 @@
 import { SVGSelection } from "../../models/types";
 import { TextElement } from "../../models/drawings/text-element";
 import { Drawing } from "../../models/drawing";
-import { SvgToDrawingConverter } from "../../../map/helpers/svg-to-drawing-converter";
-import { DrawingElement } from "../../models/drawings/drawing-element";
 
 
 export class TextDrawingWidget {
@@ -10,15 +8,7 @@ export class TextDrawingWidget {
     const drawing = view
       .selectAll<SVGTextElement, TextElement>('text.text_element')
         .data((d: Drawing) => {
-          const svgConverter = new SvgToDrawingConverter();
-          const elements: DrawingElement[] = [];
-          try {
-            const element = svgConverter.convert(d.svg);
-            elements.push(element);
-          } catch (error) {
-            console.log(`Cannot convert due to Error: '${error}'`);
-          }
-          return elements.filter((e: DrawingElement) => e instanceof TextElement);
+          return (d.element && d.element instanceof TextElement) ? [d.element] : [];
         });
 
     const drawing_enter = drawing