SVG does not line up correctly with aspect ratio - html

Question

I've been trying to solve this for a while now and can't get the SVGs to align correctly for some width and height. My viewBox has 16:9 aspect ratio and I would like to scale the SVG by the same aspect ratio. For some width and height, it does line correctly but for others it doesn't although both have the same aspect ratio.
Any hints on what is causing this?
I have a JSFiddle for you to try, https://jsfiddle.net/n90ty8ys/1/
<svg id="svg-main-panel" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 768 432" preserveAspectRatio="xMinYMin meet" width="1120" height="630">
<rect xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="200" height="200" fill="blue"></rect>
<svg width="20" height="40" x="20" y="20">
<linearGradient id="a" gradientUnits="userSpaceOnUse" x1="657.247" y1="172.823" x2="657.247" y2="152.907" gradientTransform="rotate(90 405.13 -232.117)">
<stop offset="0" stop-color="#BDCCD4"></stop>
<stop offset=".5" stop-color="#EBF0F2"></stop>
<stop offset="1" stop-color="#BDCCD4"></stop>
</linearGradient>
<path fill="url(#a)" d="M20 0H.034L0 40h19.966"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" x="20" y="60">
<linearGradient id="a" gradientUnits="userSpaceOnUse" x1="19.775" y1="30" x2="-.14" y2="30">
<stop offset="0" stop-color="#BDCCD4" />
<stop offset=".5" stop-color="#EBF0F2" />
<stop offset="1" stop-color="#BDCCD4" />
</linearGradient>
<path fill="url(#a)" d="M-.034 20h20v20h-20z" />
<linearGradient id="b" gradientUnits="userSpaceOnUse" x1="-1207.701" y1="556.747" x2="-1207.701" y2="576.663" gradientTransform="matrix(0 -1 -1 0 576.556 -1188.2)">
<stop offset="0" stop-color="#BDCCD4" />
<stop offset=".5" stop-color="#EBF0F2" />
<stop offset="1" stop-color="#BDCCD4" />
</linearGradient>
<path fill="url(#b)" d="M0 40l19.966-20L20-1H0" />
<linearGradient id="c" gradientUnits="userSpaceOnUse" x1="-847.237" y1="1808.924" x2="-847.237" y2="1828.84" gradientTransform="matrix(-1 0 0 1 -826.737 -1788.733)">
<stop offset="0" stop-color="#BDCCD4" />
<stop offset=".5" stop-color="#EBF0F2" />
<stop offset="1" stop-color="#BDCCD4" />
</linearGradient>
<path fill="url(#c)" d="M41 40V20H19.934L0 40h19.968" />
</svg>
</svg>

Answer 1

Updates
Originally I thought viewBox and svg had different ratio, which actually had the same. I updated #2 below accordingly.
I see two potential issues:
Your <path> elements have decimal numbers in d attribute. As browsers rendering unit is pixel (integer), it might misalign your SVG elements. In the below snippet, I changed all the decimal numbers in d attributes to integers. For example, I changed <path fill="url(#c)" d="M41 40V20H19.934L0 40h19.968" /> to <path fill="url(#c)" d="M41 40V20H20L0 40h20" />.
Your base <svg>’s viewBox size, especially ratio, is different from width and height attribute value. Your viewBox width and height is 768 and 432 respectively, while your <svg> has width="1120" height="630" for its size value. That difference makes the SVG skewed unexpectedly and might produce decimal-based rendering that causes pixel misalignment in the browser. As viewBox vs <svg> size ratio is 1:1.46 (1120/768), it could render misaligned elements. There is a great article by Sara Soueidan about how to configure your viewBox numbers.
I applied those two changes in the snippet below, and it seems to work fine. Good luck!
<svg id="svg-main-panel" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1120 630" preserveAspectRatio="xMinYMin meet" width="1120" height="630">
<rect xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="200" height="200" fill="blue"></rect>
<svg width="20" height="40" x="20" y="20">
<linearGradient id="a" gradientUnits="userSpaceOnUse" x1="657.247" y1="172.823" x2="657.247" y2="152.907" gradientTransform="rotate(90 405.13 -232.117)">
<stop offset="0" stop-color="#BDCCD4"></stop>
<stop offset=".5" stop-color="#EBF0F2"></stop>
<stop offset="1" stop-color="#BDCCD4"></stop>
</linearGradient>
<path fill="url(#a)" d="M20 0H0L0 40h20"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" x="20" y="60">
<linearGradient id="a" gradientUnits="userSpaceOnUse" x1="19.775" y1="30" x2="-.14" y2="30">
<stop offset="0" stop-color="#BDCCD4" />
<stop offset=".5" stop-color="#EBF0F2" />
<stop offset="1" stop-color="#BDCCD4" />
</linearGradient>
<path fill="url(#a)" d="M0 20h20v20h-20z" />
<linearGradient id="b" gradientUnits="userSpaceOnUse" x1="-1207.701" y1="556.747" x2="-1207.701" y2="576.663" gradientTransform="matrix(0 -1 -1 0 576.556 -1188.2)">
<stop offset="0" stop-color="#BDCCD4" />
<stop offset=".5" stop-color="#EBF0F2" />
<stop offset="1" stop-color="#BDCCD4" />
</linearGradient>
<path fill="url(#b)" d="M0 40l20-20L20-1H0" />
<linearGradient id="c" gradientUnits="userSpaceOnUse" x1="-847.237" y1="1808.924" x2="-847.237" y2="1828.84" gradientTransform="matrix(-1 0 0 1 -826.737 -1788.733)">
<stop offset="0" stop-color="#BDCCD4" />
<stop offset=".5" stop-color="#EBF0F2" />
<stop offset="1" stop-color="#BDCCD4" />
</linearGradient>
<path fill="url(#c)" d="M41 40V20H20L0 40h20" />
</svg>
</svg>