Why my SVG is responsive but occasionally? - css

Question

I've created a 1000×1000 svg , but when I am running it in Chrome browser , if viewport size is less than 1000 the svg image is cropped automatically, having said that, I am not witnessing this problem in jsFiddle ! I am curious if it has anything to do with viewport dimension?
Take a look at what I'm trying:
<svg viewbox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg">
<path d="M100 100 h800 v800 h-800 v-800" fill="black" stroke="red" stroke-width="8" style=" stroke-dasharray: 4000;
stroke-dashoffset: 4000;
animation: dash 2s linear forwards infinite;" /><style>#keyframes dash {
to {
stroke-dashoffset: 0;
}
}</style>
<text x="120" y="200" fill="skyblue" style="font-size:30;">
1: We do not endorse 'Aarogya Setu App'.
<tspan x="120" y="300">
2: To use this App you have to share
</tspan>
<tspan x="120" y="400">
your Name, Age, Sex, Location, Job and
</tspan>
<tspan x="120" y="500">
other details with govt authorities.
</tspan>
<tspan x="120" y="600">
3: Also these details are transferred to
</tspan>
<tspan x="120" y="700">
nearby devices, via bluetooth using an
</tspan>
<tspan x="120" y="800">
encryption model, use only if you trust
</tspan>
<tspan x="120" y="870">
your govt.
</tspan>
</text>
</svg>
Here is jsFiddle link: https://jsfiddle.net/3fuh7ntj/
To see above svg in your browser, click here: https://covidnmap.000webhostapp.com/graphics.svg