How to convert base64 to xml svg format in React Native (react-native-signature-canvas)

WHAT I NEED :

I take a base64 string from react-native-canvas-signature library. However, I have to send it to api while converting svg xml format. The example format is:

<svg xmlns="http://www.w3.org/2000/svg" width="17.397" height="17.397" viewBox="0 0 17.397 17.397">
<path d="m6.705 11.653 4.948-4.948h5.065a.68.68 0 0 0 .68-.68V.68a.68.68 0 0 0-.68-.68h-5.346a.68.68 0 0 0-.68.68v1.993H6.705V.68A.68.68 0 0 0 6.026 0H.68A.68.68 0 0 0 0 .68v5.346a.68.68 0 0 0 .68.68h5.346a.68.68 0 0 0 .68-.68V4.032h3.987v1.712l-4.949 4.948H.68a.68.68 0 0 0-.68.68v5.346a.68.68 0 0 0 .68.68h5.346a.68.68 0 0 0 .68-.68v-1.994h3.987v1.993a.68.68 0 0 0 .68.68h5.346a.68.68 0 0 0 .68-.68v-5.345a.68.68 0 0 0-.68-.68h-5.347a.68.68 0 0 0-.68.68v1.993H6.705zM5.346 5.346H1.359V1.359h3.987zm6.705 6.705h3.987v3.987h-3.987zm0-10.692h3.987v3.987h-3.987zM5.346 16.038H1.359v-3.987h3.987z" style="fill:#557ce6"/>

this is a kind of url icon. when I draw a sign in react native app I take a base64 string and I have to convert it to this format. I research all stackoverflow pages. I found something but it does not work completely. The Link is : How to print svg element with base64 format in React?

answere by @Man he suggests to use XMLHTTPRequest in React. If I am not wrong the class is not working on React Native on android properly. In ios It converts base64 to the example svg format but not on android. I expect ev.target.response gives me that format because it does that on ios. Also I am open another solutions to convert base64 to svg.

MY CODE :

import { View, Text, StyleSheet, TouchableOpacity, Image } from 'react-native'
import { Image as Image2 } from 'react-native-svg';
import React from 'react'
import RNFS, { UploadBeginCallbackResult, UploadProgressCallbackResult } from 'react-native-fs'
import SignatureScreen, {
  SignatureViewRef,
} from "react-native-signature-canvas";
import { Global } from '../../constants/Global';
import { CustomBlueColor } from '../../constants/StyleConstants';
import { getFilesPath } from '../ActivityStatement/CameraHelper';
import { decode as atob, encode as btoa } from 'base-64'


interface Props {
  text: string;
  handleOK: (signature: any) => void;
}
const Sign: React.FC<Props> = ({ text, handleOK }) => {
  const ref = React.useRef<SignatureViewRef>(null);

  const handleSignature = (signature: any) => {
    try {

      const loadSVG = () => {

        var xhr = new XMLHttpRequest();

        xhr.open("GET", atob(btoa(signature)));
        xhr.addEventListener("load", function (ev: any) {
          var xml = ev.target.response;
          console.log('xml',xml);
          
        });
        xhr.removeEventListener('load', console.log)
        xhr.send(null);
      };
      loadSVG()
      handleOK(signature);
    } catch (error) {
      console.log('21 error', error);

    }
  };

  const handleClear = () => {
    console.log("clear success!");

    ref.current?.clearSignature();
  };

  const handleConfirm = () => {
    console.log("end");
    ref.current?.readSignature();
  };

  const handleEnd = () => {
    ref.current?.readSignature();
  };


  return (
    <View style={styles.container}>
      <SignatureScreen ref={ref}
        imageType={"image/svg+xml"}
        onOK={handleSignature}
      />
      <View style={styles.row}>
        <TouchableOpacity onPress={handleClear} style={{ backgroundColor: CustomBlueColor, padding: 10, borderRadius: 5, }}><Text style={{ color: 'white' }}>Cancel</Text></TouchableOpacity>
        <TouchableOpacity onPress={handleConfirm} style={{ backgroundColor: CustomBlueColor, padding: 10, borderRadius: 5, }}><Text style={{ color: 'white' }}>Confirm</Text></TouchableOpacity>
      </View>
    </View>
  )
}