lod: dont transform SVGs (#3972)

Describe what your pull request does. If appropriate, add GIFs or images
showing the before and after.

### Change Type

<!-- ❗ Please select a 'Scope' label ❗️ -->

- [ ] `sdk` — Changes the tldraw SDK
- [x] `dotcom` — Changes the tldraw.com web app
- [ ] `docs` — Changes to the documentation, examples, or templates.
- [ ] `vs code` — Changes to the vscode plugin
- [ ] `internal` — Does not affect user-facing stuff

<!-- ❗ Please select a 'Type' label ❗️ -->

- [ ] `bugfix` — Bug fix
- [ ] `feature` — New feature
- [x] `improvement` — Improving existing features
- [ ] `chore` — Updating dependencies, other boring stuff
- [ ] `galaxy brain` — Architectural changes
- [ ] `tests` — Changes to any test code
- [ ] `tools` — Changes to infrastructure, CI, internal scripts,
debugging tools, etc.
- [ ] `dunno` — I don't know

apps/dotcom/src/utils/assetHandler.test.ts

@@ -100,6 +100,26 @@ describe('resolveAsset', () => {
 		).toBe('http://example.com/animated.gif')
 	})
 
+	it('should return the original src if it is a vector image', async () => {
+		const asset = {
+			type: 'image',
+			props: {
+				src: 'http://example.com/vector.svg',
+				mimeType: 'image/svg+xml',
+				w: 100,
+				fileSize: FILE_SIZE,
+			},
+		}
+		expect(
+			await resolver(asset as TLAsset, {
+				screenScale: -1,
+				steppedScreenScale: 1,
+				dpr: 1,
+				networkEffectiveType: '4g',
+			})
+		).toBe('http://example.com/vector.svg')
+	})
+
 	it('should return the original src if it is under a certain file size', async () => {
 		const asset = {
 			type: 'image',

apps/dotcom/src/utils/assetHandler.ts

@@ -41,6 +41,9 @@ export const resolveAsset =
 		if (MediaHelpers.isAnimatedImageType(asset?.props.mimeType) || asset.props.isAnimated)
 			return asset.props.src
 
+		// Don't try to transform vector images.
+		if (MediaHelpers.isVectorImageType(asset?.props.mimeType)) return asset.props.src
+
 		// Assets that are under a certain file size aren't worth transforming (and incurring cost).
 		if (asset.props.fileSize === -1 || asset.props.fileSize < 1024 * 1024 * 1.5 /* 1.5 MB */)
 			return asset.props.src

packages/utils/api-report.md

@@ -240,6 +240,8 @@ export class MediaHelpers {
     static isImageType(mimeType: string): boolean;
     // (undocumented)
     static isStaticImageType(mimeType: null | string): boolean;
+    // (undocumented)
+    static isVectorImageType(mimeType: null | string): boolean;
     static loadImage(src: string): Promise<HTMLImageElement>;
     static loadVideo(src: string): Promise<HTMLVideoElement>;
     // (undocumented)

packages/utils/src/lib/media/media.ts

@@ -152,6 +152,10 @@ export class MediaHelpers {
 		return DEFAULT_SUPPORTED_STATIC_IMAGE_TYPES.includes(mimeType || '')
 	}
 
+	static isVectorImageType(mimeType: string | null): boolean {
+		return DEFAULT_SUPPORTED_VECTOR_IMAGE_TYPES.includes(mimeType || '')
+	}
+
 	static isImageType(mimeType: string): boolean {
 		return DEFAULT_SUPPORTED_IMAGE_TYPES.includes(mimeType)
 	}