title: pand and zoom SVG image but when zoom in the image is not sharp
body: <p>I am developing an React Native project. Our backend returns a URL which points to a remote SVG image. I need to not only show the SVG but also be able to pan and zoom it in the mobile app.</p>
  <ul>
  <li>To show remote SVG image, I use <a href="https://www.npmjs.com/package/react-native-svg#use-with-content-loaded-from-uri" rel="nofollow noreferrer">react-native-svg</a> library.</li>
  <li>To pan and zoom SVG, I use <a href="https://www.npmjs.com/package/react-native-simple-svg-pan-zoom" rel="nofollow noreferrer">react-native-simple-svg-pan-zoom</a> library.</li>
  </ul>
  <p>Here is what I tried:</p>
  <pre><code>const windowWidth = Dimensions.get('window').width;
  const windowHeight = Dimensions.get('window').height;
  
  // I hardcode the remote SVG URL here for illustration purpose, it is from backend in my code.
  const imageSource = 'https://www.example.com/foo.svg';
  ...
  return (
        &lt;SvgPanZoom
            canvasHeight={windowHeight}
            canvasWidth={windowWidth}
            minScale={0.5}
            maxScale={10}
            initialZoom={1}
            onZoom={zoom =&gt; {
              console.log('onZoom:' + zoom);
            }}&gt;
            &lt;SvgUri width=&quot;100%&quot; height=&quot;100%&quot; uri={imageSource} /&gt;
          &lt;/SvgPanZoom&gt;
    )
  </code></pre>
  <p>When run my app, the remote SVG image is shown &amp; I can zoom in and out based on the configuration. But when zoom in, the SVG image is not sharp. It looks more like a bitmap being scaled. Here is an example how it looks like when I zoom in to the max scale (in above code snippet you can see <code>maxScale={10}</code>).</p>
  <p><a href="https://i.stack.imgur.com/S33dp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/S33dp.png" alt="enter image description here" /></a></p>
  <p>So, how can I zoom a remote SVG image ? If the libraries I am using is not a good choice, anyone can suggest me other libraries to solve my problem?</p>
  <p><strong>==== Update 02.02.2021 ====</strong></p>
  <p>I tried <a href="https://www.npmjs.com/package/react-native-image-zoom-viewer" rel="nofollow noreferrer">react-native-image-zoom-viewer</a> as @Minh Vo suggested. However I get blank screen, the remote svg image is not rendered by the library.</p>
  <pre><code>const svgImage = [{url: data.image.url}];
  return (
  &lt;ImageViewer
              enableImageZoom={true}
              ref={() =&gt; {}}
              onChange={() =&gt; {}}
              renderIndicator={() =&gt; null}
              backgroundColor={'transparent'}
                imageUrls={svgImage} /&gt;);
      ...
  </code></pre>
  <p>If you feel I should provide the URL of SVG for my question, you can use this as an example <a href="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/Steps.svg" rel="nofollow noreferrer">https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/Steps.svg</a></p>