我正在开发一个基本上是协作绘图工具的应用程序。

我有一个巨大的SVG原图（4.5 MB），用户可以登录pan并在此原图上绘制自己的画。

第一个是添加资产并将其导入为：

import Earth from './FinalEarth.svg';

问题在于它显示了此错误：

RangeError：超出了最大调用堆栈大小。

This error is located at:
    in SvgComponent (at DrawView.js:265) 

另一种方法是从URI加载它。像这样：

 <Svg
        style={styles.drawSurface}
        width={this.props.width}
        height={this.props.height}
      >
        <G
          transform={{
            translateX: left * resolution,translateY: top * resolution,scale: zoom
          }}
        >
         <SvgCssUri
            width="100%"
            height="100%"
            uri="myurl//EarthCompact.svg?alt=media&token=3435369a-6fb7-4d05-91ca-b6b7c7a2e28e"
          />

使用这种方法，我有两个问题：

我没有装载机。因此它显示一个空白屏幕，并且从我的服务器下载4 MB时，仅显示一个空白屏幕。

然后，在加载时，缩放或平移时的性能也太差。

有人对这种情况的最佳方法有何建议？