I am trying to develop a simple screen in react native where it displays an svg image. I am trying to make the svg image use the full device width and height (100%). But the problem is, it is not consistent across different devices. For example, it is rendering properly in Iphone 8 Plus but not scaling properly in Ipad or Iphone 8. I heard the SVG files are scalable across all devices without losing quality. But I am not sure what I am missing here. I have posted the code and images below for reference.
Before posting here, I have did a considerable amount of research in Github and here as well. I have also followed the steps mentioned in one of the similar posts (How to find correct values for width, height and viewBox with react-native-svg) but its not working. Can any please guide me on the right direction to fix the issue.
React Native Screen Component Code
import * as React from "react";
import Svg, { Defs, G, Path, Text, TSpan, Circle } from "react-native-svg";
/* SVGR has dropped some elements not supported by react-native-svg: style */
import { Dimensions, View } from "react-native";
function SvgComponent(props) {
const originalWidth = 1080;
const originalHeight = 1920;
const aspectRatio = originalWidth / originalHeight;
const windowWidth = Dimensions.get("window").width;
return (
<View style={{ width: windowWidth, aspectRatio }}>
<Svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1080 1920"
width="100%"
height="100%"
>
<Defs></Defs>
<G id="prefix__Layer_2" data-name="Layer 2">
<G id="prefix__Layer_1-2" data-name="Layer 1">
<Path fill="#006837" d="M.5.5h1079v1919H.5z" />
<Path d="M1079 1v1918H1V1h1078m1-1H0v1920h1080V0z" />
<Text
transform="matrix(1.5 0 0 1 13 148.09)"
fontFamily="ArialMT,Arial"
fill="#fff"
fontSize={106}
>
<TSpan className="prefix__cls-3">{"T"}</TSpan>
<TSpan x={62.83} y={0}>
{"O"}
</TSpan>
<TSpan x={145.28} y={0} letterSpacing="-.02em">
{"P"}
</TSpan>
<TSpan x={214.07} y={0} />
<TSpan x={243.52} y={0} letterSpacing="-.07em">
{"P"}
</TSpan>
<TSpan x={306.35} y={0} letterSpacing={0}>
{"AGE"}
</TSpan>
<TSpan className="prefix__cls-3" x={530.21} y={0} />
<TSpan x={557.74} y={0}>
{"TS"}
</TSpan>
</Text>
<Text
transform="matrix(1.5 0 0 1 13 1888.09)"
fontSize={79}
fontFamily="ArialMT,Arial"
fill="#fff"
>
{"BOT"}
<TSpan className="prefix__cls-8" x={162.4} y={0}>
{"T"}
</TSpan>
<TSpan x={209.23} y={0}>
{"OM "}
</TSpan>
<TSpan x={358.43} y={0} letterSpacing="-.07em">
{"P"}
</TSpan>
<TSpan x={405.26} y={0}>
{"AGE"}
</TSpan>
<TSpan className="prefix__cls-8" x={572.09} y={0} />
<TSpan x={592.62} y={0}>
{"TS"}
</TSpan>
</Text>
<Circle className="prefix__cls-10" cx={514.5} cy={396.5} r={129} />
<Path d="M514.5 268a128.51 128.51 0 11-90.86 37.64A127.66 127.66 0 01514.5 268m0-1A129.5 129.5 0 10644 396.5 129.5 129.5 0 00514.5 267z" />
<Circle className="prefix__cls-10" cx={179.5} cy={729.5} r={129} />
<Path d="M179.5 601a128.51 128.51 0 11-90.86 37.64A127.66 127.66 0 01179.5 601m0-1A129.5 129.5 0 10309 729.5 129.5 129.5 0 00179.5 600z" />
<Circle className="prefix__cls-10" cx={852.5} cy={748.5} r={129} />
<Path d="M852.5 620a128.51 128.51 0 11-90.86 37.64A127.66 127.66 0 01852.5 620m0-1A129.5 129.5 0 10982 748.5 129.5 129.5 0 00852.5 619z" />
<Circle className="prefix__cls-10" cx={514.5} cy={1007.5} r={129} />
<Path d="M514.5 879a128.51 128.51 0 11-90.86 37.64A127.66 127.66 0 01514.5 879m0-1A129.5 129.5 0 10644 1007.5 129.5 129.5 0 00514.5 878z" />
<Path
className="prefix__cls-10"
d="M36.99 1244.17l-28.95-91.2 64.51-70.67 93.46 20.53 28.95 91.2-64.51 70.67-93.46-20.53z"
/>
<Path d="M72.72 1082.85l92.9 20.4 28.77 90.65-64.11 70.25-92.9-20.4-28.77-90.65 64.11-70.25m-.34-1.1l-64.9 71.1 29.12 91.75 94 20.65 64.9-71.1-29.1-91.75-94-20.65z" />
<Path
className="prefix__cls-10"
d="M863.74 1280.56l-66.18-120.49 71.26-117.56 137.44 2.93 66.18 120.49-71.26 117.56-137.44-2.93z"
/>
<Path d="M869.1 1043l136.86 2.92 65.9 120-71 117.07-136.86-2.92-65.9-120 71-117.07m-.56-1l-71.56 118 66.46 121 138 3 71.56-118-66.46-121-138-3z" />
<Path
className="prefix__cls-10"
d="M293.27 1553.17l35.61-150.02 147.73-44.18 112.12 105.86-35.61 150.02-147.73 44.18-112.12-105.86z"
/>
<Path d="M476.48 1359.53L588.18 1465l-35.48 149.46-147.18 44L293.82 1553l35.48-149.47 147.18-44m.26-1.12l-148.28 44.34-35.75 150.59 112.55 106.25 148.28-44.34 35.75-150.59-112.55-106.25z" />
<Path
className="prefix__cls-10"
d="M708.09 1692.49a21.08 21.08 0 01-20.4-26l54.77-230.76a21 21 0 0120.54-16.16 20.61 20.61 0 0114 5.37l185.77 166a21.07 21.07 0 01-8.55 36l-240.55 64.78a21.15 21.15 0 01-5.58.77z"
/>
<Path d="M763 1419.07v1a20.16 20.16 0 0113.61 5.24l185.77 166a20.55 20.55 0 01-8.35 35.18l-240.55 64.79a21 21 0 01-5.43.73 20.58 20.58 0 01-19.92-25.33L743 1435.9a20.54 20.54 0 0120-15.83v-1m0 0a21.53 21.53 0 00-21 16.59l-54.8 230.76a21.49 21.49 0 0026.58 25.8l240.55-64.78a21.56 21.56 0 008.76-36.9l-185.77-166a21.27 21.27 0 00-14.29-5.5z" />
</G>
</G>
</Svg>
</View>
);
}
export default SvgComponent;
Perfect Rendering in Iphone 8 Plus
Bad Rendering in IPad
