Large SVG

[jmkitavi]

Hello.
Thanks A lot for the library. I have experienced a slight problem when trying to display large SVG images.
Use this example to try and replicate:
https://upload.wikimedia.org/wikipedia/de/d/da/Manchester_United_FC.svg

[seekshiva]

I can reproduce the issue but have no idea what is causing it. Will update here once I find the issue that is causing this and fix it.

[jmkitavi]

@seekshiva
Thanks for the response... anything I can do to help let me know.

[jmkitavi]

Any updates on this @seekshiva

[Nonnis-M]

With large SVG files and only on Android I'm able to see just a portion of the whole image. This cause the Image area has scrolling enabled and can be zoomed in and out.

Is this the same issue you're talking about?

[seekshiva]

Yes. This is the issue. It doesn't seem to be about the size of the svg file. There are some very detailed svg images I've used that are of larger size. I've not faced issue with them.

Something else seems to be wrong about these particular set of images that is not linked to the file size. Usually when I face issue like this, adding a viewBox attribute to the main svg tag solves the issue. But that didn't work for the svg linked in the issue description.

[jmkitavi]

@seekshiva
So this hasn't been figured out yet.
May be you could list the possible issues you think and then we can help brainstorm.

We define the code, the code doesn't define us.

[seekshiva]

@sirjmkitavi Good idea! For starters, these images don't fit to screen when you load it in a browser. Check here for difference between how a normal image behaves vs the image that we are facing issue with:

When you open an image uri directly in browser

1. browser fits that image to window dimensions and you can click on the image to zoom in/out.
2. when you resize the browser window, the image gets auto-resized.

These two behaviour are not noticed when you load the above svg. Browser is not able to fit it to screen and doesn't provide a zoom in/out cursor when you hover over the image.

---

This library works by loading svg image in a WebView with transparent bg. WebView in turn just loads a web browser.

When someone using this component says that some svg image needs to load in 50x50 px or 100x100 px, it just loads a WebView of that size, and asks it to fit all content inside the web browser. By default, the browser is able to resize the image and show it in the size that we define.

But in certain images, the browser itself is not able to perform a "fit to screen" functionality.

[seekshiva]

these are the images I used in the demo:

1. Image that can "fit to screen": https://upload.wikimedia.org/wikipedia/commons/thumb/a/ad/Emojione_1F417.svg/1024px-Emojione_1F417.svg.png
2. Image that cannot "fit to screen": https://upload.wikimedia.org/wikipedia/de/d/da/Manchester_United_FC.svg

[seekshiva]

Ah, sorry. wait.. the first image used in demo is actually a png.

---

But the issue still stands that the reason this image doesn't get rendered within the bounding area is because browser is not able to perform "fit to screen" on it.

If the issue is as simple as adding a viewBox attribute to the svg tag, then mutate the loaded svg and add the attribute before loading it in WebView. However, adding the attribute doesn't seem to help with the svg in question.

[seekshiva]

@sirjmkitavi If we are able to mutate the various tags in svg and somehow get it to work, then that would be a good step towards figuring out the issue with these images. Thanks!

[Linrasis]

I have same problem, i have use this plugin for display PNG/SVG whit API (http://api.football-data.org/v1/competitions/450/leagueTable) but 5 SVG no display... to large.

[jmkitavi]

@seekshiva Thanks for the insights.
Let me take a closer look at your findings and revert.

[Linrasis]

News ?

[TranQuangPhi]

I modified the svg style's width and height

-import React, { useEffect, useState } from "react";
-import { View, StyleSheet } from "react-native";
+import React, { useEffect, useState } from 'react';
+import { Platform, StyleSheet, View } from 'react-native';
import { WebView } from "react-native-webview";

const heightUnits = Platform.OS === "ios" ? "vh" : "%";

const getHTML = (svgContent, style) => `
-
+

<style> html, body { @@ -22,9 +22,10 @@ const getHTML = (svgContent, style) => ` position: fixed; top: 0; left: 0; - height: 100%; - width: 100%; + height: 100${Platform.OS === 'ios' ? 'vh' : '%'}; + width: 100${Platform.OS === 'ios' ? 'vw' : '%'}; overflow: hidden; + object-fit: contain; } </style>