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

Alvira

Probably because you have a width and a height canvasHeight={windowHeight}; canvasWidth={windowWidth} Try declaring a viewBox attribute instead – Swung

do you mean remove the canvasHeight and canvasWidth and wrap the code inside <View>...</View> ? I don't see a component from the library named viewBox, could you please provide a code example? – Alvira

Please read about the viewBox attribute – Swung

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. – Alvira

Take a look at this SO question: #44029612 – Swung

Are you sure that the remote SVG does not contain an image (bitmap)? Maybe it does. – Burney

@KevinBrown Yes I am sure it doesn't contain bitmap. – Alvira

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 – Madaras

@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 dev.w3.org/SVG/tools/svgweb/samples/svg-files/Steps.svg , my SVG is nothing different than this one technically. – Alvira

@Alvira do you find a way to zoom an SVG? – Yahrzeit

@Alvira what solution did you come up with? (if any) – Nevile

Answer 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} />

Twotime

Do you feel that library works well with SVG image? I mean when zoom in is the pixel still sharp? – Alvira

I tried, the remote svg image is not shown at all. – Alvira

sorry, i so busy, if this library not help for u, u can try with this library: react-native-svg-uri import SvgUri from "react-native-svg-uri"; <SvgUri width={} source={{ uri: image_url }} resizeMode="contain" /> – Twotime

Answer 2

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.

Ectoenzyme