diff --git a/cypress/integration/rendering/erDiagram.spec.js b/cypress/integration/rendering/erDiagram.spec.js
index 78a34febc..fc93fb5bb 100644
--- a/cypress/integration/rendering/erDiagram.spec.js
+++ b/cypress/integration/rendering/erDiagram.spec.js
@@ -114,7 +114,7 @@ describe('Entity Relationship Diagram', () => {
     cy.get('svg')
       .should((svg) => {
         expect(svg).to.have.attr('width', '100%');
-        expect(svg).to.have.attr('height', '100%');
+        expect(svg).to.have.attr('height', '465');
         const style = svg.attr('style');
         expect(style).to.match(/^max-width: [\d.]+px;$/);
         const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
@@ -174,7 +174,7 @@ describe('Entity Relationship Diagram', () => {
     renderGraph(
       `
     erDiagram
-        PRIVATE_FINANCIAL_INSTITUTION {
+        PRIVATE_FINANCIAL_INSTITUTION { 
           string name
           int    turnover
         }
diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js
index d2548a409..af83eb555 100644
--- a/cypress/integration/rendering/flowchart-v2.spec.js
+++ b/cypress/integration/rendering/flowchart-v2.spec.js
@@ -94,7 +94,10 @@ describe('Flowchart v2', () => {
     cy.get('svg')
       .should((svg) => {
         expect(svg).to.have.attr('width', '100%');
-        expect(svg).to.have.attr('height', '100%');
+        expect(svg).to.have.attr('height');
+        // use within because the absolute value can be slightly different depending on the environment ±5%
+        const height = parseFloat(svg.attr('height'));
+        expect(height).to.be.within(446 * .95, 446 * 1.05);
         const style = svg.attr('style');
         expect(style).to.match(/^max-width: [\d.]+px;$/);
         const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
diff --git a/cypress/integration/rendering/flowchart.spec.js b/cypress/integration/rendering/flowchart.spec.js
index 2560b7827..4c9056711 100644
--- a/cypress/integration/rendering/flowchart.spec.js
+++ b/cypress/integration/rendering/flowchart.spec.js
@@ -745,7 +745,10 @@ describe('Graph', () => {
     cy.get('svg')
       .should((svg) => {
         expect(svg).to.have.attr('width', '100%');
-        expect(svg).to.have.attr('height', '100%');
+        expect(svg).to.have.attr('height');
+        // use within because the absolute value can be slightly different depending on the environment ±5%
+        const height = parseFloat(svg.attr('height'));
+        expect(height).to.be.within(446 * .95, 446 * 1.05);
         const style = svg.attr('style');
         expect(style).to.match(/^max-width: [\d.]+px;$/);
         const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
diff --git a/cypress/integration/rendering/gantt.spec.js b/cypress/integration/rendering/gantt.spec.js
index 1dcaf1747..0ac1e0f1f 100644
--- a/cypress/integration/rendering/gantt.spec.js
+++ b/cypress/integration/rendering/gantt.spec.js
@@ -202,7 +202,10 @@ describe('Gantt diagram', () => {
     cy.get('svg')
       .should((svg) => {
         expect(svg).to.have.attr('width', '100%');
-        expect(svg).to.have.attr('height', '100%');
+        expect(svg).to.have.attr('height');
+        // use within because the absolute value can be slightly different depending on the environment ±5%
+        const height = parseFloat(svg.attr('height'));
+        expect(height).to.be.within(484 * .95, 484 * 1.05);
         const style = svg.attr('style');
         expect(style).to.match(/^max-width: [\d.]+px;$/);
         const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
diff --git a/cypress/integration/rendering/pie.spec.js b/cypress/integration/rendering/pie.spec.js
index 726fabbd3..bbedb9ebd 100644
--- a/cypress/integration/rendering/pie.spec.js
+++ b/cypress/integration/rendering/pie.spec.js
@@ -50,7 +50,9 @@ describe('Pie Chart', () => {
     cy.get('svg')
       .should((svg) => {
         expect(svg).to.have.attr('width', '100%');
-        expect(svg).to.have.attr('height', '100%');
+        expect(svg).to.have.attr('height');
+        const height = parseFloat(svg.attr('height'));
+        expect(height).to.eq(450);
         const style = svg.attr('style');
         expect(style).to.match(/^max-width: [\d.]+px;$/);
         const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
diff --git a/cypress/integration/rendering/sequencediagram.spec.js b/cypress/integration/rendering/sequencediagram.spec.js
index ba5e4cf20..5cc2cfcd9 100644
--- a/cypress/integration/rendering/sequencediagram.spec.js
+++ b/cypress/integration/rendering/sequencediagram.spec.js
@@ -635,7 +635,9 @@ context('Sequence diagram', () => {
       cy.get('svg')
         .should((svg) => {
           expect(svg).to.have.attr('width', '100%');
-          expect(svg).to.have.attr('height', '100%');
+          expect(svg).to.have.attr('height');
+          const height = parseFloat(svg.attr('height'));
+          expect(height).to.be.within(920, 960);
           const style = svg.attr('style');
           expect(style).to.match(/^max-width: [\d.]+px;$/);
           const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
diff --git a/cypress/integration/rendering/stateDiagram-v2.spec.js b/cypress/integration/rendering/stateDiagram-v2.spec.js
index 5dd502f28..d72ca0b90 100644
--- a/cypress/integration/rendering/stateDiagram-v2.spec.js
+++ b/cypress/integration/rendering/stateDiagram-v2.spec.js
@@ -450,7 +450,9 @@ stateDiagram-v2
     cy.get('svg')
       .should((svg) => {
         expect(svg).to.have.attr('width', '100%');
-        expect(svg).to.have.attr('height', '100%');
+        expect(svg).to.have.attr('height');
+        const height = parseFloat(svg.attr('height'));
+        expect(height).to.be.within(177, 178);
         const style = svg.attr('style');
         expect(style).to.match(/^max-width: [\d.]+px;$/);
         const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
diff --git a/cypress/integration/rendering/stateDiagram.spec.js b/cypress/integration/rendering/stateDiagram.spec.js
index 5790aeb0c..971470a75 100644
--- a/cypress/integration/rendering/stateDiagram.spec.js
+++ b/cypress/integration/rendering/stateDiagram.spec.js
@@ -356,7 +356,9 @@ describe('State diagram', () => {
     cy.get('svg')
       .should((svg) => {
         expect(svg).to.have.attr('width', '100%');
-        expect(svg).to.have.attr('height', '100%');
+        expect(svg).to.have.attr('height');
+        const height = parseFloat(svg.attr('height'));
+        expect(height).to.be.within(176,178);
         const style = svg.attr('style');
         expect(style).to.match(/^max-width: [\d.]+px;$/);
         const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
diff --git a/src/utils.js b/src/utils.js
index 09520b9cb..96306f189 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -778,13 +778,12 @@ const d3Attrs = function (d3Elem, attrs) {
 
 export const calculateSvgSizeAttrs = function (height, width, useMaxWidth) {
   let attrs = new Map();
+  attrs.set('height', height);
   if (useMaxWidth) {
     attrs.set('width', '100%');
-    attrs.set('height', '100%');
     attrs.set('style', `max-width: ${width}px;`);
   } else {
     attrs.set('width', width);
-    attrs.set('height', height);
   }
   return attrs;
 };
diff --git a/src/utils.spec.js b/src/utils.spec.js
index 65b861d86..c490099dd 100644
--- a/src/utils.spec.js
+++ b/src/utils.spec.js
@@ -243,7 +243,7 @@ describe('when formatting urls', function() {
 describe('when calculating SVG size', function() {
   it('should return width 100% when useMaxWidth is true', function () {
     const attrs = utils.calculateSvgSizeAttrs(100, 200, true);
-    expect(attrs.get('height')).toEqual('100%');
+    expect(attrs.get('height')).toEqual(100);
     expect(attrs.get('style')).toEqual('max-width: 200px;');
     expect(attrs.get('width')).toEqual('100%');
   });