fix(core): adapt blob in sqlite for svg type (#4845)

packages/frontend/workspace/src/blob/cloud-blob-storage.ts

@@ -24,6 +24,7 @@ export const createCloudBlobStorage = (workspaceId: string): BlobStorage => {
             // status not in the range 200-299
             return null;
           }
+          // todo: shall we add svg type here if it is missing?
           return res.blob();
         });
       },

packages/frontend/workspace/src/blob/sqlite-blob-storage.ts

@@ -1,6 +1,8 @@
 import { assertExists } from '@blocksuite/global/utils';
 import type { BlobStorage } from '@blocksuite/store';
 
+import { isSvgBuffer } from './util';
+
 export const createSQLiteStorage = (workspaceId: string): BlobStorage => {
   const apis = window.apis;
   assertExists(apis);
@@ -8,7 +10,14 @@ export const createSQLiteStorage = (workspaceId: string): BlobStorage => {
     crud: {
       get: async (key: string) => {
         const buffer = await apis.db.getBlob(workspaceId, key);
-        return buffer ? new Blob([buffer]) : null;
+        if (buffer) {
+          const isSVG = isSvgBuffer(buffer);
+          // for svg blob, we need to explicitly set the type to image/svg+xml
+          return isSVG
+            ? new Blob([buffer], { type: 'image/svg+xml' })
+            : new Blob([buffer]);
+        }
+        return null;
       },
       set: async (key: string, value: Blob) => {
         await apis.db.addBlob(

packages/frontend/workspace/src/blob/util.ts

@@ -0,0 +1,9 @@
+import isSvg from 'is-svg';
+
+// this has a overhead of converting to string for testing if it is svg.
+// is there a more performant way?
+export function isSvgBuffer(buffer: Uint8Array) {
+  const decoder = new TextDecoder('utf-8');
+  const str = decoder.decode(buffer);
+  return isSvg(str);
+}