[fix] Image support for SVG base64 data

The previous fix to support inline SVG data in utf-8 format broke images
that were rendering base64 SVGs.

packages/react-native-web/src/exports/Image/index.js

@@ -56,7 +56,7 @@ const resolveAssetDimensions = source => {
   }
 };
 
-const svgDataUriPattern = /^data:image\/svg\+xml;/;
+const svgDataUriPattern = /^(data:image\/svg\+xml;utf8,)(.*)/;
 const resolveAssetSource = source => {
   let uri;
   if (typeof source === 'number') {
@@ -71,12 +71,12 @@ const resolveAssetSource = source => {
     uri = source || '';
   }
 
-  // SVG data may contain characters (e.g., #, ") that need to be escaped
-  if (svgDataUriPattern.test(uri)) {
-    const parts = uri.split('<svg');
-    const [prefix, ...svgFragment] = parts;
-    const svg = encodeURIComponent(`<svg${svgFragment.join('<svg')}`);
-    return `${prefix}${svg}`;
+  const match = uri.match(svgDataUriPattern);
+  // inline SVG markup may contain characters (e.g., #, ") that need to be escaped
+  if (match) {
+    const [, prefix, svg] = match;
+    const encodedSvg = encodeURIComponent(svg);
+    return `${prefix}${encodedSvg}`;
   }
 
   return uri;

website/storybook/1-components/Image/examples/PropSource.js

@@ -17,11 +17,15 @@ const ImageSourceExample = () => (
       <Image source={sources.animatedGif} style={styles.image} />
     </View>
     <View style={styles.column}>
-      <Text style={styles.text}>Data PNG</Text>
-      <Image source={sources.dataPng} style={styles.image} />
+      <Text style={styles.text}>PNG (base64)</Text>
+      <Image source={sources.dataBase64Png} style={styles.image} />
     </View>
     <View style={styles.column}>
-      <Text style={styles.text}>Data SVG</Text>
+      <Text style={styles.text}>SVG (base64)</Text>
+      <Image source={sources.dataBase64Svg} style={styles.image} />
+    </View>
+    <View style={styles.column}>
+      <Text style={styles.text}>SVG (inline data)</Text>
       <Image source={sources.dataSvg} style={styles.image} />
     </View>
   </View>