Some Image styles and props not always working for SVGs

Problem Description

Applying props like blurRadius or styles like tintColor don't work consistently for SVGs.

TBH, I am not entirely sure they should be supported. However, they do seem to work if the SVG is allowed to load first.
For example, if I first load a SVG without a tintColor style it will load correctly. If I uncomment the tintColor and hot reload the tint will be applied. The same goes for waiting for the onLoad callback (although that has its own issue).

Hoping someone more familiar with the windows image loading code, specifically LoadedImageSurface, can maybe shed some light on what might be happening. Once the SVG image is loaded is it no longer treated as SVG and more like a texture and that is why the StartLoadFromUri works? If so, would it be reasonable to add some logic to ensure that features like tintColor and blurRadius wait for the initial SVG load before being applied? It seems to work but maybe we are just getting lucky?

Steps To Reproduce

1. Add SVG Image component.
2. Set a tintColor style and/or a blurRadius prop.
3. Run app. Image will not be displayed.

Debug output from VS indicates an invalid format:

 (Other)o load image: http://localhost:8081/assets/assets/arrow.svg?platform=windows&hash=3aba77de82ba18a43c5667fdb1e75039)
 (Other)o load image: http://localhost:8081/assets/assets/arrow.svg?platform=windows&hash=3aba77de82ba18a43c5667fdb1e75039)
 (InvalidFormat)mage: http://localhost:8081/assets/assets/arrow.svg?platform=windows&hash=3aba77de82ba18a43c5667fdb1e75039)

Expected Results

Image props and styles applied to SVGs consistently.

CLI version

11.3.5

Environment

System:
  OS: Windows 10 10.0.19045
  CPU: (8) x64 Intel(R) Core(TM) i7-6700K CPU @ 4.00GHz
  Memory: 13.35 GB / 31.94 GB
Binaries:
  Node:
    version: 18.17.0
    path: C:\Program Files\nodejs\node.EXE
  Yarn:
    version: 1.22.19
    path: C:\Program Files\nodejs\yarn.CMD
  npm:
    version: 9.6.7
    path: C:\Program Files\nodejs\npm.CMD
  Watchman: Not Found
SDKs:
  Android SDK: Not Found
  Windows SDK:
    AllowDevelopmentWithoutDevLicense: Enabled
    AllowAllTrustedApps: Enabled
    Versions:
      - 10.0.18362.0
      - 10.0.19041.0
      - 10.0.22000.0
      - 10.0.22621.0
IDEs:
  Android Studio: Not Found
  Visual Studio:
    - 17.7.33808.371 (Visual Studio Professional 2022)
    - 17.6.33815.320 (Visual Studio Professional 2022)
    - 16.11.32901.82 (Visual Studio Professional 2019)
Languages:
  Java: Not Found
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.72.3
    wanted: 0.72.3
  react-native-windows:
    installed: 0.72.5
    wanted: 0.72.5
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Target Platform Version

10.0.19041

Target Device(s)

Desktop

Visual Studio Version

Visual Studio 2022

Build Configuration

Debug

Snack, code example, screenshot, or link to a repository

import React from 'react';
import {Image, SafeAreaView, StyleSheet} from 'react-native';
import {Colors} from 'react-native/Libraries/NewAppScreen';

function App(): JSX.Element {
  return (
    <SafeAreaView style={styles.root}>
      <Image
        style={styles.image}
        // blurRadius={20}
        source={require('./assets/arrow.svg')}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  root: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: Colors.darker,
  },
  image: {
    width: 512,
    height: 512,
    // tintColor: '#f00',
  },
});

export default App;