feat: Adds converting SVG images to PNG

Ensures that SVG images are converted to PNG format before being stored in the database and displayed in the chat interface.

This improves compatibility with systems that may not fully support SVG rendering and addresses potential security concerns related to SVG files.

Handles cases where SVG to PNG conversion fails gracefully, preventing application errors.

Author: allozaur

tools/server/webui/src/lib/components/chat/ChatScreen.svelte

@@ -14,6 +14,7 @@
 	import type { ChatUploadedFile } from '$lib/types/chat.d.ts';
 	import type { DatabaseMessageExtra } from '$lib/types/database.d.ts';
 	import { isLikelyTextFile, isTextFileByName, readFileAsText } from '$lib/utils/text-files';
+	import { svgBase64UrlToPngDataURL, isSvgMimeType } from '$lib/utils/svg-to-png';
 
 	let { showCenteredEmpty = false } = $props();
 	let chatScrollContainer: HTMLDivElement | undefined = $state();
@@ -63,10 +64,23 @@
 		for (const file of files) {
 			if (file.type.startsWith('image/')) {
 				if (file.preview) {
+					let base64Url = file.preview;
+
+					if (isSvgMimeType(file.type)) {
+						try {
+							base64Url = await svgBase64UrlToPngDataURL(base64Url);
+						} catch (error) {
+							console.error(
+								'Failed to convert SVG to PNG for database storage:',
+								error
+							);
+						}
+					}
+
 					extras.push({
 						type: 'imageFile',
 						name: file.name,
-						base64Url: file.preview
+						base64Url
 					});
 				}
 			} else {
@@ -141,8 +155,20 @@
 
 			if (file.type.startsWith('image/')) {
 				const reader = new FileReader();
-				reader.onload = (e) => {
-					uploadedFile.preview = e.target?.result as string;
+				reader.onload = async (e) => {
+					let preview = e.target?.result as string;
+
+					// Convert SVG to PNG if necessary
+					if (isSvgMimeType(file.type)) {
+						try {
+							preview = await svgBase64UrlToPngDataURL(preview);
+						} catch (error) {
+							console.error('Failed to convert SVG to PNG:', error);
+							// Use original SVG preview if conversion fails
+						}
+					}
+
+					uploadedFile.preview = preview;
 					uploadedFiles = [...uploadedFiles, uploadedFile];
 				};
 				reader.readAsDataURL(file);

tools/server/webui/src/lib/utils/svg-to-png.ts

@@ -0,0 +1,55 @@
+export function svgBase64UrlToPngDataURL(
+	base64UrlSvg: string,
+	backgroundColor: string = 'white'
+): Promise<string> {
+	return new Promise((resolve, reject) => {
+		try {
+			const img = new Image();
+
+			img.onload = () => {
+				const canvas = document.createElement('canvas');
+				const ctx = canvas.getContext('2d');
+
+				if (!ctx) {
+					reject(new Error('Failed to get 2D canvas context.'));
+					return;
+				}
+
+				const targetWidth = img.naturalWidth || 300;
+				const targetHeight = img.naturalHeight || 300;
+
+				canvas.width = targetWidth;
+				canvas.height = targetHeight;
+
+				if (backgroundColor) {
+					ctx.fillStyle = backgroundColor;
+					ctx.fillRect(0, 0, canvas.width, canvas.height);
+				}
+				ctx.drawImage(img, 0, 0, targetWidth, targetHeight);
+				
+				resolve(canvas.toDataURL('image/png'));
+			};
+
+			img.onerror = () => {
+				reject(
+					new Error('Failed to load SVG image. Ensure the SVG data is valid.')
+				);
+			};
+
+			img.src = base64UrlSvg;
+		} catch (error) {
+			const message = error instanceof Error ? error.message : String(error);
+			const errorMessage = `Error converting SVG to PNG: ${message}`;
+			console.error(errorMessage, error);
+			reject(new Error(errorMessage));
+		}
+	});
+}
+
+export function isSvgFile(file: File): boolean {
+	return file.type === 'image/svg+xml';
+}
+
+export function isSvgMimeType(mimeType: string): boolean {
+	return mimeType === 'image/svg+xml';
+}