Fix svg rendering

package.json

@@ -1,7 +1,7 @@
 {
     "name": "ramp-storylines_demo-scenarios-pcar",
     "description": "A user-configurable story product featuring interactive maps, charts and dynamic multimedia content alongside text.",
-    "version": "3.2.8",
+    "version": "3.2.9",
     "private": false,
     "license": "MIT",
     "repository": "https://github.com/ramp4-pcar4/story-ramp",

src/components/panels/image-panel.vue

@@ -75,11 +75,20 @@ onMounted((): void => {
         const image = props.config;
         const assetSrc = `${image.src.substring(image.src.indexOf('/') + 1)}`;
         const imageFile = props.configFileStructure?.zip.file(assetSrc);
+        const imageType = assetSrc.split('.').at(-1);
+        const imageName = image.src.replace(/^.*[\\/]/, '');
         if (imageFile) {
             // Convert the image to a blob so it can be displayed locally.
-            imageFile.async('blob').then((res: Blob) => {
-                state.src = props.config.src = URL.createObjectURL(res);
-            });
+            if (imageType !== 'svg') {
+                imageFile.async('blob').then((res: Blob) => {
+                    state.src = props.config.src = URL.createObjectURL(res);
+                });
+            } else {
+                imageFile.async('text').then((res) => {
+                    const image = new File([res], imageName, { type: 'image/svg+xml' });
+                    state.src = props.config.src = URL.createObjectURL(image);
+                });
+            }
         }
     }
 

src/components/story/background-image.vue

@@ -129,16 +129,26 @@ const getImageSource = (src: string): Promise<string> => {
         if (props.configFileStructure) {
             const assetSrc = `${src.substring(src.indexOf('/') + 1)}`;
             const imageFile = props.configFileStructure?.zip.file(assetSrc);
+            const imageType = assetSrc.split('.').at(-1);
+            const imageName = src.replace(/^.*[\\/]/, '');
             if (imageFile) {
-                // Convert the image to a blob so it can be displayed locally.
-                imageFile.async('blob').then((res: Blob) => {
-                    const blob = URL.createObjectURL(res);
+                if (imageType !== 'svg') {
+                    // Convert the image to a blob so it can be displayed locally.
+                    imageFile.async('blob').then((res: Blob) => {
+                        const blob = URL.createObjectURL(res);
 
-                    // Assign to blobStore and return the result.
-                    blobStore[src] = blob;
-                    resolve(blobStore[src]);
-                    return;
-                });
+                        // Assign to blobStore and return the result.
+                        blobStore[src] = blob;
+                        resolve(blobStore[src]);
+                        return;
+                    });
+                } else {
+                    imageFile.async('text').then((res) => {
+                        const image = new File([res], imageName, { type: 'image/svg+xml' });
+                        resolve(URL.createObjectURL(image));
+                        return;
+                    });
+                }
             } else {
                 resolve(src);
                 return;

src/components/story/introduction.vue

@@ -103,7 +103,6 @@ const state = reactive({
 onMounted(() => {
     state.logo = props.config.logo ? props.config.logo.src : '';
     state.backgroundImage = props.config.backgroundImage ?? '';
-
     // obtain logo and background image from ZIP file if it exists
     if (props.configFileStructure) {
         const logo = props.config.logo?.src;
@@ -112,20 +111,38 @@ onMounted(() => {
         if (logo) {
             const logoSrc = `${logo.substring(logo.indexOf('/') + 1)}`;
             const logoFile = props.configFileStructure.zip.file(logoSrc);
+            const logoType = logoSrc.split('.').at(-1);
+            const logoName = logo.replace(/^.*[\\/]/, '');
             if (logoFile) {
-                logoFile.async('blob').then((res: Blob) => {
-                    state.logo = props.config.logo.src = URL.createObjectURL(res);
-                });
+                if (logoType !== 'svg') {
+                    logoFile.async('blob').then((res: Blob) => {
+                        state.logo = props.config.logo.src = URL.createObjectURL(res);
+                    });
+                } else {
+                    logoFile.async('text').then((res) => {
+                        const image = new File([res], logoName, { type: 'image/svg+xml' });
+                        state.logo = props.config.logo.src = URL.createObjectURL(image);
+                    });
+                }
             }
         }
 
         if (background) {
             const bgSrc = `${background.substring(background.indexOf('/') + 1)}`;
             const bgFile = props.configFileStructure.zip.file(bgSrc);
+            const bgType = bgSrc.split('.').at(-1);
+            const bgName = logo.replace(/^.*[\\/]/, '');
             if (bgFile) {
-                bgFile.async('blob').then((res: Blob) => {
-                    state.backgroundImage = props.config.backgroundImage = URL.createObjectURL(res);
-                });
+                if (bgType !== 'svg') {
+                    bgFile.async('blob').then((res: Blob) => {
+                        state.backgroundImage = props.config.backgroundImage = URL.createObjectURL(res);
+                    });
+                } else {
+                    bgFile.async('blob').then((res: Blob) => {
+                        const image = new File([res], bgName, { type: 'image/svg+xml' });
+                        state.backgroundImage = props.config.backgroundImage = URL.createObjectURL(image);
+                    });
+                }
             }
         }
     }