diff --git a/src-web/components/responseViewers/SvgViewer.tsx b/src-web/components/responseViewers/SvgViewer.tsx
index 78202975..fa599ba0 100644
--- a/src-web/components/responseViewers/SvgViewer.tsx
+++ b/src-web/components/responseViewers/SvgViewer.tsx
@@ -1,5 +1,5 @@
 import type { HttpResponse } from '@yaakapp-internal/models';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { useResponseBodyText } from '../../hooks/useResponseBodyText';
 
 interface Props {
@@ -8,7 +8,23 @@ interface Props {
 
 export function SvgViewer({ response }: Props) {
   const rawTextBody = useResponseBodyText(response);
-  if (rawTextBody.data == null) return null;
-  const src = `data:image/svg+xml;base64,${btoa(rawTextBody.data)}`;
+  const [src, setSrc] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!rawTextBody.data) {
+      return setSrc(null);
+    }
+
+    const blob = new Blob([rawTextBody.data], { type: 'image/svg+xml;charset=utf-8' });
+    const url = URL.createObjectURL(blob);
+    setSrc(url);
+
+    return () => URL.revokeObjectURL(url);
+  }, [rawTextBody.data]);
+
+  if (src == null) {
+    return null;
+  }
+
   return <img src={src} alt="Response preview" className="max-w-full max-h-full pb-2" />;
 }