diff --git a/electron/src/app.module.ts b/electron/src/app.module.ts
index 49edfcd8..83004c04 100644
--- a/electron/src/app.module.ts
+++ b/electron/src/app.module.ts
@@ -73,6 +73,7 @@ import { SafeStylePipe } from './shared/pipes';
 
 import { CaptureService } from './shared/services/capture.service';
 import { MapperService } from './shared/services/mapper.service';
+import { SvgModuleProviderService } from './shared/services/svg-module-provider.service';
 import { UhkDeviceService } from './services/uhk-device.service';
 
 import { KeymapEffects, MacroEffects, UserConfigEffects} from './shared/store/effects';
@@ -169,6 +170,7 @@ import { reducer } from '../../shared/src/store/reducers/index';
         UhkDeviceDisconnectedGuard,
         UhkDeviceInitializedGuard,
         UhkDeviceUninitializedGuard,
+        SvgModuleProviderService,
         MapperService,
         appRoutingProviders,
         KeymapEditGuard,
diff --git a/shared/src/components/svg/keyboard/svg-keyboard.component.ts b/shared/src/components/svg/keyboard/svg-keyboard.component.ts
index 35557acb..72009fd4 100644
--- a/shared/src/components/svg/keyboard/svg-keyboard.component.ts
+++ b/shared/src/components/svg/keyboard/svg-keyboard.component.ts
@@ -2,11 +2,7 @@ import { Component, EventEmitter, Input, OnInit, Output, ChangeDetectionStrategy
 
 import { Module } from '../../../config-serializer/config-items/Module';
 import { SvgModule } from '../module';
-
-enum KeyboardLayout {
-    ANSI,
-    ISO
-}
+import { SvgModuleProviderService } from '../../../services/svg-module-provider.service';
 
 @Component({
     selector: 'svg-keyboard',
@@ -27,13 +23,13 @@ export class SvgKeyboardComponent implements OnInit {
     modules: SvgModule[];
     viewBox: string;
 
-    constructor() {
+    constructor(private svgModuleProvider: SvgModuleProviderService) {
         this.modules = [];
         this.viewBox = '-520 582 1100 470';
     }
 
     ngOnInit() {
-        this.modules = this.getSvgModules();
+        this.modules = this.svgModuleProvider.getSvgModules();
     }
 
     onKeyClick(moduleId: number, keyId: number, keyTarget: HTMLElement): void {
@@ -61,21 +57,4 @@ export class SvgKeyboardComponent implements OnInit {
         });
     }
 
-    private getSvgModules(): SvgModule[] {
-        const leftModule = new SvgModule(this.getLeftModule());
-        const rightModule = new SvgModule(this.getRightModule());
-        return [rightModule, leftModule];
-    }
-
-    private getLeftModule(layout = KeyboardLayout.ANSI): any {
-        if (layout === KeyboardLayout.ISO) {
-            return require('xml-loader!../../../../../modules/uhk60-left-half/layout-iso.svg').svg;
-        }
-        return require('xml-loader!../../../../../modules/uhk60-left-half/layout-ansi.svg').svg;
-    }
-
-    private getRightModule(): any {
-        return require('xml-loader!../../../../../modules/uhk60-right-half/layout.svg').svg;
-    }
-
 }
diff --git a/shared/src/keyboard/keyboard-layout.enum.ts b/shared/src/keyboard/keyboard-layout.enum.ts
new file mode 100644
index 00000000..af30ba9c
--- /dev/null
+++ b/shared/src/keyboard/keyboard-layout.enum.ts
@@ -0,0 +1,4 @@
+export enum KeyboardLayout {
+    ANSI,
+    ISO
+}
diff --git a/shared/src/services/svg-module-provider.service.ts b/shared/src/services/svg-module-provider.service.ts
new file mode 100644
index 00000000..7ceaa074
--- /dev/null
+++ b/shared/src/services/svg-module-provider.service.ts
@@ -0,0 +1,36 @@
+import { Injectable } from '@angular/core';
+
+import { SvgModule } from '../components/svg/module';
+import { KeyboardLayout } from '../keyboard/keyboard-layout.enum';
+
+@Injectable()
+export class SvgModuleProviderService {
+
+    private ansiLeft: SvgModule;
+    private isoLeft: SvgModule;
+    private right: SvgModule;
+
+    getSvgModules(layout = KeyboardLayout.ANSI): SvgModule[] {
+        return [this.getRightModule(), this.getLeftModule(layout)];
+    }
+
+    private getLeftModule(layout = KeyboardLayout.ANSI): SvgModule {
+        if (layout === KeyboardLayout.ISO) {
+            if (!this.isoLeft) {
+                this.isoLeft = new SvgModule(require('xml-loader!../../../modules/uhk60-left-half/layout-iso.svg').svg);
+            }
+            return this.isoLeft;
+        }
+        if (!this.ansiLeft) {
+            this.ansiLeft = new SvgModule(require('xml-loader!../../../modules/uhk60-left-half/layout-ansi.svg').svg);
+        }
+        return this.ansiLeft;
+    }
+
+    private getRightModule(): SvgModule {
+        if (!this.right) {
+            this.right = new SvgModule(require('xml-loader!../../../modules/uhk60-right-half/layout.svg').svg);
+        }
+        return this.right;
+    }
+}
diff --git a/web/src/app.module.ts b/web/src/app.module.ts
index eb5d273c..d4249305 100644
--- a/web/src/app.module.ts
+++ b/web/src/app.module.ts
@@ -67,6 +67,7 @@ import { SafeStylePipe } from './shared/pipes';
 
 import { CaptureService } from './shared/services/capture.service';
 import { MapperService } from './shared/services/mapper.service';
+import { SvgModuleProviderService } from './shared/services/svg-module-provider.service';
 
 import { KeymapEffects, MacroEffects, UserConfigEffects } from './shared/store/effects';
 
@@ -149,6 +150,7 @@ import { reducer } from '../../shared/src/store/reducers/index';
         EffectsModule.runAfterBootstrap(UserConfigEffects)
     ],
     providers: [
+        SvgModuleProviderService,
         MapperService,
         appRoutingProviders,
         KeymapEditGuard,