SVG change clipPath background color - html

I want to create a landing page, with a colored div and with a clip-path in it, in order to show a video running in the background. For now, the background appears greyish for a reason I don't get.
I tried multiple things and I can't get it working.
Here is my code :
.video_home_container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
overflow: hidden;
}
.video_home_background {
background: green;
position: absolute;
top: 0;
left: 0;
z-index: 11;
width: 100vw;
height: 100vh;
clip-path: url(#mask);
}
.video {
position: relative;
z-index: 5;
}
.video_home_overlay_logo {
position: absolute;
top: 0;
left: 0;
z-index: 7;
max-width: 100%;
height: 100%;
}
.video_home_overlay_logo path {
transform: scale(.8) translateY(40%);
}
<div class="video_home_container">
<div class="video_home_background">
<video class="video" autoplay loop width="100%">
<source src="<?php echo get_template_directory_uri(); ?>/static/home.mp4"
type="video/mp4">
</video>
</div>
<svg class="video_home_overlay_logo" width="100%" height="100%" >
<clipPath id="mask">
<path d="M587.505 411.454H487.962V312.839H587.505V213.814H487.962V115.145H587.505V11.1746H352.65V498.674L587.505 480.804V411.454Z" fill="black"/>
<path d="M767.851 437.958H816.106L818.101 463.206L949.97 453.124L884.39 11.1746H688.473L626.664 477.88L765.282 467.305L767.851 437.958ZM791.924 126.976C798.809 213.814 805.695 286.68 812.581 345.574H765.856C769.545 299.641 778.043 226.684 791.924 126.976Z" fill="black"/>
<path d="M1650.44 343.198V304.479H1515.13V388.065C1515.13 396.481 1514.91 403.422 1514.69 409.925L1648.58 399.706C1649.92 383.12 1650.44 364.648 1650.44 343.198Z" fill="black"/>
<path d="M1465.8 393.175V151.351C1465.8 124.792 1467.42 107.796 1470.5 99.7077C1473.59 91.6196 1480.48 88.122 1491.63 88.122C1501.43 88.122 1507.83 91.3464 1510.92 97.7404C1514 104.134 1515.12 120.748 1515.12 146.679V255.568H1650.44V188.048C1650.44 139.465 1646.39 103.724 1638.3 80.8264C1630.11 58.1469 1613.11 38.6917 1587.21 22.8434C1561.11 7.92411 1528.24 0 1488.56 0C1459.16 0 1433.1 4.94583 1410.66 14.7554C1387.9 25.0295 1370.08 38.6918 1357.54 55.961C1345.28 71.7054 1337.34 90.3858 1334.54 110.146C1331.8 128.863 1330.55 157.117 1330.55 194.524V346.723C1330.23 372.486 1331.77 398.238 1335.16 423.778L1466.32 413.75C1466.08 407.629 1465.8 401.044 1465.8 393.175Z" fill="black"/>
<path d="M1824.8 11.1746H1689.57V318.987C1689.57 351.175 1689.87 376.888 1690.69 396.589L1824.8 386.369V11.1746Z" fill="black"/>
<path d="M1999.23 11.1746H1863.98V383.337L1999.23 373.035V11.1746Z" fill="black"/>
<path d="M2334.43 115.145V11.1746H2038.34V115.145H2118.51V363.69L2253.82 353.607V115.145H2334.43Z" fill="black"/>
<path d="M1117.09 296.635H1124.63C1143.27 296.635 1154.69 299.805 1159.06 306.855C1163.27 312.948 1165.59 328.25 1165.89 352.514C1165.89 354.208 1165.89 425.17 1165.89 436.674L1291.58 427.083V394.294C1291.58 352.268 1290.46 326.528 1288.25 317.293C1284.93 305.884 1279.04 295.387 1271.04 286.607C1261.58 275.349 1243.56 266.441 1216.96 259.884C1246.42 256.96 1266.34 248.626 1276.31 234.69C1286.28 220.755 1291.45 193.539 1291.45 153.044C1291.45 108.669 1284.26 76.2892 1270.24 56.0416C1256.23 35.794 1237.45 22.8422 1214.77 17.9784C1192.1 13.1146 1149 11.1746 1085.04 11.1746H989.237V450.145L1117.09 440.39V296.635ZM1117.09 99.8977H1124.63C1140.18 99.8977 1151.27 102.33 1156.96 107.822C1162.8 112.686 1165.73 122.741 1165.89 138.671V172.964C1165.54 193.512 1162.48 205.426 1156.96 209.224C1150.53 213.732 1140.01 215.7 1124.63 215.7H1117.09V99.8977Z" fill="black"/>
<path d="M288.084 503.674C297.204 494.512 303.729 483.093 306.993 470.584C311.173 454.791 313.551 423.613 313.551 376.724V194.523C313.551 145.12 311.938 111.921 308.714 95.3892C305.688 78.3871 298.062 62.5389 286.663 49.5657C274.613 35.9034 256.879 26.0119 233.926 19.5086C210.755 13.7431 166.735 11.0652 101.375 11.0652H0V525.643L288.084 503.674ZM128.781 99.7885H135.312C150.395 99.7885 160.396 101.401 165.369 104.625C168.052 106.178 170.376 108.281 172.189 110.796C174.002 113.311 175.263 116.18 175.889 119.216C177.477 130.072 178.199 141.036 178.048 152.006V378.691C177.556 406.508 175.315 423.75 171.435 430.608C166.926 438.286 155.259 442.358 135.312 442.358H128.781V99.7885Z" fill="black"/>
</clipPath>
</svg>
</div>
What would you advise me to do ? I'm beginning with svg clip path so I don't get everything.


I suspect that what you are seeing is just a tiny part of the video.
This is how I would do it:
For the clippath I'm using clipPathUnits="objectBoundingBox"
objectBoundingBox
This value indicates that all coordinates inside the element are relative to the bounding box of the element the clipping path is applied to. It means that the origin of the coordinate system is the top left corner of the object bounding box and the width and height of the object bounding box are considered to have a length of 1 unit value.
In order to make it having a length of 1 unit value I'm scaling it transform="scale(0.0004)"
In order to get this value (0.0004) you need first to get the bounding box of the elements inside the clipping path and divie 1 by the width: 1 / clip.getBBox().width
.video_home_background {
background: green;
width: 100vw;
clip-path: url(#clip);
}
<svg class="video_home_overlay_logo" width="0" height="0" >
<clipPath id="clip" clipPathUnits="objectBoundingBox"
transform="scale(0.0004)">
<path d="M587.505 411.454H487.962V312.839H587.505V213.814H487.962V115.145H587.505V11.1746H352.65V498.674L587.505 480.804V411.454Z" fill="black"/>
<path d="M767.851 437.958H816.106L818.101 463.206L949.97 453.124L884.39 11.1746H688.473L626.664 477.88L765.282 467.305L767.851 437.958ZM791.924 126.976C798.809 213.814 805.695 286.68 812.581 345.574H765.856C769.545 299.641 778.043 226.684 791.924 126.976Z" fill="black"/>
<path d="M1650.44 343.198V304.479H1515.13V388.065C1515.13 396.481 1514.91 403.422 1514.69 409.925L1648.58 399.706C1649.92 383.12 1650.44 364.648 1650.44 343.198Z" fill="black"/>
<path d="M1465.8 393.175V151.351C1465.8 124.792 1467.42 107.796 1470.5 99.7077C1473.59 91.6196 1480.48 88.122 1491.63 88.122C1501.43 88.122 1507.83 91.3464 1510.92 97.7404C1514 104.134 1515.12 120.748 1515.12 146.679V255.568H1650.44V188.048C1650.44 139.465 1646.39 103.724 1638.3 80.8264C1630.11 58.1469 1613.11 38.6917 1587.21 22.8434C1561.11 7.92411 1528.24 0 1488.56 0C1459.16 0 1433.1 4.94583 1410.66 14.7554C1387.9 25.0295 1370.08 38.6918 1357.54 55.961C1345.28 71.7054 1337.34 90.3858 1334.54 110.146C1331.8 128.863 1330.55 157.117 1330.55 194.524V346.723C1330.23 372.486 1331.77 398.238 1335.16 423.778L1466.32 413.75C1466.08 407.629 1465.8 401.044 1465.8 393.175Z" fill="black"/>
<path d="M1824.8 11.1746H1689.57V318.987C1689.57 351.175 1689.87 376.888 1690.69 396.589L1824.8 386.369V11.1746Z" fill="black"/>
<path d="M1999.23 11.1746H1863.98V383.337L1999.23 373.035V11.1746Z" fill="black"/>
<path d="M2334.43 115.145V11.1746H2038.34V115.145H2118.51V363.69L2253.82 353.607V115.145H2334.43Z" fill="black"/>
<path d="M1117.09 296.635H1124.63C1143.27 296.635 1154.69 299.805 1159.06 306.855C1163.27 312.948 1165.59 328.25 1165.89 352.514C1165.89 354.208 1165.89 425.17 1165.89 436.674L1291.58 427.083V394.294C1291.58 352.268 1290.46 326.528 1288.25 317.293C1284.93 305.884 1279.04 295.387 1271.04 286.607C1261.58 275.349 1243.56 266.441 1216.96 259.884C1246.42 256.96 1266.34 248.626 1276.31 234.69C1286.28 220.755 1291.45 193.539 1291.45 153.044C1291.45 108.669 1284.26 76.2892 1270.24 56.0416C1256.23 35.794 1237.45 22.8422 1214.77 17.9784C1192.1 13.1146 1149 11.1746 1085.04 11.1746H989.237V450.145L1117.09 440.39V296.635ZM1117.09 99.8977H1124.63C1140.18 99.8977 1151.27 102.33 1156.96 107.822C1162.8 112.686 1165.73 122.741 1165.89 138.671V172.964C1165.54 193.512 1162.48 205.426 1156.96 209.224C1150.53 213.732 1140.01 215.7 1124.63 215.7H1117.09V99.8977Z" fill="black"/>
<path d="M288.084 503.674C297.204 494.512 303.729 483.093 306.993 470.584C311.173 454.791 313.551 423.613 313.551 376.724V194.523C313.551 145.12 311.938 111.921 308.714 95.3892C305.688 78.3871 298.062 62.5389 286.663 49.5657C274.613 35.9034 256.879 26.0119 233.926 19.5086C210.755 13.7431 166.735 11.0652 101.375 11.0652H0V525.643L288.084 503.674ZM128.781 99.7885H135.312C150.395 99.7885 160.396 101.401 165.369 104.625C168.052 106.178 170.376 108.281 172.189 110.796C174.002 113.311 175.263 116.18 175.889 119.216C177.477 130.072 178.199 141.036 178.048 152.006V378.691C177.556 406.508 175.315 423.75 171.435 430.608C166.926 438.286 155.259 442.358 135.312 442.358H128.781V99.7885Z" fill="black"/>
</clipPath>
</svg>
<div class="video_home_background">
<video class="video" width="100%" muted autoplay loop>
<source type="video/mp4" src="https://www.w3schools.com/tags/movie.mp4"
type="video/mp4">
</video>
</div>

Related

I would like to put an image inside svg shape and hide the overflow parts

.container{
position: relative;
width: 692px;
}
.image{
position: absolute;
width: 403px;
height: 602px;
top: 91px;
left: 92px;
}
<html>
<body>
<div class="container">
<svg width="581" height="692" viewBox="0 0 581 692" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M526.636 489.523C598.467 361.569 590.666 251.284 551.879 107.757C538.582 58.5517 506.556 -37.4658 444.069 -103.204C320.276 -233.438 122.218 -189.737 6.51981 -180.688C-109.178 -171.639 -138.103 -67.5724 -164.924 3.12491C-191.745 73.8223 -123.378 416.563 -84.461 503.097L-84.2626 503.538C-45.3885 589.978 0.49324 692 167.445 692C334.682 692 444.781 635.333 526.636 489.523Z"
fill="green"/>
</svg>
<div class="image">
<img src="https://dummyimage.com/403x602/000/efefef" width={403} height={602}/>
</div>
</div>
</body>
</html>
Please don't mind the white background of image.
As you can see, I would like to remove the bottom-right overflow parts. The green area is the svg. I tried with z-index and svg clip-path. Unfortunately those methods didn't work for me somehow. Help is much appreciated. Thanks.

As I've told you in the comment: you can put the image inside the svg and clip the image with the path.
<svg width="581" height="692" viewBox="0 0 581 692" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="thePath" d="M526.636 489.523C598.467 361.569 590.666 251.284 551.879 107.757C538.582 58.5517 506.556 -37.4658 444.069 -103.204C320.276 -233.438 122.218 -189.737 6.51981 -180.688C-109.178 -171.639 -138.103 -67.5724 -164.924 3.12491C-191.745 73.8223 -123.378 416.563 -84.461 503.097L-84.2626 503.538C-45.3885 589.978 0.49324 692 167.445 692C334.682 692 444.781 635.333 526.636 489.523Z" fill="green" />
<clipPath id="cp">
<use href="#thePath" />
</clipPath>
<image clip-path="url(#cp)" href="https://dummyimage.com/403x602/000/efefef" width="403" x="100" y="100" />
</svg>

Max-height and max-width not applying to flex children

I'm trying to set max-width and height to flex children, but, the div gets squished down to fit its children exactly. I found out that div .content (or its styling) is causing the issue, but, not sure why.
I expect the division has a max-width and height of 1600px x 500px so they can flex correctly; i.e move closer to each other as the page gets smaller in width.
html,body { /* removes all default margin and padding */
margin: 0;
padding: 0;
min-height: 100vh;
}
body {
background-image: url(/Component\1\–\1svg);
background-repeat: no-repeat;
padding: none;
margin: none;
font-family: "Alata", sans-serif;
background-color: #e5e5e5;
display: flex;
flex-direction: column;
}
.content {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
flex: 1 0 auto;
}
.waveContainer {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#wave {
position: absolute;
z-index: -1;
}
.flexParent {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1600px;
max-height: 500px; /* both max width and height are not being applied to the div; notice how the div is not 1600x500 */
opacity: 0.6;
background-color: yellow;
}
.contact {
width: 369px;
height: 71px;
border: 0;
padding: 0;
background: #00d1ff;
border-radius: 12px;
border-color: 20px white;
font-family: Alata;
font-style: normal;
font-weight: normal;
font-size: 30px;
line-height: 71px;
text-align: center;
letter-spacing: 0.3em;
margin: 0px 0px 0px 0px;
color: #ffffff;
}
<body>
<div class="content">
<div class="waveContainer">
<svg id="wave" data-name="Component 1 – 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 1920 1080" preserveAspectRatio="none">
<defs>
<clipPath id="clip-path">
<rect id="Rectangle_1" data-name="Rectangle 1" width="100%" height="100%" fill="#fff" stroke="#707070" stroke-width="1" />
</clipPath>
</defs>
<g id="Mask_Group_1" data-name="Mask Group 1" clip-path="url(#clip-path)">
<path id="Vector_3_3" data-name="Vector 3 3" d="M827.436,426.125C1163.09,111.934,1825.38,153.689,1986.77,0L2157,822.019,12.675,854-34,562.171C215.951,541.969,491.785,740.316,827.436,426.125Z" transform="translate(-46 122)" fill="#00d1ff" />
<path id="Vector_2_2" data-name="Vector 2 2" d="M827.436,426.125C1163.09,111.934,1825.38,153.689,1986.77,0L2157,822.019,12.675,854-34,562.171C215.951,541.969,491.785,740.316,827.436,426.125Z" transform="translate(-37 195)" fill="#00bae2" />
<path id="Vector_1_1" data-name="Vector 1 1" d="M831.436,426.125C1167.09,111.934,1829.38,153.689,1990.77,0L2161,822.019,16.675,854-30,562.171C219.951,541.969,495.785,740.316,831.436,426.125Z" transform="translate(-42 273)" fill="#009abc" />
</g>
</svg>
</div>
<div class="flexParent">
<div class="programmer">
<svg id="programmer" width="594" height="451" viewBox="0 0 594 451" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
<g clip-path="url(#clip0)">
<path d="M287.383 398.746C159.532 389.016 7.06427 289.944 14.8267 187.933C22.589 85.9218 170.256 -9.0419 298.107 0.688383C425.958 10.4187 499.553 201.06 491.791 303.071C484.029 405.082 415.234 408.476 287.383 398.746Z" fill="#00D1FF" />
<path d="M298.106 415.131C445.502 415.131 564.991 407.81 564.991 398.779C564.991 389.748 445.502 382.427 298.106 382.427C150.709 382.427 31.2211 389.748 31.2211 398.779C31.2211 407.81 150.709 415.131 298.106 415.131Z" fill="#004150" />
<path opacity="0.1" d="M298.106 409.329C423.655 409.329 525.433 404.487 525.433 398.515C525.433 392.543 423.655 387.702 298.106 387.702C172.557 387.702 70.7791 392.543 70.7791 398.515C70.7791 404.487 172.557 409.329 298.106 409.329Z" fill="black" />
<path d="M111.919 451C173.731 451 223.839 446.631 223.839 441.242C223.839 435.852 173.731 431.483 111.919 431.483C50.108 431.483 0 435.852 0 441.242C0 446.631 50.108 451 111.919 451Z" fill="#004150" />
<path opacity="0.1" d="M111.919 447.537C164.569 447.537 207.25 444.648 207.25 441.084C207.25 437.52 164.569 434.631 111.919 434.631C59.2698 434.631 16.5889 437.52 16.5889 441.084C16.5889 444.648 59.2698 447.537 111.919 447.537Z" fill="black" />
<path d="M500.116 85.4526H103.48V396.669H500.116V85.4526Z" fill="#3F3D56" />
<path d="M297.285 127.983H199.436C199.28 127.984 199.125 127.953 198.981 127.894C198.836 127.834 198.705 127.747 198.595 127.636C198.484 127.526 198.396 127.395 198.337 127.251C198.277 127.107 198.246 126.952 198.246 126.796C198.246 126.64 198.277 126.485 198.337 126.341C198.396 126.196 198.484 126.065 198.595 125.955C198.705 125.845 198.836 125.757 198.981 125.698C199.125 125.638 199.28 125.608 199.436 125.608H297.285C297.6 125.609 297.901 125.734 298.124 125.957C298.346 126.18 298.47 126.481 298.47 126.796C298.47 127.11 298.346 127.412 298.124 127.635C297.901 127.857 297.6 127.983 297.285 127.983V127.983Z" fill="#F2F2F2" />
<path d="M404.397 141.047H250.498C250.183 141.047 249.881 140.922 249.659 140.699C249.436 140.476 249.311 140.174 249.311 139.859C249.311 139.544 249.436 139.242 249.659 139.02C249.881 138.797 250.183 138.672 250.498 138.672H404.397C404.553 138.672 404.708 138.702 404.852 138.762C404.996 138.822 405.127 138.909 405.237 139.02C405.347 139.13 405.435 139.261 405.495 139.405C405.554 139.549 405.585 139.703 405.585 139.859C405.585 140.015 405.554 140.17 405.495 140.314C405.435 140.458 405.347 140.589 405.237 140.699C405.127 140.809 404.996 140.897 404.852 140.956C404.708 141.016 404.553 141.047 404.397 141.047V141.047Z" fill="#F2F2F2" />
<path d="M297.76 154.11H199.911C199.596 154.11 199.294 153.985 199.071 153.763C198.849 153.54 198.723 153.238 198.723 152.923C198.723 152.608 198.849 152.306 199.071 152.083C199.294 151.86 199.596 151.735 199.911 151.735H297.76C298.075 151.735 298.377 151.86 298.6 152.083C298.823 152.306 298.948 152.608 298.948 152.923C298.948 153.238 298.823 153.54 298.6 153.763C298.377 153.985 298.075 154.11 297.76 154.11V154.11Z" fill="#F2F2F2" />
<path d="M404.397 154.348H306.548C306.233 154.348 305.931 154.223 305.708 154C305.486 153.777 305.36 153.475 305.36 153.16C305.36 152.845 305.486 152.543 305.708 152.321C305.931 152.098 306.233 151.973 306.548 151.973H404.397C404.712 151.973 405.014 152.098 405.237 152.321C405.46 152.543 405.585 152.845 405.585 153.16C405.585 153.475 405.46 153.777 405.237 154C405.014 154.223 404.712 154.348 404.397 154.348V154.348Z" fill="#F2F2F2" />
<path d="M110.833 367.49C111.226 370.297 111.73 373.114 111.596 375.945C111.408 379.898 109.982 383.706 109.719 387.655C109.522 390.604 109.977 393.585 109.567 396.512C109.305 398.386 108.694 400.193 108.316 402.047C107.717 405.069 107.733 408.181 108.365 411.196C108.997 414.211 110.231 417.068 111.994 419.594C112.253 420.027 112.621 420.384 113.061 420.629C113.483 420.785 113.935 420.845 114.384 420.804C118.832 420.713 123.268 420.31 127.659 419.597C127.981 419.584 128.285 419.45 128.512 419.221C128.611 419.07 128.674 418.898 128.697 418.718C129.511 414.532 127.654 410.334 127.182 406.096C126.678 401.57 127.764 397.035 128.842 392.611C129.33 390.429 129.941 388.275 130.67 386.161C131.191 384.738 131.821 383.354 132.272 381.908C132.912 379.636 133.301 377.301 133.433 374.944C133.747 371.225 133.913 367.498 133.932 363.762C134.038 360.222 133.744 356.681 133.054 353.207C132.063 348.809 130.035 344.724 128.024 340.689C126.949 340.947 125.94 341.427 125.061 342.098C122.47 343.776 119.764 345.271 116.965 346.571C115.083 347.445 111.415 348.066 110.221 349.887C109.044 351.683 109.803 355.347 109.893 357.327C110.048 360.727 110.361 364.115 110.833 367.49Z" fill="#2F2E41" />
<path opacity="0.1" d="M110.833 367.49C111.226 370.297 111.73 373.114 111.596 375.945C111.408 379.898 109.982 383.706 109.719 387.655C109.522 390.604 109.977 393.585 109.567 396.512C109.305 398.386 108.694 400.193 108.316 402.047C107.717 405.069 107.733 408.181 108.365 411.196C108.997 414.211 110.231 417.068 111.994 419.594C112.253 420.027 112.621 420.384 113.061 420.629C113.483 420.785 113.935 420.845 114.384 420.804C118.832 420.713 123.268 420.31 127.659 419.597C127.981 419.584 128.285 419.45 128.512 419.221C128.611 419.07 128.674 418.898 128.697 418.718C129.511 414.532 127.654 410.334 127.182 406.096C126.678 401.57 127.764 397.035 128.842 392.611C129.33 390.429 129.941 388.275 130.67 386.161C131.191 384.738 131.821 383.354 132.272 381.908C132.912 379.636 133.301 377.301 133.433 374.944C133.747 371.225 133.913 367.498 133.932 363.762C134.038 360.222 133.744 356.681 133.054 353.207C132.063 348.809 130.035 344.724 128.024 340.689C126.949 340.947 125.94 341.427 125.061 342.098C122.47 343.776 119.764 345.271 116.965 346.571C115.083 347.445 111.415 348.066 110.221 349.887C109.044 351.683 109.803 355.347 109.893 357.327C110.048 360.727 110.361 364.115 110.833 367.49Z" fill="black" />
<path d="M90.1718 307.533C88.1423 312.998 91.1255 318.903 93.7173 324.124C100.102 336.987 104.536 350.713 108.947 364.38C109.277 365.404 109.607 366.521 109.239 367.532C108.921 368.25 108.405 368.862 107.751 369.297C104.71 371.607 100.838 372.43 97.2152 373.638C93.7144 374.807 90.3615 376.378 87.2241 378.322C84.5991 379.949 82.1401 381.827 79.686 383.701L71.8735 389.668C71.3677 390.01 70.9257 390.438 70.5677 390.933C69.8142 392.115 70.1228 393.658 70.498 395.009C71.4915 398.586 72.7706 402.077 74.323 405.449C74.5785 406.188 75.0648 406.826 75.7102 407.267C76.9296 407.922 78.4211 407.054 79.3523 406.029C80.2834 405.005 81.0888 403.73 82.4014 403.29C83.7125 402.851 85.1555 403.383 86.5248 403.19C88.7393 402.88 90.2096 400.839 91.8059 399.273C98.3279 392.874 109.217 393.338 116.391 387.68C117.428 386.752 118.526 385.895 119.678 385.113C120.891 384.396 122.266 384.002 123.524 383.369C127.352 381.441 129.758 377.456 131.047 373.369C132.336 369.282 132.704 364.967 133.63 360.783C134.109 358.62 134.739 356.48 134.952 354.275C135.089 352.223 135.044 350.164 134.818 348.121L132.23 316.094C132.019 313.487 131.808 310.876 131.399 308.293C123.71 308.567 116.027 308.877 108.335 308.968C102.214 309.04 95.9798 309.468 90.1718 307.533Z" fill="#2F2E41" />
<path d="M87.3455 315.025C88.3884 316.703 90.9269 316.668 92.6748 315.749C94.4228 314.829 95.7808 313.284 97.533 312.372C99.8874 311.147 102.673 311.193 105.327 311.268C109.527 311.386 113.779 311.513 117.82 312.664C122 313.855 126.069 316.147 130.391 315.69C131.143 315.61 131.965 315.394 132.375 314.758C132.615 314.298 132.727 313.781 132.702 313.263L132.843 309.486C132.929 308.833 132.825 308.169 132.542 307.574C132.179 307.079 131.682 306.698 131.11 306.477C124.958 303.499 117.942 302.944 111.112 302.71C107.64 302.591 104.166 302.542 100.691 302.563C97.742 302.581 94.2018 302.155 91.3348 302.943C87.487 304 85.3934 311.886 87.3455 315.025Z" fill="#2F2E41" />
<path d="M125.974 216.124C117.913 216.053 110.609 210.732 102.549 210.602C101.575 210.535 100.6 210.703 99.7046 211.093C98.5815 211.659 97.8432 212.753 96.99 213.677C94.6069 216.258 91.1559 217.636 88.7076 220.155C86.412 222.517 85.1353 226.036 86.0416 229.203C86.9479 232.37 90.3685 234.799 93.573 234.038C94.864 229.858 97.5286 226.238 101.135 223.762C103.011 222.559 104.989 221.521 107.045 220.66C110.667 219.018 114.718 217.346 118.5 218.576C119.895 219.103 121.21 219.82 122.408 220.707L128.713 224.943C127.978 222.045 127.317 218.795 125.974 216.124Z" fill="#007089" />
<path d="M92.6445 231.236C91.5742 232.571 93.116 234.506 92.8801 236.201C92.7233 237.327 91.7965 238.187 91.4106 239.257C91.0109 240.365 91.2228 241.592 91.0712 242.76C90.9191 243.61 90.6941 244.444 90.3987 245.255C89.7196 247.677 89.2457 250.152 88.9818 252.653L87.5709 263.19C87.3261 264.776 87.1771 266.375 87.1247 267.979C87.1958 269.177 87.1157 270.38 86.8863 271.559C86.5738 272.71 85.8821 273.717 85.4167 274.816C84.9514 275.915 84.7357 277.244 85.3643 278.258C83.2591 280.011 82.6331 283.455 84.1051 285.766C84.3854 286.126 84.6046 286.53 84.754 286.961C84.8353 287.564 84.7359 288.177 84.4682 288.723L83.0416 292.525C82.6765 293.498 82.561 294.979 83.5762 295.201C82.7353 296.074 82.0802 297.109 81.6504 298.243C81.4419 298.812 81.3796 299.425 81.4692 300.024C81.5588 300.624 81.7975 301.191 82.1633 301.675C82.5177 301.986 82.8195 302.352 83.057 302.759C83.1965 303.327 83.1605 303.923 82.9537 304.47C82.7404 305.3 82.6992 306.165 82.8328 307.012C82.9665 307.859 83.272 308.669 83.7306 309.393C84.2058 310.108 84.8788 310.668 85.6673 311.006C86.4559 311.344 87.3258 311.445 88.1708 311.297C91.0245 310.653 93.5888 309.637 96.4662 310.165C102.661 311.302 108.877 312.444 114.877 314.359C121.725 316.546 128.356 319.753 135.514 320.426C135.985 320.522 136.474 320.446 136.894 320.211C137.258 319.865 137.485 319.399 137.532 318.899C138.269 315.441 139.007 311.984 139.744 308.526C140.636 304.693 141.314 300.814 141.777 296.907C142.029 294.385 142.101 291.849 142.173 289.315L142.743 269.149C143.01 266.177 142.614 263.182 141.582 260.382L138.303 249.912C136.432 243.938 132.138 238.639 130.61 232.568C129.643 228.725 128.928 224.601 126.334 221.606C122.635 217.336 116.236 216.672 110.635 217.406C108.105 217.738 105.553 218.31 103.364 219.622C100.833 221.14 98.9688 223.53 97.1651 225.866C95.6786 227.791 94.1655 229.338 92.6445 231.236Z" fill="#00657B" />
<path d="M105.722 290.551C106.184 292.541 107.153 294.376 107.746 296.331C108.74 299.606 108.656 303.133 109.648 306.409C110.064 307.784 110.667 309.104 110.966 310.509C111.663 313.785 110.645 317.174 109.382 320.276C108.118 323.377 106.579 326.436 106.169 329.76C105.88 332.101 106.295 334.744 108.1 336.264C109.973 337.841 112.695 337.734 115.135 337.524C116.011 337.5 116.876 337.32 117.689 336.993C119.554 336.11 120.34 333.902 120.777 331.884C122.238 325.122 121.821 318.113 121.396 311.208L120.285 293.15C120.071 289.674 119.842 286.125 118.771 282.787C118.381 281.573 117.702 279.119 116.593 278.344C115.494 277.576 112.358 277.542 110.998 277.478C104.617 277.178 104.688 286.085 105.722 290.551Z" fill="#FBBEBE" />
<path d="M112.792 223.877C111.489 223.195 109.847 223.489 108.588 224.249C107.371 225.082 106.306 226.116 105.438 227.307C102.622 230.745 99.6408 234.689 100.058 239.113C100.215 240.772 100.85 242.342 101.281 243.952C103.169 251.009 101.081 258.473 101.32 265.775C101.459 269.994 102.377 274.144 103.291 278.266C103.478 279.107 103.777 280.08 104.59 280.364C105.201 280.576 105.861 280.303 106.466 280.073C108.72 279.24 111.141 278.962 113.524 279.263C115.908 279.563 118.184 280.433 120.16 281.799C121.671 280.993 121.105 278.443 120.766 276.764C119.76 271.775 121.126 266.628 122.786 261.817C124.445 257.006 126.431 252.201 126.706 247.119C127.017 241.361 125.108 235.741 123.224 230.291C122.813 229.101 122.364 227.854 121.411 227.032C120.595 226.425 119.66 225.998 118.667 225.778C116.666 225.187 114.64 224.845 112.792 223.877Z" fill="#2F2E41" />
</g>
<defs>
<clipPath id="clip0">
<rect width="594" height="451" fill="white" />
</clipPath>
</defs>
</svg>
</div>
CODEPEN

Try to put width and height after max-width and max-height
.flexParent {
display: flex;
justify-content: space-between;
align-items: center;
/* FOR TESTING */
max-width: 1600px;
max-height: 500px;
width: 200px;
height: 300px;
opacity: 0.6;
background-color: yellow;
}

Use SVG image on website with rounded corners - showing white for rounded area

I am creating a very simple React page with an SVG image on it. That SVG image has round corners. I can open it up in GIMP and see the rounded corners shown.
Now I add it to my website like this:
import cardBackR from '../img/cards/2B.svg'
...
<img className='card' src={cardBackR} />
And then when I view the page with the card over a background image, the rounded corners show as white:
Here is the full SVG code of that image.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" class="card" face="2B" height="3.5in" preserveAspectRatio="none" viewBox="-120 -168 240 336" width="2.5in">
<defs>
<pattern id="B2" width="6" height="6" patternUnits="userSpaceOnUse">
<path d="M3 0L6 3L3 6L0 3Z" fill="red"></path>
</pattern>
</defs>
<rect width="239" height="335" x="-119.5" y="-167.5" rx="12" ry="12" fill="white" stroke="black"></rect>
<rect fill="url(#B2)" width="216" height="312" x="-108" y="-156" rx="12" ry="12"></rect>
</svg>
I've tested this in both Firefox and Chrome. Any ideas what is causing the rounded corners to fail?

SVG in an IMG src should work fine, provided you escape the # with %23
<style>
body{
background:green;
}
</style>
<img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'
class='card' face='2B' height='3.5in' preserveAspectRatio='none' viewBox='-120 -168 240 336' width='2.5in'>
<defs><pattern id='B2' width='6' height='6' patternUnits='userSpaceOnUse'>
<path d='M3 0L6 3L3 6L0 3Z' fill='red'></path></pattern></defs>
<rect width='239' height='335' x='-119.5' y='-167.5' rx='12' ry='12' fill='white' stroke='black'></rect>
<rect fill='url(%23B2)' width='216' height='312' x='-108' y='-156' rx='12' ry='12'></rect>
</svg>">

Figured out the issue. I unfortunately picked a poor name for my class. That is a special class in Bootstrap and that was adding the following CSS:
.card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid rgba(0, 0, 0, 0.125);
border-radius: 0.25rem;
}

Animating SVG with CSS and an inner <g> tag is its axis

I've got a small problem that I'm sure is just a simple fix, but I just haven't been able to fix it with how I usually do things.
I've created an SVG logo in Sketch, and exported it and just wanted to make a simple loading animation, just rotating circles, one rotating clockwise and one rotating counter-clockwise. This should have been pretty simple, but when I got to the inner circle, it's rotating around a different axis. I put transform-origin: center on it, and it did nothing. I did transform-origin: fill-box and it got it rotating (on its inner axis) in the top left corner, so still not what I wanted. And I've taken the inline transform off, to no avail. The HTML code is here:
<div class='loading-screen'>
<svg width="62px" height="62px" viewBox="0 0 62 62" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 52.5 (67469) - http://www.bohemiancoding.com/sketch -->
<title>Group 11 Copy 9</title>
<desc>Created with Sketch.</desc>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Group-11-Copy-9">
<g id="Group-75-Copy" fill="#425563">
<path d="M30.5749355,61.1497976 C29.8994748,61.1497976 29.3519395,60.6028093 29.3519395,59.9280234 L29.3519395,53.2156572 C29.3519395,52.5408713 29.8994748,51.993883 30.5749355,51.993883 C31.2503961,51.993883 31.7979314,52.5408713 31.7979314,53.2156572 L31.7979314,59.9280234 C31.7979314,60.6028093 31.2503961,61.1497976 30.5749355,61.1497976" id="Fill-1"></path>
<path d="M38.4886365,60.1022789 C37.8362293,60.2768705 37.1655995,59.8901178 36.9908334,59.2383013 L35.2517331,52.7547123 C35.076967,52.1029569 35.4641064,51.432997 36.1165747,51.2583444 C36.7689819,51.0836918 37.4396118,51.4704444 37.614439,52.1222609 L39.3534781,58.605911 C39.5282442,59.2576664 39.1411049,59.9276263 38.4886365,60.1022789" id="Fill-3"></path>
<path d="M45.8315103,57.0489187 C45.2466125,57.3862505 44.498567,57.1860628 44.1608979,56.6017493 L40.801328,50.7886089 C40.4635977,50.2042343 40.6640467,49.4570583 41.2490057,49.1196042 C41.8339035,48.7822724 42.5818878,48.9824601 42.9196181,49.5668347 L46.2791269,55.3799751 C46.6169183,55.9642886 46.4164081,56.7115257 45.8315103,57.0489187" id="Fill-5"></path>
<path d="M52.173949,52.1828792 C51.6963079,52.6600431 50.921968,52.6600431 50.4443881,52.1828792 L45.6932934,47.4365309 C45.2156524,46.959367 45.2156524,46.1858007 45.6932934,45.7086979 C46.1708734,45.231534 46.9452133,45.231534 47.4228543,45.7086979 L52.173949,50.4550462 C52.6515901,50.932149 52.6515901,51.7057153 52.173949,52.1828792" id="Fill-7"></path>
<path d="M57.0571517,45.8797096 C56.7194825,46.4640231 55.971437,46.6642719 55.3865392,46.3268789 L49.5675856,42.9707264 C48.9826878,42.6332723 48.7822388,41.8860963 49.1199691,41.3017828 C49.4576994,40.7173472 50.2056838,40.5171595 50.7905816,40.8544913 L56.6095352,44.210705 C57.194433,44.5480979 57.3948209,45.295335 57.0571517,45.8797096" id="Fill-9"></path>
<path d="M60.0897414,38.5201879 C59.9149141,39.1719433 59.2443454,39.558757 58.5918771,39.3841044 L52.1017433,37.6468026 C51.4493361,37.4722111 51.0621356,36.8022512 51.2369629,36.1504347 C51.4117901,35.4986793 52.08242,35.1118656 52.7348272,35.2865182 L59.2248998,37.02382 C59.8773681,37.1984115 60.2645075,37.8683714 60.0897414,38.5201879" id="Fill-11"></path>
<path d="M61.1496508,30.6054126 C61.1496508,31.2801374 60.6020544,31.8271868 59.9266549,31.8271868 L53.2075151,31.8271868 C52.5321156,31.8271868 51.9845192,31.2801374 51.9845192,30.6054126 C51.9845192,29.9306267 52.5321156,29.3836384 53.2075151,29.3836384 L59.9266549,29.3836384 C60.6020544,29.3836384 61.1496508,29.9306267 61.1496508,30.6054126" id="Fill-13"></path>
<path d="M-2.4459919e-05,30.6056508 C-2.4459919e-05,29.930865 0.547571977,29.3838767 1.22297149,29.3838767 L7.94211125,29.3838767 C8.61751076,29.3838767 9.1651072,29.930865 9.1651072,30.6056508 C9.1651072,31.2803756 8.61751076,31.827425 7.94211125,31.827425 L1.22297149,31.827425 C0.547571977,31.827425 -2.4459919e-05,31.2803756 -2.4459919e-05,30.6056508" id="Fill-16"></path>
<path d="M1.04859673,38.5114766 C0.873769457,37.8596601 1.26096998,37.1897002 1.91337717,37.0151087 L8.40344978,35.2778069 C9.05591812,35.1031543 9.72654795,35.489968 9.90131407,36.1417234 C10.0762025,36.79354 9.68900198,37.4634998 9.03659479,37.6380914 L2.54639987,39.3753932 C1.89399268,39.5500458 1.22336285,39.1632321 1.04859673,38.5114766" id="Fill-19"></path>
<path d="M4.10501649,45.8469538 C3.76728615,45.2626403 3.96767404,44.5154032 4.552633,44.1780103 L10.3715866,40.8217966 C10.9564844,40.4844648 11.7044687,40.6846525 12.0421991,41.2690271 C12.3798682,41.8534017 12.1794804,42.6005777 11.5945825,42.9380317 L5.77562896,46.2941843 C5.19066999,46.6315772 4.44268567,46.4313284 4.10501649,45.8469538" id="Fill-21"></path>
<path d="M30.574697,0.0610581645 C31.2501577,0.0610581645 31.7976929,0.608046464 31.7976929,1.28283234 L31.7976929,7.99519858 C31.7976929,8.66998446 31.2501577,9.21697276 30.574697,9.21697276 C29.8992363,9.21697276 29.351701,8.66998446 29.351701,7.99519858 L29.351701,1.28283234 C29.351701,0.608046464 29.8992363,0.0610581645 30.574697,0.0610581645" id="Fill-23"></path>
<path d="M8.97567736,9.02794597 C9.45331843,8.55078206 10.2276583,8.55078206 10.7052382,9.02794597 L15.4563329,13.7742943 C15.933974,14.2514582 15.933974,15.0250245 15.4563329,15.5021273 C14.978753,15.9792912 14.2044131,15.9792912 13.726772,15.5021273 L8.97567736,10.755779 C8.49803629,10.2786762 8.49803629,9.50510987 8.97567736,9.02794597" id="Fill-25"></path>
<path d="M4.09247466,15.3311767 C4.43014384,14.7468021 5.17818932,14.5465533 5.76308713,14.8839463 L11.5820407,18.2401599 C12.1669385,18.5775529 12.3673876,19.3247899 12.0296572,19.9091034 C11.6919269,20.493478 10.9439426,20.6937268 10.3590448,20.3563339 L4.54009118,17.0001202 C3.95519337,16.6627273 3.75480548,15.9154902 4.09247466,15.3311767" id="Fill-27"></path>
<path d="M1.05988498,22.6906678 C1.23471225,22.0389124 1.90528093,21.6520987 2.55774927,21.8267513 L9.04788304,23.5640531 C9.70035138,23.7387057 10.0874907,24.4086656 9.91266348,25.060421 C9.7378362,25.7121765 9.06720637,26.0989291 8.41479918,25.9243376 L1.92472657,24.1870358 C1.27225823,24.0123831 0.88511886,23.3424233 1.05988498,22.6906678" id="Fill-29"></path>
<path d="M60.1010296,22.6993791 C60.2758569,23.3511345 59.8886564,24.0210944 59.2362492,24.195747 L52.7461766,25.9330488 C52.0937082,26.1076403 51.4230784,25.7208877 51.2483123,25.0691323 C51.0734239,24.4173769 51.4606244,23.747417 52.1130316,23.5727644 L58.6032265,21.8354626 C59.2556337,21.66081 59.9262635,22.0476237 60.1010296,22.6993791" id="Fill-31"></path>
<path d="M57.044616,15.3638714 C57.3823463,15.948246 57.1819584,16.695483 56.5969995,17.0328149 L50.7780459,20.3890286 C50.1931481,20.7264215 49.4452249,20.5261727 49.1074334,19.9417981 C48.7697642,19.3574846 48.9701521,18.6102475 49.5550499,18.2728546 L55.3740035,14.916702 C55.9589625,14.5793091 56.7069468,14.7794968 57.044616,15.3638714" id="Fill-33"></path>
<path d="M52.1737717,9.02776881 C52.6514127,9.50493272 52.6514127,10.278499 52.1737717,10.7556019 L47.422677,15.5019502 C46.9450359,15.9791141 46.170696,15.9791141 45.6931161,15.5019502 C45.215475,15.0248474 45.215475,14.25122 45.6931161,13.7741171 L50.4442108,9.02776881 C50.9217907,8.55060491 51.6961306,8.55060491 52.1737717,9.02776881" id="Fill-35"></path>
<path d="M45.8642316,4.14943833 C46.4491906,4.48683127 46.6496396,5.23406836 46.3119093,5.81838186 L42.9523394,11.6315223 C42.614609,12.2158358 41.8666859,12.4160846 41.2817269,12.0786917 C40.6967679,11.7412987 40.4963801,10.9940616 40.8340492,10.4097481 L44.1936191,4.59660768 C44.5313495,4.01229418 45.2793338,3.81204539 45.8642316,4.14943833" id="Fill-37"></path>
<path d="M38.4973565,1.11987821 C39.1498248,1.29453083 39.5369642,1.9644907 39.3621981,2.61624613 L37.623159,9.09989625 C37.4483317,9.75165168 36.7777019,10.1384654 36.1252947,9.96381277 C35.4728264,9.78922124 35.085687,9.11926137 35.2604531,8.46744485 L36.9995533,1.98379473 C37.1743195,1.3320393 37.8449493,0.945225592 38.4973565,1.11987821" id="Fill-39"></path>
<path d="M22.6609898,1.1085768 C23.313397,0.933924181 23.9840268,1.32073789 24.158793,1.97249332 L25.8978932,8.45614344 C26.0726593,9.10795996 25.68552,9.77785874 25.0330516,9.95251136 C24.3806444,10.127164 23.7100146,9.74035027 23.5351873,9.08859484 L21.7961482,2.60494472 C21.6213821,1.95318929 22.0085215,1.28322942 22.6609898,1.1085768" id="Fill-49"></path>
<path d="M15.3181221,4.16193708 C15.9030199,3.82460523 16.6510654,4.02479293 16.9887346,4.60916752 L20.3483045,10.4222469 C20.6860348,11.0065604 20.4856469,11.7537975 19.9006268,12.0911904 C19.315729,12.4285833 18.5677447,12.2283346 18.2300143,11.6440211 L14.8705056,5.8309417 C14.5327141,5.24656711 14.7332243,4.49933002 15.3181221,4.16193708" id="Fill-51"></path>
<path d="M8.97586081,52.1831236 C8.49821974,51.7059597 8.49821974,50.9323323 8.97586081,50.4552905 L13.7269555,45.7089422 C14.2045965,45.2317783 14.9789364,45.2317783 15.4565164,45.7089422 C15.9341574,46.186045 15.9341574,46.9596113 15.4565164,47.4367753 L10.7054217,52.1831236 C10.2278418,52.6602875 9.45350188,52.6602875 8.97586081,52.1831236" id="Fill-53"></path>
<path d="M15.2853948,57.0613869 C14.7004358,56.724055 14.4999868,55.9768179 14.8377782,55.3924433 L18.197287,49.5793029 C18.5350173,48.9949894 19.2829405,48.7948017 19.8678994,49.1321335 C20.4528584,49.4695876 20.6532463,50.2167636 20.3155771,50.8010771 L16.9560072,56.6142175 C16.618338,57.1985921 15.8702926,57.3987798 15.2853948,57.0613869" id="Fill-65"></path>
<path d="M22.652276,60.090947 C21.9998076,59.9163555 21.6126683,59.2463956 21.7874344,58.5946401 L23.5264735,52.1109289 C23.7013008,51.4591735 24.3719306,51.0723598 25.0243378,51.2470735 C25.6768061,51.421665 26.0639455,52.0916249 25.8891794,52.7433803 L24.1500791,59.2270305 C23.975313,59.8787859 23.3046832,60.2655996 22.652276,60.090947" id="Fill-73"></path>
</g>
<g id="Group" transform="translate(12.068571, 12.068571)" fill="#FF6900">
<path d="M18.506364,36.2688224 C17.8309034,36.2688224 17.2833681,35.7218341 17.2833681,35.0470483 L17.2833681,31.3817257 C17.2833681,30.7069399 17.8309034,30.1599516 18.506364,30.1599516 C19.1818247,30.1599516 19.72936,30.7069399 19.72936,31.3817257 L19.72936,35.0470483 C19.72936,35.7218341 19.1818247,36.2688224 18.506364,36.2688224" id="Fill-41"></path>
<path d="M30.1263727,18.5120575 C30.1263727,17.8372716 30.673908,17.2902833 31.3493686,17.2902833 L35.0183565,17.2902833 C35.6938171,17.2902833 36.2413524,17.8372716 36.2413524,18.5120575 C36.2413524,19.1868434 35.6938171,19.7338317 35.0183565,19.7338317 L31.3493686,19.7338317 C30.673908,19.7338317 30.1263727,19.1868434 30.1263727,18.5120575" id="Fill-43"></path>
<path d="M28.560785,24.3360045 C28.8984542,23.7516299 29.6464996,23.5513811 30.2313975,23.8888352 L33.4088632,25.7214964 C33.9938222,26.0588283 34.1942101,26.8060654 33.8565409,27.39044 C33.5187494,27.9747535 32.7708262,28.1750022 32.1858673,27.8376093 L29.0084015,26.004948 C28.4235037,25.6676162 28.2230547,24.920318 28.560785,24.3360045" id="Fill-45"></path>
<path d="M24.3010228,28.6082189 C24.8859818,28.2708871 25.6339661,28.4710748 25.9716964,29.0553883 L27.8061904,32.2296798 C28.1439207,32.8140544 27.9434717,33.5612915 27.3585127,33.8986844 C26.7736149,34.2360773 26.0256306,34.0358285 25.6879002,33.451454 L23.8534063,30.2771625 C23.515676,29.692849 23.716125,28.9456119 24.3010228,28.6082189" id="Fill-47"></path>
<path d="M18.4956139,0.816643903 C19.1710746,0.816643903 19.7186099,1.3636322 19.7186099,2.03841808 L19.7186099,5.70374061 C19.7186099,6.3784654 19.1710746,6.92551479 18.4956139,6.92551479 C17.8201532,6.92551479 17.272618,6.3784654 17.272618,5.70374061 L17.272618,2.03841808 C17.272618,1.3636322 17.8201532,0.816643903 18.4956139,0.816643903" id="Fill-55"></path>
<path d="M8.44118686,12.7494618 C8.10351768,13.3338364 7.35547221,13.5340852 6.77057439,13.1966923 L3.59310861,11.364031 C3.00814965,11.0266381 2.80776176,10.279401 3.14543094,9.69502639 C3.48316127,9.11071289 4.2311456,8.9104641 4.81610456,9.24785704 L7.99357034,11.0805183 C8.57846816,11.4179112 8.77885604,12.1651483 8.44118686,12.7494618" id="Fill-57"></path>
<path d="M12.700894,8.47724741 C12.1159962,8.81464035 11.3680119,8.61439156 11.0302815,8.03001697 L9.19578759,4.85578657 C8.85805726,4.27141198 9.0585063,3.5241749 9.64340411,3.18678196 C10.2283631,2.84945011 10.9763474,3.04963781 11.3140777,3.63401239 L13.1485717,6.8082428 C13.486302,7.39261738 13.285853,8.13985447 12.700894,8.47724741" id="Fill-59"></path>
<path d="M24.2842983,8.48953846 L24.2842372,8.48953846 C23.6993394,8.15214552 23.4988903,7.40496952 23.8366207,6.82059493 L25.6711146,3.64630344 C26.0088449,3.06192885 26.7568293,2.86174115 27.3417271,3.199073 L27.3417882,3.199073 C27.926686,3.53646594 28.1271351,4.28370303 27.7894047,4.86807762 L25.9549108,8.04236911 C25.6171805,8.6267437 24.8691962,8.8269314 24.2842983,8.48953846" id="Fill-61"></path>
<path d="M28.560785,12.7450207 C28.2230547,12.1606461 28.4235037,11.413409 29.0084015,11.0760772 L32.1858673,9.2433548 C32.7708262,8.90602295 33.5187494,9.10621065 33.8565409,9.69058524 C34.1942101,10.2749598 33.9938222,11.0221358 33.4088632,11.3595288 L30.2313975,13.19219 C29.6464996,13.529583 28.8984542,13.3293953 28.560785,12.7450207" id="Fill-63"></path>
<path d="M0.772922751,18.5515452 C0.772922751,17.8768204 1.32045804,17.329771 1.9959187,17.329771 L5.66490656,17.329771 C6.34036722,17.329771 6.88790251,17.8768204 6.88790251,18.5515452 C6.88790251,19.2263311 6.34036722,19.7733194 5.66490656,19.7733194 L1.9959187,19.7733194 C1.32045804,19.7733194 0.772922751,19.2263311 0.772922751,18.5515452" id="Fill-67"></path>
<path d="M12.7176735,28.5959279 C13.3026325,28.9332597 13.5030815,29.6805579 13.16529,30.2648714 L11.3307961,33.4391629 C10.9931269,34.0235375 10.2451426,34.2237252 9.66018362,33.8863933 C9.0752858,33.5490004 8.87483677,32.8017633 9.2125671,32.2173887 L11.047061,29.0430972 C11.3847302,28.4587837 12.1327757,28.258596 12.7176735,28.5959279" id="Fill-69"></path>
<path d="M8.44118686,24.3404762 C8.77885604,24.9247897 8.57846816,25.6720268 7.99357034,26.0094197 L4.81610456,27.842081 C4.2311456,28.1794739 3.48316127,27.9792252 3.14543094,27.3949117 C2.80776176,26.8105371 3.00814965,26.0633 3.59310861,25.725907 L6.77057439,23.8932458 C7.35547221,23.5558528 8.10351768,23.7561016 8.44118686,24.3404762" id="Fill-71"></path>
</g>
</g>
</g>
</svg>
</div>
And the SCSS code is here:
* {
margin: 0;
padding: 0;
}
.loading-screen {
height: 100vh;
width: 100vw;
background-color: #f3f4f5;
position: fixed;
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
g#Group-75-Copy {
transform-origin: center;
animation: backwards-spin 3s infinite linear;
}
g#Group {
transform-origin: center;
transform-box: fill-box;
animation: spin 3s infinite linear;
}
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes backwards-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
}
And here's a link to a working codepen: https://codepen.io/adammcgurk/pen/oJmLxW
So the TL;DR question is:
How can I get the orange circle to be in the middle as opposed to in the top left corner of the SVG?

I would add some translation to the animation to rectify the position:
* {
margin: 0;
padding: 0;
}
.loading-screen {
height: 100vh;
width: 100vw;
background-color: #f3f4f5;
position: fixed;
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
}
svg {
width: 62px;
height: 62px;
}
g#Group-75-Copy {
transform-origin: center;
animation: backwards-spin 3s infinite linear;
}
g#Group {
transform-origin: center;
transform-box:fill-box;
animation: spin 3s infinite linear;
}
#keyframes spin {
0% {
transform:translate(35%,35%) rotate(0deg);
}
100% {
transform:translate(35%,35%) rotate(360deg);
}
}
#keyframes backwards-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
}
<div class='loading-screen'>
<svg>
<g id="Page-1" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Group-11-Copy-9">
<g id="Group-75-Copy" fill="#425563">
<path d="M30.5749355,61.1497976 C29.8994748,61.1497976 29.3519395,60.6028093 29.3519395,59.9280234 L29.3519395,53.2156572 C29.3519395,52.5408713 29.8994748,51.993883 30.5749355,51.993883 C31.2503961,51.993883 31.7979314,52.5408713 31.7979314,53.2156572 L31.7979314,59.9280234 C31.7979314,60.6028093 31.2503961,61.1497976 30.5749355,61.1497976" id="Fill-1"></path>
<path d="M38.4886365,60.1022789 C37.8362293,60.2768705 37.1655995,59.8901178 36.9908334,59.2383013 L35.2517331,52.7547123 C35.076967,52.1029569 35.4641064,51.432997 36.1165747,51.2583444 C36.7689819,51.0836918 37.4396118,51.4704444 37.614439,52.1222609 L39.3534781,58.605911 C39.5282442,59.2576664 39.1411049,59.9276263 38.4886365,60.1022789" id="Fill-3"></path>
<path d="M45.8315103,57.0489187 C45.2466125,57.3862505 44.498567,57.1860628 44.1608979,56.6017493 L40.801328,50.7886089 C40.4635977,50.2042343 40.6640467,49.4570583 41.2490057,49.1196042 C41.8339035,48.7822724 42.5818878,48.9824601 42.9196181,49.5668347 L46.2791269,55.3799751 C46.6169183,55.9642886 46.4164081,56.7115257 45.8315103,57.0489187" id="Fill-5"></path>
<path d="M52.173949,52.1828792 C51.6963079,52.6600431 50.921968,52.6600431 50.4443881,52.1828792 L45.6932934,47.4365309 C45.2156524,46.959367 45.2156524,46.1858007 45.6932934,45.7086979 C46.1708734,45.231534 46.9452133,45.231534 47.4228543,45.7086979 L52.173949,50.4550462 C52.6515901,50.932149 52.6515901,51.7057153 52.173949,52.1828792" id="Fill-7"></path>
<path d="M57.0571517,45.8797096 C56.7194825,46.4640231 55.971437,46.6642719 55.3865392,46.3268789 L49.5675856,42.9707264 C48.9826878,42.6332723 48.7822388,41.8860963 49.1199691,41.3017828 C49.4576994,40.7173472 50.2056838,40.5171595 50.7905816,40.8544913 L56.6095352,44.210705 C57.194433,44.5480979 57.3948209,45.295335 57.0571517,45.8797096" id="Fill-9"></path>
<path d="M60.0897414,38.5201879 C59.9149141,39.1719433 59.2443454,39.558757 58.5918771,39.3841044 L52.1017433,37.6468026 C51.4493361,37.4722111 51.0621356,36.8022512 51.2369629,36.1504347 C51.4117901,35.4986793 52.08242,35.1118656 52.7348272,35.2865182 L59.2248998,37.02382 C59.8773681,37.1984115 60.2645075,37.8683714 60.0897414,38.5201879" id="Fill-11"></path>
<path d="M61.1496508,30.6054126 C61.1496508,31.2801374 60.6020544,31.8271868 59.9266549,31.8271868 L53.2075151,31.8271868 C52.5321156,31.8271868 51.9845192,31.2801374 51.9845192,30.6054126 C51.9845192,29.9306267 52.5321156,29.3836384 53.2075151,29.3836384 L59.9266549,29.3836384 C60.6020544,29.3836384 61.1496508,29.9306267 61.1496508,30.6054126" id="Fill-13"></path>
<path d="M-2.4459919e-05,30.6056508 C-2.4459919e-05,29.930865 0.547571977,29.3838767 1.22297149,29.3838767 L7.94211125,29.3838767 C8.61751076,29.3838767 9.1651072,29.930865 9.1651072,30.6056508 C9.1651072,31.2803756 8.61751076,31.827425 7.94211125,31.827425 L1.22297149,31.827425 C0.547571977,31.827425 -2.4459919e-05,31.2803756 -2.4459919e-05,30.6056508" id="Fill-16"></path>
<path d="M1.04859673,38.5114766 C0.873769457,37.8596601 1.26096998,37.1897002 1.91337717,37.0151087 L8.40344978,35.2778069 C9.05591812,35.1031543 9.72654795,35.489968 9.90131407,36.1417234 C10.0762025,36.79354 9.68900198,37.4634998 9.03659479,37.6380914 L2.54639987,39.3753932 C1.89399268,39.5500458 1.22336285,39.1632321 1.04859673,38.5114766" id="Fill-19"></path>
<path d="M4.10501649,45.8469538 C3.76728615,45.2626403 3.96767404,44.5154032 4.552633,44.1780103 L10.3715866,40.8217966 C10.9564844,40.4844648 11.7044687,40.6846525 12.0421991,41.2690271 C12.3798682,41.8534017 12.1794804,42.6005777 11.5945825,42.9380317 L5.77562896,46.2941843 C5.19066999,46.6315772 4.44268567,46.4313284 4.10501649,45.8469538" id="Fill-21"></path>
<path d="M30.574697,0.0610581645 C31.2501577,0.0610581645 31.7976929,0.608046464 31.7976929,1.28283234 L31.7976929,7.99519858 C31.7976929,8.66998446 31.2501577,9.21697276 30.574697,9.21697276 C29.8992363,9.21697276 29.351701,8.66998446 29.351701,7.99519858 L29.351701,1.28283234 C29.351701,0.608046464 29.8992363,0.0610581645 30.574697,0.0610581645" id="Fill-23"></path>
<path d="M8.97567736,9.02794597 C9.45331843,8.55078206 10.2276583,8.55078206 10.7052382,9.02794597 L15.4563329,13.7742943 C15.933974,14.2514582 15.933974,15.0250245 15.4563329,15.5021273 C14.978753,15.9792912 14.2044131,15.9792912 13.726772,15.5021273 L8.97567736,10.755779 C8.49803629,10.2786762 8.49803629,9.50510987 8.97567736,9.02794597" id="Fill-25"></path>
<path d="M4.09247466,15.3311767 C4.43014384,14.7468021 5.17818932,14.5465533 5.76308713,14.8839463 L11.5820407,18.2401599 C12.1669385,18.5775529 12.3673876,19.3247899 12.0296572,19.9091034 C11.6919269,20.493478 10.9439426,20.6937268 10.3590448,20.3563339 L4.54009118,17.0001202 C3.95519337,16.6627273 3.75480548,15.9154902 4.09247466,15.3311767" id="Fill-27"></path>
<path d="M1.05988498,22.6906678 C1.23471225,22.0389124 1.90528093,21.6520987 2.55774927,21.8267513 L9.04788304,23.5640531 C9.70035138,23.7387057 10.0874907,24.4086656 9.91266348,25.060421 C9.7378362,25.7121765 9.06720637,26.0989291 8.41479918,25.9243376 L1.92472657,24.1870358 C1.27225823,24.0123831 0.88511886,23.3424233 1.05988498,22.6906678" id="Fill-29"></path>
<path d="M60.1010296,22.6993791 C60.2758569,23.3511345 59.8886564,24.0210944 59.2362492,24.195747 L52.7461766,25.9330488 C52.0937082,26.1076403 51.4230784,25.7208877 51.2483123,25.0691323 C51.0734239,24.4173769 51.4606244,23.747417 52.1130316,23.5727644 L58.6032265,21.8354626 C59.2556337,21.66081 59.9262635,22.0476237 60.1010296,22.6993791" id="Fill-31"></path>
<path d="M57.044616,15.3638714 C57.3823463,15.948246 57.1819584,16.695483 56.5969995,17.0328149 L50.7780459,20.3890286 C50.1931481,20.7264215 49.4452249,20.5261727 49.1074334,19.9417981 C48.7697642,19.3574846 48.9701521,18.6102475 49.5550499,18.2728546 L55.3740035,14.916702 C55.9589625,14.5793091 56.7069468,14.7794968 57.044616,15.3638714" id="Fill-33"></path>
<path d="M52.1737717,9.02776881 C52.6514127,9.50493272 52.6514127,10.278499 52.1737717,10.7556019 L47.422677,15.5019502 C46.9450359,15.9791141 46.170696,15.9791141 45.6931161,15.5019502 C45.215475,15.0248474 45.215475,14.25122 45.6931161,13.7741171 L50.4442108,9.02776881 C50.9217907,8.55060491 51.6961306,8.55060491 52.1737717,9.02776881" id="Fill-35"></path>
<path d="M45.8642316,4.14943833 C46.4491906,4.48683127 46.6496396,5.23406836 46.3119093,5.81838186 L42.9523394,11.6315223 C42.614609,12.2158358 41.8666859,12.4160846 41.2817269,12.0786917 C40.6967679,11.7412987 40.4963801,10.9940616 40.8340492,10.4097481 L44.1936191,4.59660768 C44.5313495,4.01229418 45.2793338,3.81204539 45.8642316,4.14943833" id="Fill-37"></path>
<path d="M38.4973565,1.11987821 C39.1498248,1.29453083 39.5369642,1.9644907 39.3621981,2.61624613 L37.623159,9.09989625 C37.4483317,9.75165168 36.7777019,10.1384654 36.1252947,9.96381277 C35.4728264,9.78922124 35.085687,9.11926137 35.2604531,8.46744485 L36.9995533,1.98379473 C37.1743195,1.3320393 37.8449493,0.945225592 38.4973565,1.11987821" id="Fill-39"></path>
<path d="M22.6609898,1.1085768 C23.313397,0.933924181 23.9840268,1.32073789 24.158793,1.97249332 L25.8978932,8.45614344 C26.0726593,9.10795996 25.68552,9.77785874 25.0330516,9.95251136 C24.3806444,10.127164 23.7100146,9.74035027 23.5351873,9.08859484 L21.7961482,2.60494472 C21.6213821,1.95318929 22.0085215,1.28322942 22.6609898,1.1085768" id="Fill-49"></path>
<path d="M15.3181221,4.16193708 C15.9030199,3.82460523 16.6510654,4.02479293 16.9887346,4.60916752 L20.3483045,10.4222469 C20.6860348,11.0065604 20.4856469,11.7537975 19.9006268,12.0911904 C19.315729,12.4285833 18.5677447,12.2283346 18.2300143,11.6440211 L14.8705056,5.8309417 C14.5327141,5.24656711 14.7332243,4.49933002 15.3181221,4.16193708" id="Fill-51"></path>
<path d="M8.97586081,52.1831236 C8.49821974,51.7059597 8.49821974,50.9323323 8.97586081,50.4552905 L13.7269555,45.7089422 C14.2045965,45.2317783 14.9789364,45.2317783 15.4565164,45.7089422 C15.9341574,46.186045 15.9341574,46.9596113 15.4565164,47.4367753 L10.7054217,52.1831236 C10.2278418,52.6602875 9.45350188,52.6602875 8.97586081,52.1831236" id="Fill-53"></path>
<path d="M15.2853948,57.0613869 C14.7004358,56.724055 14.4999868,55.9768179 14.8377782,55.3924433 L18.197287,49.5793029 C18.5350173,48.9949894 19.2829405,48.7948017 19.8678994,49.1321335 C20.4528584,49.4695876 20.6532463,50.2167636 20.3155771,50.8010771 L16.9560072,56.6142175 C16.618338,57.1985921 15.8702926,57.3987798 15.2853948,57.0613869" id="Fill-65"></path>
<path d="M22.652276,60.090947 C21.9998076,59.9163555 21.6126683,59.2463956 21.7874344,58.5946401 L23.5264735,52.1109289 C23.7013008,51.4591735 24.3719306,51.0723598 25.0243378,51.2470735 C25.6768061,51.421665 26.0639455,52.0916249 25.8891794,52.7433803 L24.1500791,59.2270305 C23.975313,59.8787859 23.3046832,60.2655996 22.652276,60.090947" id="Fill-73"></path>
</g>
<g id="Group" fill="#FF6900">
<path d="M18.506364,36.2688224 C17.8309034,36.2688224 17.2833681,35.7218341 17.2833681,35.0470483 L17.2833681,31.3817257 C17.2833681,30.7069399 17.8309034,30.1599516 18.506364,30.1599516 C19.1818247,30.1599516 19.72936,30.7069399 19.72936,31.3817257 L19.72936,35.0470483 C19.72936,35.7218341 19.1818247,36.2688224 18.506364,36.2688224" id="Fill-41"></path>
<path d="M30.1263727,18.5120575 C30.1263727,17.8372716 30.673908,17.2902833 31.3493686,17.2902833 L35.0183565,17.2902833 C35.6938171,17.2902833 36.2413524,17.8372716 36.2413524,18.5120575 C36.2413524,19.1868434 35.6938171,19.7338317 35.0183565,19.7338317 L31.3493686,19.7338317 C30.673908,19.7338317 30.1263727,19.1868434 30.1263727,18.5120575" id="Fill-43"></path>
<path d="M28.560785,24.3360045 C28.8984542,23.7516299 29.6464996,23.5513811 30.2313975,23.8888352 L33.4088632,25.7214964 C33.9938222,26.0588283 34.1942101,26.8060654 33.8565409,27.39044 C33.5187494,27.9747535 32.7708262,28.1750022 32.1858673,27.8376093 L29.0084015,26.004948 C28.4235037,25.6676162 28.2230547,24.920318 28.560785,24.3360045" id="Fill-45"></path>
<path d="M24.3010228,28.6082189 C24.8859818,28.2708871 25.6339661,28.4710748 25.9716964,29.0553883 L27.8061904,32.2296798 C28.1439207,32.8140544 27.9434717,33.5612915 27.3585127,33.8986844 C26.7736149,34.2360773 26.0256306,34.0358285 25.6879002,33.451454 L23.8534063,30.2771625 C23.515676,29.692849 23.716125,28.9456119 24.3010228,28.6082189" id="Fill-47"></path>
<path d="M18.4956139,0.816643903 C19.1710746,0.816643903 19.7186099,1.3636322 19.7186099,2.03841808 L19.7186099,5.70374061 C19.7186099,6.3784654 19.1710746,6.92551479 18.4956139,6.92551479 C17.8201532,6.92551479 17.272618,6.3784654 17.272618,5.70374061 L17.272618,2.03841808 C17.272618,1.3636322 17.8201532,0.816643903 18.4956139,0.816643903" id="Fill-55"></path>
<path d="M8.44118686,12.7494618 C8.10351768,13.3338364 7.35547221,13.5340852 6.77057439,13.1966923 L3.59310861,11.364031 C3.00814965,11.0266381 2.80776176,10.279401 3.14543094,9.69502639 C3.48316127,9.11071289 4.2311456,8.9104641 4.81610456,9.24785704 L7.99357034,11.0805183 C8.57846816,11.4179112 8.77885604,12.1651483 8.44118686,12.7494618" id="Fill-57"></path>
<path d="M12.700894,8.47724741 C12.1159962,8.81464035 11.3680119,8.61439156 11.0302815,8.03001697 L9.19578759,4.85578657 C8.85805726,4.27141198 9.0585063,3.5241749 9.64340411,3.18678196 C10.2283631,2.84945011 10.9763474,3.04963781 11.3140777,3.63401239 L13.1485717,6.8082428 C13.486302,7.39261738 13.285853,8.13985447 12.700894,8.47724741" id="Fill-59"></path>
<path d="M24.2842983,8.48953846 L24.2842372,8.48953846 C23.6993394,8.15214552 23.4988903,7.40496952 23.8366207,6.82059493 L25.6711146,3.64630344 C26.0088449,3.06192885 26.7568293,2.86174115 27.3417271,3.199073 L27.3417882,3.199073 C27.926686,3.53646594 28.1271351,4.28370303 27.7894047,4.86807762 L25.9549108,8.04236911 C25.6171805,8.6267437 24.8691962,8.8269314 24.2842983,8.48953846" id="Fill-61"></path>
<path d="M28.560785,12.7450207 C28.2230547,12.1606461 28.4235037,11.413409 29.0084015,11.0760772 L32.1858673,9.2433548 C32.7708262,8.90602295 33.5187494,9.10621065 33.8565409,9.69058524 C34.1942101,10.2749598 33.9938222,11.0221358 33.4088632,11.3595288 L30.2313975,13.19219 C29.6464996,13.529583 28.8984542,13.3293953 28.560785,12.7450207" id="Fill-63"></path>
<path d="M0.772922751,18.5515452 C0.772922751,17.8768204 1.32045804,17.329771 1.9959187,17.329771 L5.66490656,17.329771 C6.34036722,17.329771 6.88790251,17.8768204 6.88790251,18.5515452 C6.88790251,19.2263311 6.34036722,19.7733194 5.66490656,19.7733194 L1.9959187,19.7733194 C1.32045804,19.7733194 0.772922751,19.2263311 0.772922751,18.5515452" id="Fill-67"></path>
<path d="M12.7176735,28.5959279 C13.3026325,28.9332597 13.5030815,29.6805579 13.16529,30.2648714 L11.3307961,33.4391629 C10.9931269,34.0235375 10.2451426,34.2237252 9.66018362,33.8863933 C9.0752858,33.5490004 8.87483677,32.8017633 9.2125671,32.2173887 L11.047061,29.0430972 C11.3847302,28.4587837 12.1327757,28.258596 12.7176735,28.5959279" id="Fill-69"></path>
<path d="M8.44118686,24.3404762 C8.77885604,24.9247897 8.57846816,25.6720268 7.99357034,26.0094197 L4.81610456,27.842081 C4.2311456,28.1794739 3.48316127,27.9792252 3.14543094,27.3949117 C2.80776176,26.8105371 3.00814965,26.0633 3.59310861,25.725907 L6.77057439,23.8932458 C7.35547221,23.5558528 8.10351768,23.7561016 8.44118686,24.3404762" id="Fill-71"></path>
</g>
</g>
</g>
</svg>
</div>

Pure svg and smil
Option using stroke-dasharray
We divide one circle into 12 parts, the second circle into 24 parts.
Set the circles to a wide stroke.
Use the animation of the rotation of circles in different directions
.container {
width:50%;
height:50%;
}
<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 400 400" preserveAspectRatio="xMinYMin meet" >
<circle fill="none" cx="200" cy="200" r="50" stroke="#425563" stroke-width="14" stroke-dasharray="4 9.08" >
<animateTransform
attributeName="transform"
type="rotate"
dur="2s"
values="0 200 200; -360 200 200"
repeatCount="indefinite" />
</circle>
<circle fill="none" cx="200" cy="200" r="25" stroke="#FF6900" stroke-width="12" stroke-dasharray="4 9.08" >
<animateTransform
attributeName="transform"
type="rotate"
dur="2s"
values="0 200 200; 360 200 200"
repeatCount="indefinite" />
</circle>
</svg>
</div>

SVG layout properties

I am trying to place separate SVG code at the bottom inline but am unsure as to how as this differs from usual HTML layout properties.
I have wrapped each SVG in a common div as shown:
.svg-container {
width: 60px;
display: inline-block;
}
<div class="svg-container">
<svg viewBox="0 0 128 128">
<path fill="#E44D26" d="M27.854 116.354l-8.043-90.211h88.378l-8.051
90.197-36.192 10.033z"></path><path fill="#F16529" d="M64
118.704l29.244-8.108 6.881-77.076h-36.125z"></path><path fill="#EBEBEB"
d="M64 66.978h-14.641l-1.01-11.331h15.651v-11.064h-27.743l.264 2.969
2.72 30.489h24.759zM64 95.711l-.049.013-12.321-3.328-.788-8.823h-
11.107l1.55 17.372 22.664 6.292.051-.015z"></path><path d="M28.034
1.627h5.622v5.556h5.144v-5.556h5.623v16.822h-5.623v-5.633h-
5.143v5.633h-
5.623v-16.822zM51.816 7.206h-4.95v-5.579h15.525v5.579h-4.952v11.243h-
5.623v-11.243zM64.855 1.627h5.862l3.607 5.911 3.603-
5.911h5.865v16.822h-
5.601v-8.338l-3.867 5.981h-.098l-3.87-5.981v8.338h-5.502v-
16.822zM86.591
1.627h5.624v11.262h7.907v5.561h-13.531v-16.823z"></path><path
fill="#fff" d="M63.962 66.978v11.063h13.624l-1.284 14.349-12.34
3.331v11.51l22.682-6.286.166-1.87 2.6-29.127.27-2.97h-2.982zM63.962
44.583v11.064h26.725l.221-2.487.505-5.608.265-2.969z"></path>
</svg>
</div>
<div class="svg-container">
<svg viewBox="0 0 128 128">
<path fill="#F0DB4F" d="M1.408 1.408h125.184v125.185h-125.184z"></path>
<path fill="#323330" d="M116.347 96.736c-.917-5.711-4.641-10.508-
15.672-
14.981-3.832-1.761-8.104-3.022-9.377-5.926-.452-1.69-.512-2.642-.226-
3.665.821-3.32 4.784-4.355 7.925-3.403 2.023.678 3.938 2.237 5.093
4.724
5.402-3.498 5.391-3.475 9.163-5.879-1.381-2.141-2.118-3.129-3.022-
4.045-
3.249-3.629-7.676-5.498-14.756-5.355l-3.688.477c-3.534.893-6.902 2.748-
8.877 5.235-5.926 6.724-4.236 18.492 2.975 23.335 7.104 5.332 17.54
6.545 18.873 11.531 1.297 6.104-4.486 8.08-10.234 7.378-4.236-.881-
6.592-3.034-9.139-6.949-4.688 2.713-4.688 2.713-9.508 5.485 1.143 2.499
2.344 3.63 4.26 5.795 9.068 9.198 31.76 8.746 35.83-5.176.165-.478
1.261-3.666.38-8.581zm-46.885-37.793h-11.709l-.048 30.272c0 6.438.333
12.34-.714 14.149-1.713 3.558-6.152 3.117-8.175 2.427-2.059-1.012-
3.106-
2.451-4.319-4.485-.333-.584-.583-1.036-.667-1.071l-9.52 5.83c1.583
3.249
3.915 6.069 6.902 7.901 4.462 2.678 10.459 3.499 16.731 2.059 4.082-
1.189 7.604-3.652 9.448-7.401 2.666-4.915 2.094-10.864 2.07-17.444.06-
10.735.001-21.468.001-32.237z"></path>
</svg>
</div>
If I adjust the coordinates in the viewbox to correlate with viewBox = <min-x> <min-y> <width> <height> such as <svg viewBox="0 -250 128 128"> the position doesn't change.
Any help with someone with svg experience would be greatly appreciated!

Apparently, you tried to delete the text "HTML" above the Html5 logo
in the SVG file and erased the extra part of the path. I took the
original HTML5 logo svg file and added the css markup.
The "JS" logo was not in the center of the viewport. For the
location of JS characters in the center of the viewport added:
width="100" height="100" viewBox="12 25 128 128"
The first two attributes of the viewBox shift the JS characters to the left and up to 12px and 25px respectively.
If I correctly understood your question, it should look like this:
.svg-container {
position:absolute;
top:2%;
left:1%;
width: 120px;
display: inline-block;
}
.svg-container2 {
position:absolute;
top:16%;
left:20%;
width: 60px;
display: inline-block;
}
.wrap {
width:1000px;
height:120px;
position:relative;
padding:0.5em;
}
<div class="wrap">
<div class="svg-container">
<svg viewBox="0 0 512 512">
<title>HTML5 Logo</title>
<polygon fill="#E44D26" points="107.644,470.877 74.633,100.62 437.367,100.62 404.321,470.819 255.778,512"/>
<polygon fill="#F16529" points="256,480.523 376.03,447.246 404.27,130.894 256,130.894"/>
<polygon fill="#EBEBEB" points="256,268.217 195.91,268.217 191.76,221.716 256,221.716 256,176.305 255.843,176.305 142.132,176.305 143.219,188.488 154.38,313.627 256,313.627"/>
<polygon fill="#EBEBEB" points="256,386.153 255.801,386.206 205.227,372.55 201.994,336.333 177.419,336.333 156.409,336.333 162.771,407.634 255.791,433.457 256,433.399"/>
<path d="M108.382,0h23.077v22.8h21.11V0h23.078v69.044H152.57v-23.12h-21.11v23.12h-23.077V0z"/>
<path d="M205.994,22.896h-20.316V0h63.72v22.896h-20.325v46.148h-23.078V22.896z"/>
<path d="M259.511,0h24.063l14.802,24.26L313.163,0h24.072v69.044h-22.982V34.822l-15.877,24.549h-0.397l-15.888-24.549v34.222h-22.58V0z"/>
<path d="M348.72,0h23.084v46.222h32.453v22.822H348.72V0z"/>
<polygon fill="#FFFFFF" points="255.843,268.217 255.843,313.627 311.761,313.627 306.49,372.521 255.843,386.191 255.843,433.435 348.937,407.634 349.62,399.962 360.291,280.411 361.399,268.217 349.162,268.217"/>
<polygon fill="#FFFFFF" points="255.843,176.305 255.843,204.509 255.843,221.605 255.843,221.716 365.385,221.716 365.385,221.716 365.531,221.716 366.442,211.509 368.511,188.488 369.597,176.305"/>
</svg>
</div>
<div class="svg-container2">
<svg width="100" height="100" viewBox="12 25 128 128" style="border:1px solid black">
<rect x="12" y="25" width="128" height="128" fill="#F0DB4F" />
<path fill="#F0DB4F" d="M1.408 1.408h125.184v125.185h-125.184z"></path>
<path fill="#323330" stroke="none" d="M116.347 96.736c-.917-5.711-4.641-10.508-15.672-14.981-3.832-1.761-8.104-3.022-9.377-5.926-.452-1.69-.512-2.642-.226-3.665.821-3.32 4.784-4.355 7.925-3.403 2.023.678 3.938 2.237 5.093 4.724
5.402-3.498 5.391-3.475 9.163-5.879-1.381-2.141-2.118-3.129-3.022-4.045-3.249-3.629-7.676-5.498-14.756-5.355l-3.688.477c-3.534.893-6.902 2.748-8.877 5.235-5.926 6.724-4.236 18.492 2.975 23.335 7.104 5.332 17.54 6.545 18.873 11.531 1.297 6.104-4.486 8.08-10.234 7.378-4.236-.881-6.592-3.034-9.139-6.949-4.688 2.713-4.688 2.713-9.508 5.485 1.143 2.499
2.344 3.63 4.26 5.795 9.068 9.198 31.76 8.746 35.83-5.176.165-.478
1.261-3.666.38-8.581zm-46.885-37.793h-11.709l-.048 30.272c0 6.438.333
12.34-.714 14.149-1.713 3.558-6.152 3.117-8.175 2.427-2.059-1.012-3.106-2.451-4.319-4.485-.333-.584-.583-1.036-.667-1.071l-9.52 5.83c1.583 3.249 3.915 6.069 6.902 7.901 4.462 2.678 10.459 3.499 16.731 2.059 4.082-1.189 7.604-3.652 9.448-7.401 2.666-4.915 2.094-10.864 2.07-17.444.06-10.735.001-21.468.001-32.237z">
</path>
</svg>
</div>
</div>

It sounds like there are two questions here, I'll try to answer both; my understanding is that you would like to:
Have two inline columns, each with an SVG in them that scales to the width of their respective column on resize.
Move the paths of the SVGs within the view box.
Regarding 1, to do this, you can set viewBox = "0 0 widthOfSVG heightOfSVG". Then just use CSS to set the columns adjacent to each other. Importantly, this will not work in many versions of IE – the simplest work around there is often to use javascript to resize your SVGs by binding a function to the window resize event.
For 2, unfortunately, I believe the paths need to be recomputed / rewritten to the correct location on the SVG. While this could be done with JavaScript, it's liable to become fairly involved quickly.