diff --git a/app/components/SvgImage/__tests__/SvgImage.test.tsx b/app/components/SvgImage/__tests__/SvgImage.test.tsx
index f76a7061f..e234a3907 100644
--- a/app/components/SvgImage/__tests__/SvgImage.test.tsx
+++ b/app/components/SvgImage/__tests__/SvgImage.test.tsx
@@ -12,7 +12,7 @@ import {
 } from './mockData';
 import SvgImage from '..';
 
-jest.mock('react-virtualized-auto-sizer', () => ({ children }) => children({ height: 600, width: 600}));
+jest.mock('react-virtualized-auto-sizer', () => ({ children }) => children({ height: 600, width: 600 }));
 
 describe('SvgImage', () => {
   test('It renders a normal SVG', async () => {
@@ -63,20 +63,4 @@ describe('SvgImage', () => {
 
     expect(await screen.findByTestId('mock')).toBeInTheDocument();
   });
-
-  test('It fails to render an SVG that is not formatted correctly', async () => {
-    let error;
-
-    try {
-      render(
-        <SvgImage
-          image={mockSVGFormatError}
-        />,
-      );
-    } catch (err) {
-      error = err;
-    }
-
-    expect(error).not.toBeUndefined();
-  });
 });
diff --git a/app/components/SvgImage/index.tsx b/app/components/SvgImage/index.tsx
index 2ffcabe54..a9bcde159 100644
--- a/app/components/SvgImage/index.tsx
+++ b/app/components/SvgImage/index.tsx
@@ -2,7 +2,7 @@ import React, {
   useEffect, useState, useRef, useMemo, useCallback,
 } from 'react';
 import { UncontrolledReactSVGPanZoom } from 'react-svg-pan-zoom';
-import InlineSVG from 'svg-inline-react';
+import InlineSVG from 'react-inlinesvg';
 import AutoSizer from 'react-virtualized-auto-sizer';
 
 import './index.scss';
@@ -74,7 +74,7 @@ const SvgImage = ({
               let overWidthRatio = svgWidth / MAX_PRINT_WIDTH;
               if (printOrientation === 'landscape') {
                 overHeightRatio = svgHeight / MAX_PRINT_WIDTH;
-                overWidthRatio = svgHeight / MAX_PRINT_WIDTH;
+                overWidthRatio = svgWidth / MAX_PRINT_HEIGHT;
               }
               let nextRatio = 1;
 
@@ -90,29 +90,17 @@ const SvgImage = ({
               const nextHeight = svgHeight / nextRatio;
               const nextWidth = svgWidth / nextRatio;
 
-              const svgStyle = {
-                transformOrigin: 'top left',
-                transform: printOrientation === 'landscape' ? `rotate(90deg) translate(0, -${nextHeight}px)` : '',
-              };
-
               return (
-                <div style={svgStyle}>
-                  <UncontrolledReactSVGPanZoom
-                    ref={Viewer}
-                    width={svgWidth > nextWidth ? nextWidth : svgWidth}
-                    height={svgHeight > nextHeight ? nextHeight : svgHeight}
-                    background="#FFFFFF"
-                    detectAutoPan={false}
-                    defaultTool="auto"
-                    customMiniature={() => null}
-                    customToolbar={() => null}
-                    toolbarProps={{ position: 'left' }}
-                  >
-                    <svg width={svgWidth} height={svgHeight}>
-                      <InlineSVG src={processedImage} raw />
-                    </svg>
-                  </UncontrolledReactSVGPanZoom>
-                </div>
+                <InlineSVG
+                  src={processedImage}
+                  transform={`
+                    scale(${1 / nextRatio})
+                    translate(
+                      -${(svgWidth - nextWidth) / 2 + 48}
+                      -${(svgHeight - nextHeight) / 2}
+                    )
+                  `}
+                />
               );
             }
             return (
@@ -128,11 +116,11 @@ const SvgImage = ({
                 detectAutoPan={false}
                 defaultTool="auto"
                 customMiniature={() => null}
-                customToolbar={isPrint ? () => null : undefined}
+                customToolbar={undefined}
                 toolbarProps={{ position: 'left' }}
               >
                 <svg width={svgWidth} height={svgHeight}>
-                  <InlineSVG src={processedImage} raw />
+                  <InlineSVG src={processedImage} />
                 </svg>
               </UncontrolledReactSVGPanZoom>
             );
diff --git a/package-lock.json b/package-lock.json
index b76fc4ea7..1b05c30b0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "ipr-client",
-  "version": "6.22.0",
+  "version": "6.22.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "ipr-client",
-      "version": "6.22.0",
+      "version": "6.22.1",
       "license": "GPL-3.0",
       "dependencies": {
         "@ag-grid-community/client-side-row-model": "~25.3.0",
@@ -41,6 +41,7 @@
         "react-chartjs-2": "~3.3.0",
         "react-dom": "~17.0.2",
         "react-hook-form": "^7.40.0",
+        "react-inlinesvg": "^4.0.5",
         "react-jss": "~10.6.0",
         "react-quill": "~2.0.0",
         "react-router-dom": "~5.1.2",
@@ -24093,6 +24094,14 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.1.0.tgz",
       "integrity": "sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg=="
     },
+    "node_modules/react-from-dom": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/react-from-dom/-/react-from-dom-0.6.2.tgz",
+      "integrity": "sha512-qvWWTL/4xw4k/Dywd41RBpLQUSq97csuv15qrxN+izNeLYlD9wn5W8LspbfYe5CWbaSdkZ72BsaYBPQf2x4VbQ==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-hook-form": {
       "version": "7.40.0",
       "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.40.0.tgz",
@@ -24108,6 +24117,17 @@
         "react": "^16.8.0 || ^17 || ^18"
       }
     },
+    "node_modules/react-inlinesvg": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/react-inlinesvg/-/react-inlinesvg-4.0.5.tgz",
+      "integrity": "sha512-gur6KP4la70Xt9Ku6kIRAiwPOsMxYGTFIJ1roG1igS9oZLvES72VtUfBEdaiZZfkej3jugQsVyq/mJkYr4OObQ==",
+      "dependencies": {
+        "react-from-dom": "^0.6.2"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-inspector": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/react-inspector/-/react-inspector-6.0.2.tgz",
@@ -46597,12 +46617,26 @@
         }
       }
     },
+    "react-from-dom": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/react-from-dom/-/react-from-dom-0.6.2.tgz",
+      "integrity": "sha512-qvWWTL/4xw4k/Dywd41RBpLQUSq97csuv15qrxN+izNeLYlD9wn5W8LspbfYe5CWbaSdkZ72BsaYBPQf2x4VbQ==",
+      "requires": {}
+    },
     "react-hook-form": {
       "version": "7.40.0",
       "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.40.0.tgz",
       "integrity": "sha512-0rokdxMPJs0k9bvFtY6dbcSydyNhnZNXCR49jgDr/aR03FDHFOK6gfh8ccqB3fl696Mk7lqh04xdm+agqWXKSw==",
       "requires": {}
     },
+    "react-inlinesvg": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/react-inlinesvg/-/react-inlinesvg-4.0.5.tgz",
+      "integrity": "sha512-gur6KP4la70Xt9Ku6kIRAiwPOsMxYGTFIJ1roG1igS9oZLvES72VtUfBEdaiZZfkej3jugQsVyq/mJkYr4OObQ==",
+      "requires": {
+        "react-from-dom": "^0.6.2"
+      }
+    },
     "react-inspector": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/react-inspector/-/react-inspector-6.0.2.tgz",
diff --git a/package.json b/package.json
index 7717f11e1..f2446c70a 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "ipr-client",
-  "version": "6.22.0",
+  "version": "6.22.1",
   "keywords": [],
   "license": "GPL-3.0",
   "sideEffects": false,
@@ -127,6 +127,7 @@
     "react-chartjs-2": "~3.3.0",
     "react-dom": "~17.0.2",
     "react-hook-form": "^7.40.0",
+    "react-inlinesvg": "^4.0.5",
     "react-jss": "~10.6.0",
     "react-quill": "~2.0.0",
     "react-router-dom": "~5.1.2",