diff --git a/src/Components/SVG/Elements/Container.tsx b/src/Components/SVG/Elements/Container.tsx
index c3bce70..300984e 100644
--- a/src/Components/SVG/Elements/Container.tsx
+++ b/src/Components/SVG/Elements/Container.tsx
@@ -59,7 +59,7 @@ export function Container(props: IContainerProps): JSX.Element {
     </rect>);
   // Dimension props
   const depth = GetDepth(props.model);
-  const dimensionMargin = DIMENSION_MARGIN * depth;
+  const dimensionMargin = DIMENSION_MARGIN * depth / props.scale;
   const id = `dim-${props.model.properties.id}`;
   const xStart: number = 0;
   const xEnd = width;
diff --git a/src/Components/SVG/Elements/DepthDimensionLayer.tsx b/src/Components/SVG/Elements/DepthDimensionLayer.tsx
index 0c5d625..884b4ee 100644
--- a/src/Components/SVG/Elements/DepthDimensionLayer.tsx
+++ b/src/Components/SVG/Elements/DepthDimensionLayer.tsx
@@ -70,7 +70,7 @@ function AddNewDimension(currentDepth: number, min: number, max: number, lastY:
   const id = `dim-depth-${currentDepth}`;
   const xStart = min;
   const xEnd = max;
-  const y = lastY + (DIMENSION_MARGIN * (currentDepth + 1));
+  const y = (lastY + (DIMENSION_MARGIN * (currentDepth + 1))) / scale;
   const strokeWidth = 1;
   const width = xEnd - xStart;
   const text = width
diff --git a/src/Components/SVG/Elements/Symbol.tsx b/src/Components/SVG/Elements/Symbol.tsx
index 1d200cd..6a971de 100644
--- a/src/Components/SVG/Elements/Symbol.tsx
+++ b/src/Components/SVG/Elements/Symbol.tsx
@@ -5,6 +5,7 @@ import { DIMENSION_MARGIN } from '../../../utils/default';
 
 interface ISymbolProps {
   model: ISymbolModel
+  scale: number
 }
 
 export function Symbol(props: ISymbolProps): JSX.Element {
@@ -15,7 +16,7 @@ export function Symbol(props: ISymbolProps): JSX.Element {
     return (
       <g
         x={props.model.x}
-        y={-DIMENSION_MARGIN}
+        y={-DIMENSION_MARGIN / props.scale}
       >
         <Interweave
           noWrap={true}
@@ -30,7 +31,7 @@ export function Symbol(props: ISymbolProps): JSX.Element {
     <image
       href={href}
       x={props.model.x}
-      y={-DIMENSION_MARGIN}
+      y={-DIMENSION_MARGIN / props.scale}
       height={props.model.height}
       width={props.model.width} />
   );
diff --git a/src/Components/SVG/Elements/SymbolLayer.tsx b/src/Components/SVG/Elements/SymbolLayer.tsx
index cd9e47d..8969550 100644
--- a/src/Components/SVG/Elements/SymbolLayer.tsx
+++ b/src/Components/SVG/Elements/SymbolLayer.tsx
@@ -4,13 +4,18 @@ import { Symbol } from './Symbol';
 
 interface ISymbolLayerProps {
   symbols: Map<string, ISymbolModel>
+  scale: number
 }
 
 export function SymbolLayer(props: ISymbolLayerProps): JSX.Element {
   const symbols: JSX.Element[] = [];
   props.symbols.forEach((symbol) => {
     symbols.push(
-      <Symbol key={`symbol-${symbol.id}`} model={symbol} />
+      <Symbol
+        key={`symbol-${symbol.id}`}
+        model={symbol}
+        scale={props.scale}
+      />
     );
   });
   return (
diff --git a/src/Components/SVG/SVG.tsx b/src/Components/SVG/SVG.tsx
index 958f410..ecbed84 100644
--- a/src/Components/SVG/SVG.tsx
+++ b/src/Components/SVG/SVG.tsx
@@ -132,7 +132,7 @@ export function SVG(props: ISVGProps): JSX.Element {
           {SHOW_DIMENSIONS_PER_DEPTH
             ? <DepthDimensionLayer scale={scale} roots={props.children} />
             : null}
-          <SymbolLayer symbols={props.symbols} />
+          <SymbolLayer scale={scale} symbols={props.symbols} />
           <Selector scale={scale} selected={props.selected} /> {/* leave this at the end so it can be removed during the svg export */}
         </svg>
       </ReactSVGPanZoom>