diff --git a/themes/42/layouts/_partials/media/render-image.html b/themes/42/layouts/_partials/media/render-image.html
index 5ade2e77..93fae273 100644
--- a/themes/42/layouts/_partials/media/render-image.html
+++ b/themes/42/layouts/_partials/media/render-image.html
@@ -11,7 +11,7 @@
 {{- $description := default $data.description | default $title -}}
 {{- $image := .Page.Resources.GetMatch $imgPath -}}
 {{- $display := $image }}
-{{- if gt $display.Height 810 }}
+{{- if and $display (ne $display.MediaType.SubType "svg") (gt $display.Height 810) }}
 {{- $display = $image.Resize "x810" -}}
 {{- end }}
 <figure>
@@ -38,4 +38,4 @@
     </p>
     {{- end }}
     {{- end }}
-</figure>
\ No newline at end of file
+</figure>
diff --git a/tools/generate_mermaid_diagrams.js b/tools/generate_mermaid_diagrams.js
index 3734ef49..3f683b11 100644
--- a/tools/generate_mermaid_diagrams.js
+++ b/tools/generate_mermaid_diagrams.js
@@ -149,7 +149,7 @@ async function ensurePuppeteerConfig() {
 
 async function renderMermaidDiagram(inputPath, outputPath) {
   const cliPath = getMermaidCliPath();
-  const args = ['-i', inputPath, '-o', outputPath];
+  const args = ['-i', inputPath, '-o', outputPath, '-e', 'png'];
   const env = { ...process.env };
 
   const executablePath = resolvePuppeteerExecutablePath();
@@ -206,7 +206,7 @@ async function generateDiagrams(bundlePath) {
     }
 
     const relativePath = path.relative(diagramsRoot, mermaidFile);
-    const outputRelative = relativePath.replace(/\.mermaid$/i, '.svg');
+    const outputRelative = relativePath.replace(/\.mermaid$/i, '.png');
     const outputPath = path.join(bundlePath, OUTPUT_DIR, outputRelative);
 
     await ensureDirectory(path.dirname(outputPath));