pand and zoom SVG image but when zoom in the image is not sharp

Question

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.

To show remote SVG image, I use react-native-svg library.
To pan and zoom SVG, I use react-native-simple-svg-pan-zoom library.

Here is what I tried:

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 (
      <SvgPanZoom
          canvasHeight={windowHeight}
          canvasWidth={windowWidth}
          minScale={0.5}
          maxScale={10}
          initialZoom={1}
          onZoom={zoom => {
            console.log('onZoom:' + zoom);
          }}>
          <SvgUri width="100%" height="100%" uri={imageSource} />
        </SvgPanZoom>
  )

When run my app, the remote SVG image is shown & 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 maxScale={10}).

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?

==== Update 02.02.2021 ====

I tried react-native-image-zoom-viewer as @Minh Vo suggested. However I get blank screen, the remote svg image is not rendered by the library.

const svgImage = [{url: data.image.url}];
return (
<ImageViewer
            enableImageZoom={true}
            ref={() => {}}
            onChange={() => {}}
            renderIndicator={() => null}
            backgroundColor={'transparent'}
              imageUrls={svgImage} />);
    ...

If you feel I should provide the URL of SVG for my question, you can use this as an example https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/Steps.svg

Probably because you have a width and a height `canvasHeight={windowHeight}; canvasWidth={windowWidth}` Try declaring a viewBox attribute instead — enxaneta, Nov 22 '20 at 10:07
do you mean remove the `canvasHeight` and `canvasWidth` and wrap the code inside `...` ? I don't see a component from the library named `viewBox`, could you please provide a code example? — Leem.fin, Nov 22 '20 at 10:22
Please read about the [viewBox](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox) attribute — enxaneta, Nov 22 '20 at 11:16
Thanks. However in my case it is a remote SVG (from a remote uri), how can I modify its content to inject the `viewBox` in my react-native project? It would be nice if you could use some code snippet to illustrate. — Leem.fin, Nov 22 '20 at 11:40
Take a look at this SO question: https://stackoverflow.com/questions/44029112/svg-viewbox-error-with-react — enxaneta, Nov 22 '20 at 12:28
Are you sure that the remote SVG does not contain an image (bitmap)? Maybe it does. — Kevin Brown, Nov 30 '20 at 19:23
we cant help you if you don't show us the remote svg as your problem isn't in the library or the solution but rather with this specific uri — youssef ali, Feb 04 '21 at 08:52
@youssefali the remote SVG can be opened on any browser by its URL. It is a SVG. Nothing special. Unfortunately I can't provide the URL since it is not for public access at the moment. I don't see why providing the remote SVG url is so important for my question, it is just a normal SVG located on server & accessed by URL. For example I googled one remote SVG https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/Steps.svg , my SVG is nothing different than this one technically. — Leem.fin, Feb 04 '21 at 13:09

score 1 · Answer 1 · answered Nov 30 '20 at 03:51

1

i have same problem and i find a library can help this. I suggest this react-native-image-zoom-viewer. You can easy zoom in and zoom out even though url is 1 image or multi image. More infomation in that link. Here is code demo:

        const images = "www.abc.com/image.svg"
        <ImageViewer
            ref={() => {}}
            onChange={() => {}}
            renderIndicator={() => null}
            backgroundColor={'transparent'}
            index={this.state.index}
            imageUrls={this.images} />

answered Nov 30 '20 at 03:51

Minh Vo

120
6

Do you feel that library works well with SVG image? I mean when zoom in is the pixel still sharp? – Leem.fin Jan 21 '21 at 15:15
I tried, the remote svg image is not shown at all. – Leem.fin Feb 02 '21 at 14:16
1

sorry, i so busy, if this library not help for u, u can try with this library: [react-native-svg-uri](https://github.com/vault-development/react-native-svg-uri) `import SvgUri from "react-native-svg-uri";` `` – Minh Vo Feb 19 '21 at 05:06

score 0 · Answer 2 · answered Feb 04 '21 at 14:40

According to the documentation you provide for react-native-simple-svg-pan-zoom,

It is recommended not to set maxScale above 1 as this results in blurred react-native-svg elements. Instead, increase your SVG element dimensions and set minScale lower.

So I guess you should choose a maxScale below 1 and try lower values for minScale coupled with higher values for canvasWidth and canvasHeight until you get the zoom levels you need.

pand and zoom SVG image but when zoom in the image is not sharp

2 Answers2