How to change vertically centred SVGs appearance on hover? - html
I am trying to have four shapes lay over each other as in the picture 1.
I want to them to change color on hover.
The problem with png's was that they are actually square so they would change color also in the transparent areas so I turned to SVG.
Now they only change color when I am on the content, but they are still square and the transparent area blocks the shape underneath.
Most importantly, I can't figure out how to align them horizontally AND vertically in a way that is responsive.
Help would be much appreciated
]1
#Fill-1 {
fill: red;
}
#Fill-1:hover {
fill: blue;
}
.main-wrapper {
text-align: center;
width: 100vw;
height: 100vh;
}
#shape1,
#shape2,
#shape3,
#shape4 {
position: absolute;
left: 0;
}
#shape1 {
transform: scale(0.5);
}
#shape2 {
transform: scale(0.3);
}
#shape3 {
transform: scale(0.15);
}
#shape4 {
transform: scale(0.05);
}
<body>
<div class="main-wrapper">
<svg id="shape1" preserveAspectRatio="xMinYMax meet" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1550.03 1362.94"><defs><style>.cls-1{fill:#fff;}</style></defs><title>workshops2</title><g onmouseover="newTitle('workshops')" onmouseout="oldTitle()" id="Fill-1" id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><polygon points="239.76 106.13 240.16 106.13 240.16 106.52 239.76 106.13"/><polygon points="1122.78 132.43 1122.78 159.66 1068.82 159.66 1068.82 132.62 1042.4 132.62 1042.4 105.74 935.22 105.74 935.22 79.32 881.57 79.32 881.57 52.4 828.39 52.4 828.39 26.96 587.53 26.96 587.53 52.91 533.84 52.91 533.84 78.47 480.23 78.47 480.23 53.69 292.83 53.69 292.83 80.03 266.41 80.03 266.41 106.13 240.16 106.13 240.16 53.1 266.26 53.1 266.26 26.65 560.73 26.65 560.73 0 854.69 0 854.69 25.71 908.38 25.71 908.38 52.17 962.07 52.17 962.07 79.09 1068.78 79.09 1068.78 105.97 1095.74 105.97 1095.74 132.43 1122.78 132.43"/><polygon points="1122.78 160.01 1122.78 159.66 1123.17 159.66 1122.78 160.01"/><polygon points="1229.85 1256.73 1230.2 1256.73 1230.2 1257.12 1229.85 1256.73"/><polygon points="1471.17 828.98 1497.39 828.98 1497.39 935.38 1470.98 935.38 1470.98 988.99 1444.6 988.99 1444.6 1042.6 1417.76 1042.6 1417.76 1095.7 1390.91 1095.7 1390.91 1149.35 1364.54 1149.35 1364.54 1202.92 1337.22 1202.92 1337.22 1229.81 1310.85 1229.81 1310.85 1256.73 1230.2 1256.73 1230.2 1229.57 1283.96 1229.57 1283.96 1203.16 1310.85 1203.16 1310.85 1176.27 1337.26 1176.27 1337.26 1122.59 1364.14 1122.59 1364.14 1069.44 1390.99 1069.44 1390.99 1015.79 1417.4 1015.79 1417.4 962.18 1444.76 962.18 1444.76 908.53 1471.17 908.53 1471.17 828.98"/><polygon points="1497.78 828.98 1497.39 828.98 1497.39 828.62 1497.78 828.98"/><polygon points="320.41 1283.5 320.41 1283.89 320.02 1283.89 320.41 1283.5"/><polygon points="748.17 1310.96 748.17 1336.99 427.6 1336.99 427.6 1310.96 320.41 1310.96 320.41 1283.89 454.48 1283.89 454.48 1310.96 748.17 1310.96"/><polygon points="748.17 1337.38 748.17 1336.99 748.56 1336.99 748.17 1337.38"/><polygon points="1497.78 454.01 1497.78 454.4 1497.43 454.4 1497.78 454.01"/><polygon points="1497.39 828.62 1497.78 828.62 1497.78 828.98 1497.39 828.62"/><polygon points="1550.03 507.15 1550.03 748.17 1524.86 748.17 1524.86 828.62 1497.78 828.62 1497.78 721.09 1523.65 721.09 1523.65 534.16 1497.78 534.16 1497.78 454.4 1524 454.4 1524 507.15 1550.03 507.15"/><polygon points="1123.17 159.66 1123.17 160.01 1122.78 160.01 1123.17 159.66"/><polygon points="1363.6 266.22 1363.6 320.22 1336.48 320.22 1336.48 293.26 1310.14 293.26 1310.14 239.73 1256.11 239.73 1256.11 213 1176.35 213 1176.35 186.23 1123.17 186.23 1123.17 160.01 1202.92 160.01 1202.92 186.12 1282.83 186.12 1282.83 213.04 1336.56 213.04 1336.56 266.22 1363.6 266.22"/><polygon points="1363.6 320.57 1363.6 320.22 1363.99 320.22 1363.6 320.57"/><polygon points="748.56 1336.99 748.56 1337.38 748.17 1337.38 748.56 1336.99"/><polygon points="829.21 1310.61 1069.25 1310.61 1069.25 1336.91 855.9 1336.91 855.9 1362.94 748.56 1362.94 748.56 1337.38 829.21 1337.38 829.21 1310.61"/><polygon points="1069.64 1310.61 1069.25 1310.61 1069.25 1310.26 1069.64 1310.61"/><rect y="400.87" width="25.71" height="320.69"/><polygon points="25.71 721.56 26.07 721.56 25.71 721.95 25.71 721.56"/><polygon points="26.07 400.87 25.71 400.87 25.71 400.48 26.07 400.87"/><polygon points="79.6 828.62 79.6 828.98 79.21 828.98 79.6 828.62"/><polygon points="132.74 855.9 132.74 1069.4 106.71 1069.4 106.71 882.86 79.6 882.86 79.6 828.98 106.71 828.98 106.71 855.9 132.74 855.9"/><polygon points="132.74 1069.79 132.74 1069.4 133.09 1069.4 132.74 1069.79"/><polygon points="25.71 400.48 26.07 400.48 26.07 400.87 25.71 400.48"/><polygon points="78.81 240.31 105.97 240.31 105.97 294.19 79.05 294.19 79.05 320.57 52.28 320.57 52.28 400.48 26.07 400.48 26.07 294.12 52.44 294.12 52.44 267.27 78.81 267.27 78.81 240.31"/><polygon points="106.32 240.31 105.97 240.31 105.97 239.92 106.32 240.31"/><polygon points="1069.25 1310.26 1069.64 1310.26 1069.64 1310.61 1069.25 1310.26"/><polygon points="1150.37 1257.12 1229.85 1257.12 1229.85 1283.26 1176.78 1283.26 1176.78 1310.26 1069.64 1310.26 1069.64 1283.26 1150.37 1283.26 1150.37 1257.12"/><polygon points="1230.2 1257.12 1229.85 1257.12 1229.85 1256.73 1230.2 1257.12"/><polygon points="133.09 1069.4 133.09 1069.79 132.74 1069.79 133.09 1069.4"/><path d="M213,1123.6v79.6H186.78v-52.68c-9.52-.43-17.71-.78-26.77-1.17v-25.67H133.09v-53.89h27.16v27h26.37v26.84Z"/><polygon points="213 1203.59 213 1203.2 213.39 1203.2 213 1203.59"/><polygon points="213.39 1203.2 213.39 1203.59 213 1203.59 213.39 1203.2"/><polygon points="320.02 1257.31 320.02 1283.5 240.62 1283.5 240.62 1257.35 213.39 1257.35 213.39 1203.59 240.51 1203.59 240.51 1230.55 266.88 1230.55 266.88 1257.31 320.02 1257.31"/><polygon points="320.02 1283.89 320.02 1283.5 320.41 1283.5 320.02 1283.89"/><polygon points="105.97 239.92 106.32 239.92 106.32 240.31 105.97 239.92"/><polygon points="159.11 160.05 186.23 160.05 186.23 213.74 159.08 213.74 159.08 239.92 106.32 239.92 106.32 213.74 132.78 213.74 132.78 186.94 159.11 186.94 159.11 160.05"/><polygon points="186.62 160.05 186.23 160.05 186.23 159.66 186.62 160.05"/><polygon points="1363.99 320.22 1363.99 320.57 1363.6 320.57 1363.99 320.22"/><polygon points="1417.09 320.57 1417.09 373.71 1390.17 373.71 1390.17 346.6 1363.99 346.6 1363.99 320.57 1417.09 320.57"/><polygon points="1417.09 374.1 1417.09 373.71 1417.52 373.71 1417.09 374.1"/><polygon points="52.87 775.09 52.87 775.48 52.44 775.48 52.87 775.09"/><rect x="52.87" y="775.48" width="26.34" height="53.14"/><polygon points="79.21 828.98 79.21 828.62 79.6 828.62 79.21 828.98"/><polygon points="26.07 721.56 26.07 721.95 25.71 721.95 26.07 721.56"/><rect x="26.06" y="721.95" width="26.38" height="53.14"/><polygon points="52.44 775.48 52.44 775.09 52.87 775.09 52.44 775.48"/><polygon points="186.23 159.66 186.62 159.66 186.62 160.05 186.23 159.66"/><rect x="186.62" y="133.29" width="26.38" height="26.38"/><polygon points="213.39 133.28 213 133.28 213 132.9 213.39 133.28"/><polygon points="213 132.9 213.39 132.9 213.39 133.28 213 132.9"/><rect x="213.39" y="106.52" width="26.38" height="26.38"/><polygon points="240.16 106.52 239.76 106.52 239.76 106.13 240.16 106.52"/><polygon points="1471.02 427.25 1471.02 427.64 1470.66 427.64 1471.02 427.25"/><rect x="1471.01" y="427.64" width="26.42" height="26.38"/><polygon points="1497.43 454.4 1497.43 454.01 1497.78 454.01 1497.43 454.4"/><polygon points="1444.25 400.48 1444.25 400.87 1443.9 400.87 1444.25 400.48"/><rect x="1444.25" y="400.87" width="26.42" height="26.38"/><polygon points="1470.66 427.64 1470.66 427.25 1471.02 427.25 1470.66 427.64"/><polygon class="cls-1" points="1523.65 534.16 1523.65 721.09 1497.78 721.09 1497.78 828.62 1497.39 828.62 1497.39 828.98 1471.17 828.98 1471.17 908.53 1444.76 908.53 1444.76 962.18 1417.4 962.18 1417.4 1015.79 1390.99 1015.79 1390.99 1069.44 1364.14 1069.44 1364.14 1122.59 1337.26 1122.59 1337.26 1176.27 1310.85 1176.27 1310.85 1203.16 1283.96 1203.16 1283.96 1229.57 1230.2 1229.57 1230.2 1256.73 1229.85 1256.73 1229.85 1257.12 1150.37 1257.12 1150.37 1283.26 1069.64 1283.26 1069.64 1310.26 1069.25 1310.26 1069.25 1310.61 829.21 1310.61 829.21 1337.38 748.56 1337.38 748.56 1336.99 748.17 1336.99 748.17 1310.96 454.48 1310.96 454.48 1283.89 320.41 1283.89 320.41 1283.5 320.02 1283.5 320.02 1257.31 266.88 1257.31 266.88 1230.55 240.51 1230.55 240.51 1203.59 213.39 1203.59 213.39 1203.2 213 1203.2 213 1123.6 186.62 1123.6 186.62 1096.76 160.25 1096.76 160.25 1069.79 133.09 1069.79 133.09 1069.4 132.74 1069.4 132.74 855.9 106.71 855.9 106.71 828.98 79.6 828.98 79.6 828.62 79.21 828.62 79.21 775.48 52.87 775.48 52.87 775.09 52.44 775.09 52.44 721.95 26.07 721.95 26.07 721.56 25.71 721.56 25.71 400.87 26.07 400.87 26.07 400.48 52.28 400.48 52.28 320.57 79.05 320.57 79.05 294.19 105.97 294.19 105.97 240.31 106.32 240.31 106.32 239.92 159.08 239.92 159.08 213.74 186.23 213.74 186.23 160.05 186.62 160.05 186.62 159.66 213 159.66 213 133.28 213.39 133.28 213.39 132.9 239.76 132.9 239.76 106.52 240.16 106.52 240.16 106.13 266.41 106.13 266.41 80.03 292.83 80.03 292.83 53.69 480.23 53.69 480.23 78.47 533.84 78.47 533.84 52.91 587.53 52.91 587.53 26.96 828.39 26.96 828.39 52.4 881.57 52.4 881.57 79.32 935.22 79.32 935.22 105.74 1042.4 105.74 1042.4 132.62 1068.82 132.62 1068.82 159.66 1122.78 159.66 1122.78 160.01 1123.17 160.01 1123.17 186.23 1176.35 186.23 1176.35 213 1256.11 213 1256.11 239.73 1310.14 239.73 1310.14 293.26 1336.48 293.26 1336.48 320.22 1363.6 320.22 1363.6 320.57 1363.99 320.57 1363.99 346.6 1390.17 346.6 1390.17 373.71 1417.09 373.71 1417.09 374.1 1417.52 374.1 1417.52 400.48 1443.9 400.48 1443.9 400.87 1444.25 400.87 1444.25 427.25 1470.66 427.25 1470.66 427.64 1471.02 427.64 1471.02 454.01 1497.43 454.01 1497.43 454.4 1497.78 454.4 1497.78 534.16 1523.65 534.16"/><polygon points="1417.52 373.71 1417.52 374.1 1417.09 374.1 1417.52 373.71"/><rect x="1417.52" y="374.1" width="26.38" height="26.38"/><polygon points="1443.9 400.87 1443.9 400.48 1444.25 400.48 1443.9 400.87"/></g></g></svg>
<svg id="shape2" preserveAspectRatio="xMinYMax meet" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1175.26 1042.05"><defs><style>.cls-1{fill:#fff;}</style></defs><title>dreaming2</title><g onmouseover="newTitle('dreaming')" onmouseout="oldTitle()" id="Fill-1" id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><polygon points="52.24 534.35 52.63 534.35 52.63 534.7 52.24 534.35"/><path d="M774.7.39V25.91h-54V52.17H560.57V27.08H346.44V53H266V80H239.57v26.88H185.92v26.46H159v53.64H132.58v80.46H105.27V508.25H78.89v26.1H52.63v-53h26.5V240.43h26.41V160.56c9.56-.43,17.8-.82,26.89-1.21V106.83h26.92V79.91h53.18V53h26.88V26.57h80.42V0H587V25.24H694.13V.39Z"/><polygon points="774.7 26.3 774.7 25.91 775.09 25.91 774.7 26.3"/><polygon points="266.69 989.22 266.69 989.61 266.3 989.61 266.69 989.22"/><polygon points="374.1 1016.34 667.67 1016.34 667.67 1042.05 347.3 1042.05 347.3 1016.81 266.69 1016.81 266.69 989.61 374.1 989.61 374.1 1016.34"/><polygon points="668.06 1016.34 667.67 1016.34 667.67 1015.99 668.06 1016.34"/><polygon points="52.24 775.64 52.24 828.66 26.02 828.66 26.02 802.64 0 802.64 0 615.08 25.16 615.08 25.16 534.7 52.24 534.7 52.24 642.2 26.38 642.2 26.38 775.64 52.24 775.64"/><polygon points="52.24 828.66 52.6 828.66 52.24 829.05 52.24 828.66"/><polygon points="52.63 534.7 52.24 534.7 52.24 534.35 52.63 534.7"/><polygon points="667.67 1015.99 668.06 1015.99 668.06 1016.34 667.67 1015.99"/><polygon points="775.52 962.85 881.73 962.85 881.73 988.99 801.93 988.99 801.93 1015.99 668.06 1015.99 668.06 988.99 775.52 988.99 775.52 962.85"/><polygon points="882.12 962.85 881.73 962.85 881.73 962.46 882.12 962.85"/><polygon points="52.6 828.66 52.6 829.05 52.24 829.05 52.6 828.66"/><polygon points="186.04 936.27 186.04 962.46 133.01 962.46 133.01 936.35 106.56 936.35 106.56 909.43 79.63 909.43 79.63 883.01 52.6 883.01 52.6 829.05 79.71 829.05 79.71 855.94 106.05 855.94 106.05 882.74 133.28 882.74 133.28 909.51 159.62 909.51 159.62 936.27 186.04 936.27"/><polygon points="186.04 962.85 186.04 962.46 186.39 962.46 186.04 962.85"/><polygon points="1095.82 775.13 1096.17 775.13 1096.17 775.52 1095.82 775.13"/><polygon points="1123.29 561.47 1149.31 561.47 1149.31 748.25 1123.33 748.25 1123.33 775.13 1096.17 775.13 1096.17 721.33 1123.29 721.33 1123.29 561.47"/><polygon points="1149.7 561.47 1149.31 561.47 1149.31 561.12 1149.7 561.47"/><polygon points="775.09 25.91 775.09 26.3 774.7 26.3 775.09 25.91"/><polygon points="908.49 105.82 908.49 132.97 854.61 132.97 854.61 106.05 801.59 106.05 801.59 52.52 775.09 52.52 775.09 26.3 828 26.3 828 79.44 881.53 79.44 881.53 105.82 908.49 105.82"/><polygon points="908.49 133.32 908.49 132.97 908.88 132.97 908.49 133.32"/><polygon points="962.02 882.16 962.38 882.16 962.38 882.55 962.02 882.16"/><polygon points="1069.56 775.52 1095.82 775.52 1095.82 828.43 1069.36 828.43 1069.36 855.27 1016.3 855.27 1016.3 882.16 962.38 882.16 962.38 855 989.46 855 989.46 828.55 1043.11 828.55 1043.11 801.62 1069.56 801.62 1069.56 775.52"/><polygon points="1096.17 775.52 1095.82 775.52 1095.82 775.13 1096.17 775.52"/><polygon points="1122.94 373.79 1122.94 374.18 1122.59 374.18 1122.94 373.79"/><polygon points="1149.31 561.12 1149.7 561.12 1149.7 561.47 1149.31 561.12"/><polygon points="1175.26 400.25 1175.26 561.12 1149.7 561.12 1149.7 427.09 1122.94 427.09 1122.94 374.18 1149.23 374.18 1149.23 400.25 1175.26 400.25"/><polygon points="908.88 132.97 908.88 133.32 908.49 133.32 908.88 132.97"/><polygon points="1015.52 186.08 1015.52 213.23 961.67 213.23 961.67 186.35 935.34 186.35 935.34 159.54 908.88 159.54 908.88 133.32 961.75 133.32 961.75 159.74 988.6 159.74 988.6 186.08 1015.52 186.08"/><polygon points="1015.52 213.58 1015.52 213.23 1015.91 213.23 1015.52 213.58"/><polygon points="881.73 962.46 882.12 962.46 882.12 962.85 881.73 962.46"/><polygon points="909.27 882.55 962.02 882.55 962.02 908.73 935.57 908.73 935.57 935.57 909.23 935.57 909.23 962.46 882.12 962.46 882.12 908.77 909.27 908.77 909.27 882.55"/><polygon points="962.38 882.55 962.02 882.55 962.02 882.16 962.38 882.55"/><polygon points="1069.44 293.49 1069.44 293.88 1069.05 293.88 1069.44 293.49"/><polygon points="1122.59 320.14 1122.59 373.79 1095.55 373.79 1095.55 346.56 1069.44 346.56 1069.44 293.88 1095.51 293.88 1095.51 320.14 1122.59 320.14"/><polygon points="1122.59 374.18 1122.59 373.79 1122.94 373.79 1122.59 374.18"/><polygon points="186.39 962.46 186.39 962.85 186.04 962.85 186.39 962.46"/><rect x="186.39" y="962.85" width="79.91" height="26.38"/><polygon points="266.3 989.61 266.3 989.22 266.69 989.22 266.3 989.61"/><polygon points="1042.68 240 1042.68 240.39 1042.29 240.39 1042.68 240"/><rect x="1042.68" y="240.39" width="26.38" height="53.1"/><polygon points="1069.05 293.88 1069.05 293.49 1069.44 293.49 1069.05 293.88"/><polygon class="cls-1" points="1149.7 427.09 1149.7 561.12 1149.31 561.12 1149.31 561.47 1123.29 561.47 1123.29 721.33 1096.17 721.33 1096.17 775.13 1095.82 775.13 1095.82 775.52 1069.56 775.52 1069.56 801.62 1043.11 801.62 1043.11 828.55 989.46 828.55 989.46 855 962.38 855 962.38 882.16 962.02 882.16 962.02 882.55 909.27 882.55 909.27 908.77 882.12 908.77 882.12 962.46 881.73 962.46 881.73 962.85 775.52 962.85 775.52 988.99 668.06 988.99 668.06 1015.99 667.67 1015.99 667.67 1016.34 374.1 1016.34 374.1 989.61 266.69 989.61 266.69 989.22 266.3 989.22 266.3 962.85 186.39 962.85 186.39 962.46 186.04 962.46 186.04 936.27 159.62 936.27 159.62 909.51 133.28 909.51 133.28 882.74 106.05 882.74 106.05 855.94 79.71 855.94 79.71 829.05 52.6 829.05 52.6 828.66 52.24 828.66 52.24 775.64 26.38 775.64 26.38 642.2 52.24 642.2 52.24 534.7 52.63 534.7 52.63 534.35 78.89 534.35 78.89 508.25 105.27 508.25 105.27 267.39 132.58 267.39 132.58 186.94 159.04 186.94 159.04 133.28 185.92 133.28 185.92 106.83 239.57 106.83 239.57 79.95 266.02 79.95 266.02 53.02 346.44 53.02 346.44 27.08 560.57 27.08 560.57 52.17 720.74 52.17 720.74 25.91 774.7 25.91 774.7 26.3 775.09 26.3 775.09 52.52 801.59 52.52 801.59 106.05 854.61 106.05 854.61 132.97 908.49 132.97 908.49 133.32 908.88 133.32 908.88 159.54 935.34 159.54 935.34 186.35 961.67 186.35 961.67 213.23 1015.52 213.23 1015.52 213.58 1015.91 213.58 1015.91 240 1042.29 240 1042.29 240.39 1042.68 240.39 1042.68 293.49 1069.05 293.49 1069.05 293.88 1069.44 293.88 1069.44 346.56 1095.55 346.56 1095.55 373.79 1122.59 373.79 1122.59 374.18 1122.94 374.18 1122.94 427.09 1149.7 427.09"/><polygon points="1015.91 213.23 1015.91 213.58 1015.52 213.58 1015.91 213.23"/><rect x="1015.91" y="213.58" width="26.38" height="26.42"/><polygon points="1042.29 240.39 1042.29 240 1042.68 240 1042.29 240.39"/></g></g></svg>
<svg id="shape3" preserveAspectRatio="xMinYMax meet" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720.58 720.78"><defs><style>.cls-1{fill:#fff;}</style></defs><title>invasion2</title><g onmouseover="newTitle('invasion')" onmouseout="oldTitle()" id="Fill-1" id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><polygon points="400.09 561.27 400.09 560.88 400.48 560.88 400.09 561.27"/><polygon points="507.12 25.36 507.12 52.52 185.57 52.52 185.57 26.65 132.35 26.65 132.35 53.34 78.66 53.34 78.66 79.83 26.77 79.83 26.77 347.61 105 347.61 105 427.6 79.99 427.6 79.99 481.29 106.25 481.29 106.25 507.74 159.97 507.74 159.97 694.21 239.96 694.21 239.96 667.6 293.65 667.6 293.65 641.1 319.01 641.1 319.01 533.92 294.12 533.92 294.12 508.6 373.99 508.6 373.99 534.62 400.09 534.62 400.09 560.88 347.65 560.88 347.65 587.38 372.5 587.38 372.5 641.07 347.22 641.07 347.22 667.52 320.3 667.52 320.3 694.44 267.16 694.44 267.16 720.78 133.21 720.78 133.21 535.05 79.6 535.05 79.6 508.13 53.49 508.13 53.49 400.99 78.43 400.99 78.43 374.88 26.11 374.88 26.11 399.78 0 399.78 0 53.22 52.21 53.22 52.21 26.3 105.39 26.3 105.39 0 212.57 0 212.57 25.36 507.12 25.36"/><polygon points="507.12 52.87 507.12 52.52 507.51 52.52 507.12 52.87"/><polygon points="507.51 52.52 507.51 52.87 507.12 52.87 507.51 52.52"/><polygon points="507.12 587.65 507.51 587.65 507.51 588.04 507.12 587.65"/><polygon points="720.58 346.52 720.58 480.39 695.22 480.39 695.22 507.31 641.57 507.31 641.57 533.77 587.88 533.77 587.88 560.65 561.47 560.65 561.47 587.65 507.51 587.65 507.51 560.45 534.55 560.45 534.55 534 561.47 534 561.47 507.12 614.69 507.12 614.69 480.19 668.38 480.19 668.38 453.7 693.58 453.7 693.58 373.29 667.56 373.29 667.56 319.6 640.6 319.6 640.6 293.18 613.75 293.18 613.75 132.5 587.3 132.5 587.3 105.58 560.38 105.58 560.38 79.17 507.51 79.17 507.51 52.87 587.22 52.87 587.22 78.93 613.67 78.93 613.67 105.82 640.99 105.82 640.99 266.45 667.4 266.45 667.4 293.34 694.29 293.34 694.29 346.52 720.58 346.52"/><polygon class="cls-1" points="693.58 373.29 693.58 453.7 668.38 453.7 668.38 480.19 614.69 480.19 614.69 507.12 561.47 507.12 561.47 534 534.55 534 534.55 560.45 507.51 560.45 507.51 587.65 507.12 587.65 507.12 588.04 454.29 588.04 454.29 561.27 400.48 561.27 400.48 560.88 400.09 560.88 400.09 534.62 373.99 534.62 373.99 508.6 294.12 508.6 294.12 533.92 319.01 533.92 319.01 641.1 293.65 641.1 293.65 667.6 239.96 667.6 239.96 694.21 159.97 694.21 159.97 507.74 106.25 507.74 106.25 481.29 79.99 481.29 79.99 427.6 105 427.6 105 347.61 26.77 347.61 26.77 79.83 78.66 79.83 78.66 53.34 132.35 53.34 132.35 26.65 185.57 26.65 185.57 52.52 507.12 52.52 507.12 52.87 507.51 52.87 507.51 79.17 560.38 79.17 560.38 105.58 587.3 105.58 587.3 132.5 613.75 132.5 613.75 293.18 640.6 293.18 640.6 319.6 667.56 319.6 667.56 373.29 693.58 373.29"/><polygon points="400.48 560.88 400.48 561.27 400.09 561.27 400.48 560.88"/><polygon points="454.29 588.04 507.12 588.04 507.12 613.75 427.52 613.75 427.52 588.47 400.48 588.47 400.48 561.27 454.29 561.27 454.29 588.04"/><polygon points="507.51 588.04 507.12 588.04 507.12 587.65 507.51 588.04"/></g></g></svg>
<svg id="shape4" preserveAspectRatio="xMinYMax meet" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 239.26 239.1"><defs><style>.cls-1{fill:#fff;}</style></defs><title>host</title><g onmouseover="newTitle('host')" onmouseout="oldTitle()" id="Fill-1" id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><path d="M212.61,105.86V52.17H186.12V25.24H159.19V0H25.25V25.87H0v188H26.34V239.1H133.56V212.76h53.18V185.84h52.52v-80Zm-.23,53.49H160.25v26.88H106.56v26H52.87v-25.4h-26V52.87H52.28v-26H132.7v25.4h26.45V79.67h26.93v52.72h26.3Z"/><polygon class="cls-1" points="212.38 132.39 212.38 159.35 160.25 159.35 160.25 186.23 106.56 186.23 106.56 212.22 52.87 212.22 52.87 186.82 26.84 186.82 26.84 52.87 52.28 52.87 52.28 26.88 132.7 26.88 132.7 52.28 159.15 52.28 159.15 79.67 186.08 79.67 186.08 132.39 212.38 132.39"/></g></g></svg>
</div>
</body>
more easy (and shorter) to do that with svg symbol:
#mySVG {
margin: 1em;
width: 90vw;
height: 90vh;
background-color: lightblue;
}
#shape1, #shape2,
#shape3, #shape4 { fill:red }
#shape1:hover, #shape2:hover,
#shape3:hover, #shape4:hover { fill:blue }
<svg id="mySVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240">
<defs>
<symbol id="shapeRef" viewBox="0 0 240 240" >
<path
d="M212.61,105.86V52.17H186.12V25.24H159.19V0H25.25V25.87H0v188H26.34V239.1H133.56V212.76h53.18V185.84h52
.52v-80Zm-.23,53.49H160.25v26.88H106.56v26H52.87v-25.4h-26V52.87H52.28v-26H132.7v25.4h26.45V79.67h26.93v52
.72h26.3Z" />
<polygon fill="transparent"
points="212.38 132.39 212.38 159.35 160.25 159.35 160.25 186.23 106.56 186.23 106.56 212.22 52.87
212.22 52.87 186.82 26.84 186.82 26.84 52.87 52.28 52.87 52.28 26.88 132.7 26.88 132.7 52.28 159.15
52.28 159.15 79.67 186.08 79.67 186.08 132.39 212.38 132.39" />
</symbol>
</defs>
<use xlink:href="#shapeRef" x="50" y="50" width="120" height="120" id="shape1" />
<use xlink:href="#shapeRef" x="74" y="74" width="72" height="72" id="shape2" />
<use xlink:href="#shapeRef" x="92" y="92" width="36" height="36" id="shape3" />
<use xlink:href="#shapeRef" x="104" y="104" width="12" height="12" id="shape4" />
</svg>
Apply your hover events to the SVG's <path> if possible, rather than the entire <g>. The <g> is just a container element, so basically a box.
In your CSS:
#Fill-1 path:hover {
fill: blue;
}
As for centering. It's really up to you / the rest of your markup. One option could be a flex container with absolute-positioned children. Something like the following:
.main-wrapper {
position: absolute;
display: flex;
width: 100vw;
height: 100vh;
align-items: center;
justify-content: center;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
svg {
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100%;
margin: 0 auto;
position: absolute;
transform-origin: center center;
}
Note: You shouldn't need to select all 4 svgs by their ID. As they can all be targeted in CSS with just svg.
Here it is in a fiddle: https://jsfiddle.net/Lf6nchem/
Thanks for the help! Here is also the two-color color change using fill:currentColor
#mySVG {
margin: 1em;
width: 90vw;
height: 90vh;
background-color: green;
}
#shape1, #shape2,
#shape3, #shape4 { fill:red; color:white; }
#shape1:hover, #shape2:hover,
#shape3:hover, #shape4:hover { fill:blue; color:yellow; }
.fill{fill:currentColor;}
<svg id="mySVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240">
<defs>
<symbol id="shapeRef" viewBox="0 0 240 240" >
<path
d="M212.61,105.86V52.17H186.12V25.24H159.19V0H25.25V25.87H0v188H26.34V239.1H133.56V212.76h53.18V185.84h52
.52v-80Zm-.23,53.49H160.25v26.88H106.56v26H52.87v-25.4h-26V52.87H52.28v-26H132.7v25.4h26.45V79.67h26.93v52
.72h26.3Z" />
<polygon class="fill"
points="212.38 132.39 212.38 159.35 160.25 159.35 160.25 186.23 106.56 186.23 106.56 212.22 52.87
212.22 52.87 186.82 26.84 186.82 26.84 52.87 52.28 52.87 52.28 26.88 132.7 26.88 132.7 52.28 159.15
52.28 159.15 79.67 186.08 79.67 186.08 132.39 212.38 132.39" />
</symbol>
</defs>
<use xlink:href="#shapeRef" x="50" y="50" width="120" height="120" id="shape1" />
<use xlink:href="#shapeRef" x="74" y="74" width="72" height="72" id="shape2" />
<use xlink:href="#shapeRef" x="92" y="92" width="36" height="36" id="shape3" />
<use xlink:href="#shapeRef" x="104" y="104" width="12" height="12" id="shape4" />
</svg>
Related
Animate SVG path color
I have an app that create animations based on SVG files.. During the animation of "paths".. the color is black but my color fill="#e67700" how can i fix that? <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1338.9181636059818 623.2810362298012" width="2677.8363272119636" height="1246.5620724596024" id="scene0" style="display: none;"> <g transform="translate(10 306.9962735735079) rotate(0 267.00513705514027 -148.49813678675395)" stroke="none"> <path fill="#e67700" d="M -3.11,-5.41 Q -3.11,-5.41 9.63,-12.60 22.38,-19.79 32.35,-25.25 42.32,-30.71 51.46,-35.65 60.60,-40.59 72.50,-47.42 84.41,-54.24 97.54,-61.45 110.67,-68.65 123.18,-75.94 135.69,-83.23 149.83,-92.20 163.96,-101.16 178.85,-110.89 193.73,-120.61 207.13,-129.93 220.53,-139.25 233.19,-147.41 245.85,-155.56 264.37,-166.14 282.90,-176.72 307.28,-190.80 331.66,-204.89 349.58,-214.66 367.51,-224.43 394.65,-236.71 421.79,-248.99 444.46,-260.27 467.13,-271.56 481.37,-278.78 495.60,-286.00 505.06,-290.23 514.51,-294.45 518.94,-297.01 523.37,-299.56 526.76,-301.10 530.14,-302.64 531.20,-302.86 532.25,-303.08 533.32,-302.96 534.39,-302.83 535.37,-302.37 536.34,-301.91 537.12,-301.16 537.89,-300.41 538.39,-299.45 538.88,-298.49 539.05,-297.43 539.21,-296.36 539.03,-295.30 538.84,-294.24 538.33,-293.29 537.82,-292.35 537.03,-291.61 536.24,-290.88 535.25,-290.44 534.27,-289.99 533.20,-289.89 532.13,-289.78 531.08,-290.02 530.03,-290.26 529.11,-290.83 528.19,-291.39 527.50,-292.22 526.81,-293.05 526.42,-294.05 526.03,-295.06 525.98,-296.13 525.94,-297.21 526.23,-298.25 526.53,-299.28 527.15,-300.17 527.76,-301.05 528.62,-301.70 529.49,-302.34 530.51,-302.68 531.54,-303.01 532.61,-303.00 533.69,-302.99 534.71,-302.64 535.73,-302.28 536.58,-301.62 537.43,-300.96 538.03,-300.06 538.62,-299.17 538.90,-298.12 539.18,-297.08 539.11,-296.01 539.04,-294.93 538.63,-293.94 538.22,-292.94 537.52,-292.12 536.81,-291.31 535.88,-290.76 534.96,-290.22 534.96,-290.22 534.96,-290.22 531.75,-289.20 528.54,-288.18 523.67,-286.51 518.80,-284.85 509.58,-280.73 500.36,-276.62 486.09,-269.38 471.82,-262.14 448.97,-250.77 426.12,-239.40 399.34,-227.29 372.55,-215.18 354.74,-205.47 336.94,-195.76 312.54,-181.65 288.14,-167.54 269.86,-157.11 251.58,-146.67 239.09,-138.60 226.60,-130.54 213.09,-121.11 199.57,-111.69 184.64,-101.90 169.71,-92.12 155.43,-83.01 141.15,-73.91 128.54,-66.51 115.94,-59.10 102.94,-51.88 89.94,-44.66 77.99,-37.69 66.03,-30.72 56.99,-25.67 47.96,-20.62 38.15,-15.02 28.35,-9.43 15.73,-2.01 3.11,5.41 2.42,5.70 1.73,6.00 0.98,6.12 0.24,6.24 -0.50,6.18 -1.25,6.12 -1.96,5.88 -2.68,5.64 -3.32,5.23 -3.95,4.83 -4.47,4.29 -4.99,3.74 -5.37,3.09 -5.75,2.44 -5.95,1.72 -6.16,0.99 -6.19,0.24 -6.22,-0.50 -6.07,-1.24 -5.92,-1.98 -5.60,-2.66 -5.27,-3.34 -4.80,-3.92 -4.32,-4.51 -3.72,-4.96 -3.11,-5.41 -3.11,-5.41 L -3.11,-5.41 Z" opacity="0"> <animate attributeName="opacity" from="0" to="1" calcMode="discrete" begin="2999ms" dur="1ms" fill="freeze"> </animate> </path> <path> <animate attributeName="d" from="M -3.11,-5.41 Q -3.11,-5.41 9.63,-12.60 22.38,-19.79 32.35,-25.25 42.32,-30.71 51.46,-35.65 60.60,-40.59 72.50,-47.42 84.41,-54.24 97.54,-61.45 110.67,-68.65 123.18,-75.94 135.69,-83.23 149.83,-92.20 163.96,-101.16 178.85,-110.89 193.73,-120.61 207.13,-129.93 220.53,-139.25 233.19,-147.41 245.85,-155.56 264.37,-166.14 282.90,-176.72 307.28,-190.80 331.66,-204.89 349.58,-214.66 367.51,-224.43 394.65,-236.71 421.79,-248.99 444.46,-260.27 467.13,-271.56 481.37,-278.78 495.60,-286.00 505.06,-290.23 514.51,-294.45 518.94,-297.01 523.37,-299.56 527.40,-301.60 531.43,-303.64 532.56,-303.87 533.69,-304.11 534.83,-303.98 535.98,-303.84 537.02,-303.35 538.06,-302.85 538.89,-302.05 539.72,-301.25 540.25,-300.23 540.78,-299.20 540.96,-298.06 541.13,-296.92 540.93,-295.79 540.74,-294.65 540.19,-293.64 539.64,-292.62 538.79,-291.84 537.95,-291.05 536.90,-290.58 535.85,-290.11 534.70,-289.99 533.55,-289.88 532.43,-290.14 531.30,-290.40 530.32,-291.00 529.34,-291.60 528.60,-292.49 527.86,-293.38 527.45,-294.45 527.03,-295.53 526.98,-296.68 526.93,-297.83 527.25,-298.94 527.57,-300.05 528.22,-300.99 528.88,-301.94 529.80,-302.63 530.73,-303.32 531.82,-303.68 532.92,-304.04 534.07,-304.02 535.23,-304.01 536.32,-303.63 537.40,-303.26 538.32,-302.55 539.23,-301.84 539.86,-300.88 540.50,-299.92 540.80,-298.81 541.10,-297.69 541.02,-296.54 540.95,-295.39 540.51,-294.32 540.08,-293.26 539.32,-292.39 538.57,-291.51 537.57,-290.93 536.58,-290.34 536.58,-290.35 536.58,-290.35 532.56,-289.26 528.54,-288.18 523.67,-286.51 518.80,-284.85 509.58,-280.73 500.36,-276.62 486.09,-269.38 471.82,-262.14 448.97,-250.77 426.12,-239.40 399.34,-227.29 372.55,-215.18 354.74,-205.47 336.94,-195.76 312.54,-181.65 288.14,-167.54 269.86,-157.11 251.58,-146.67 239.09,-138.60 226.60,-130.54 213.09,-121.11 199.57,-111.69 184.64,-101.90 169.71,-92.12 155.43,-83.01 141.15,-73.91 128.54,-66.51 115.94,-59.10 102.94,-51.88 89.94,-44.66 77.99,-37.69 66.03,-30.72 56.99,-25.67 47.96,-20.62 38.15,-15.02 28.35,-9.43 15.73,-2.01 3.11,5.41 2.42,5.70 1.73,6.00 0.98,6.12 0.24,6.24 -0.50,6.18 -1.25,6.12 -1.96,5.88 -2.68,5.64 -3.32,5.23 -3.95,4.83 -4.47,4.29 -4.99,3.74 -5.37,3.09 -5.75,2.44 -5.95,1.72 -6.16,0.99 -6.19,0.24 -6.22,-0.50 -6.07,-1.24 -5.92,-1.98 -5.60,-2.66 -5.27,-3.34 -4.80,-3.92 -4.32,-4.51 -3.72,-4.96 -3.11,-5.41 -3.11,-5.41 L -3.11,-5.41 Z" to="M -3.11,-5.41 Q -3.11,-5.41 9.63,-12.60 22.38,-19.79 32.35,-25.25 42.32,-30.71 51.46,-35.65 60.60,-40.59 72.50,-47.42 84.41,-54.24 97.54,-61.45 110.67,-68.65 123.18,-75.94 135.69,-83.23 149.83,-92.20 163.96,-101.16 178.85,-110.89 193.73,-120.61 207.13,-129.93 220.53,-139.25 233.19,-147.41 245.85,-155.56 264.37,-166.14 282.90,-176.72 307.28,-190.80 331.66,-204.89 349.58,-214.66 367.51,-224.43 394.65,-236.71 421.79,-248.99 444.46,-260.27 467.13,-271.56 481.37,-278.78 495.60,-286.00 505.06,-290.23 514.51,-294.45 518.94,-297.01 523.37,-299.56 526.76,-301.10 530.14,-302.64 531.20,-302.86 532.25,-303.08 533.32,-302.96 534.39,-302.83 535.37,-302.37 536.34,-301.91 537.12,-301.16 537.89,-300.41 538.39,-299.45 538.88,-298.49 539.05,-297.43 539.21,-296.36 539.03,-295.30 538.84,-294.24 538.33,-293.29 537.82,-292.35 537.03,-291.61 536.24,-290.88 535.25,-290.44 534.27,-289.99 533.20,-289.89 532.13,-289.78 531.08,-290.02 530.03,-290.26 529.11,-290.83 528.19,-291.39 527.50,-292.22 526.81,-293.05 526.42,-294.05 526.03,-295.06 525.98,-296.13 525.94,-297.21 526.23,-298.25 526.53,-299.28 527.15,-300.17 527.76,-301.05 528.62,-301.70 529.49,-302.34 530.51,-302.68 531.54,-303.01 532.61,-303.00 533.69,-302.99 534.71,-302.64 535.73,-302.28 536.58,-301.62 537.43,-300.96 538.03,-300.06 538.62,-299.17 538.90,-298.12 539.18,-297.08 539.11,-296.01 539.04,-294.93 538.63,-293.94 538.22,-292.94 537.52,-292.12 536.81,-291.31 535.88,-290.76 534.96,-290.22 534.96,-290.22 534.96,-290.22 531.75,-289.20 528.54,-288.18 523.67,-286.51 518.80,-284.85 509.58,-280.73 500.36,-276.62 486.09,-269.38 471.82,-262.14 448.97,-250.77 426.12,-239.40 399.34,-227.29 372.55,-215.18 354.74,-205.47 336.94,-195.76 312.54,-181.65 288.14,-167.54 269.86,-157.11 251.58,-146.67 239.09,-138.60 226.60,-130.54 213.09,-121.11 199.57,-111.69 184.64,-101.90 169.71,-92.12 155.43,-83.01 141.15,-73.91 128.54,-66.51 115.94,-59.10 102.94,-51.88 89.94,-44.66 77.99,-37.69 66.03,-30.72 56.99,-25.67 47.96,-20.62 38.15,-15.02 28.35,-9.43 15.73,-2.01 3.11,5.41 2.42,5.70 1.73,6.00 0.98,6.12 0.24,6.24 -0.50,6.18 -1.25,6.12 -1.96,5.88 -2.68,5.64 -3.32,5.23 -3.95,4.83 -4.47,4.29 -4.99,3.74 -5.37,3.09 -5.75,2.44 -5.95,1.72 -6.16,0.99 -6.19,0.24 -6.22,-0.50 -6.07,-1.24 -5.92,-1.98 -5.60,-2.66 -5.27,-3.34 -4.80,-3.92 -4.32,-4.51 -3.72,-4.96 -3.11,-5.41 -3.11,-5.41 L -3.11,-5.41 Z" begin="2904.7619047619046ms" dur="95.23809523809524ms"></animate> </path> .... </g> </svg> the original path if necessary : <g transform="translate(10 306.9962735735079) rotate(0 267.00513705514027 -148.49813678675395)" stroke="none"><path fill="#e67700" d="M -3.11,-5.41 Q -3.11,-5.41 9.63,-12.60 22.38,-19.79 32.35,-25.25 42.32,-30.71 51.46,-35.65 60.60,-40.59 72.50,-47.42 84.41,-54.24 97.54,-61.45 110.67,-68.65 123.18,-75.94 135.69,-83.23 149.83,-92.20 163.96,-101.16 178.85,-110.89 193.73,-120.61 207.13,-129.93 220.53,-139.25 233.19,-147.41 245.85,-155.56 264.37,-166.14 282.90,-176.72 307.28,-190.80 331.66,-204.89 349.58,-214.66 367.51,-224.43 394.65,-236.71 421.79,-248.99 444.46,-260.27 467.13,-271.56 481.37,-278.78 495.60,-286.00 505.06,-290.23 514.51,-294.45 518.94,-297.01 523.37,-299.56 527.32,-301.81 531.26,-304.06 532.47,-304.32 533.67,-304.57 534.88,-304.42 536.10,-304.28 537.21,-303.75 538.32,-303.23 539.20,-302.38 540.09,-301.52 540.65,-300.43 541.21,-299.34 541.40,-298.13 541.59,-296.92 541.38,-295.71 541.17,-294.50 540.58,-293.42 540.00,-292.34 539.10,-291.51 538.20,-290.67 537.08,-290.17 535.96,-289.66 534.74,-289.54 533.52,-289.42 532.33,-289.70 531.13,-289.97 530.09,-290.62 529.04,-291.26 528.26,-292.20 527.47,-293.14 527.03,-294.29 526.58,-295.43 526.53,-296.66 526.47,-297.88 526.81,-299.06 527.15,-300.24 527.85,-301.25 528.55,-302.26 529.53,-302.99 530.52,-303.73 531.68,-304.11 532.85,-304.49 534.08,-304.47 535.30,-304.46 536.46,-304.06 537.62,-303.66 538.59,-302.91 539.56,-302.15 540.24,-301.13 540.92,-300.11 541.24,-298.92 541.55,-297.74 541.47,-296.51 541.40,-295.29 540.93,-294.15 540.47,-293.02 539.66,-292.09 538.86,-291.16 537.80,-290.54 536.74,-289.92 536.74,-289.92 536.75,-289.92 532.64,-289.05 528.54,-288.18 523.67,-286.51 518.80,-284.85 509.58,-280.73 500.36,-276.62 486.09,-269.38 471.82,-262.14 448.97,-250.77 426.12,-239.40 399.34,-227.29 372.55,-215.18 354.74,-205.47 336.94,-195.76 312.54,-181.65 288.14,-167.54 269.86,-157.11 251.58,-146.67 239.09,-138.60 226.60,-130.54 213.09,-121.11 199.57,-111.69 184.64,-101.90 169.71,-92.12 155.43,-83.01 141.15,-73.91 128.54,-66.51 115.94,-59.10 102.94,-51.88 89.94,-44.66 77.99,-37.69 66.03,-30.72 56.99,-25.67 47.96,-20.62 38.15,-15.02 28.35,-9.43 15.73,-2.01 3.11,5.41 2.42,5.70 1.73,6.00 0.98,6.12 0.24,6.24 -0.50,6.18 -1.25,6.12 -1.96,5.88 -2.68,5.64 -3.32,5.23 -3.95,4.83 -4.47,4.29 -4.99,3.74 -5.37,3.09 -5.75,2.44 -5.95,1.72 -6.16,0.99 -6.19,0.24 -6.22,-0.50 -6.07,-1.24 -5.92,-1.98 -5.60,-2.66 -5.27,-3.34 -4.80,-3.92 -4.32,-4.51 -3.72,-4.96 -3.11,-5.41 -3.11,-5.41 L -3.11,-5.41 Z"></path></g> you can see the problem here: https://jsfiddle.net/mawb/k6guznyp/10/
Add fill atrribute in every path elements.
<!DOCTYPE html>
<html lang="en">
<script>
let index = 0;
let totalScenes = 1
document.addEventListener('DOMContentLoaded', () => {
document.getElementById('scene' + index).style.display = 'block';
document.getElementById('scene' + index).setCurrentTime(0);
});
</script>
<body>
<div id="container">
<div id="slides">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 338.9181636059818 323.2810362298012"
width="477.8363272119636" height="246.5620724596024" id="scene0" style="display: none;">
<g transform="translate(10 306.9962735735079) rotate(0 267.00513705514027 -148.49813678675395)" stroke="none">
<path fill="#e67700"
d="M -3.11,-5.41 Q -3.11,-5.41 9.63,-12.60 22.38,-19.79 32.35,-25.25 42.32,-30.71 51.46,-35.65 60.60,-40.59 72.50,-47.42 84.41,-54.24 97.54,-61.45 110.67,-68.65 123.18,-75.94 135.69,-83.23 149.83,-92.20 163.96,-101.16 178.85,-110.89 193.73,-120.61 207.13,-129.93 220.53,-139.25 233.19,-147.41 245.85,-155.56 264.37,-166.14 282.90,-176.72 307.28,-190.80 331.66,-204.89 349.58,-214.66 367.51,-224.43 394.65,-236.71 421.79,-248.99 444.46,-260.27 467.13,-271.56 481.37,-278.78 495.60,-286.00 505.06,-290.23 514.51,-294.45 518.94,-297.01 523.37,-299.56 526.76,-301.10 530.14,-302.64 531.20,-302.86 532.25,-303.08 533.32,-302.96 534.39,-302.83 535.37,-302.37 536.34,-301.91 537.12,-301.16 537.89,-300.41 538.39,-299.45 538.88,-298.49 539.05,-297.43 539.21,-296.36 539.03,-295.30 538.84,-294.24 538.33,-293.29 537.82,-292.35 537.03,-291.61 536.24,-290.88 535.25,-290.44 534.27,-289.99 533.20,-289.89 532.13,-289.78 531.08,-290.02 530.03,-290.26 529.11,-290.83 528.19,-291.39 527.50,-292.22 526.81,-293.05 526.42,-294.05 526.03,-295.06 525.98,-296.13 525.94,-297.21 526.23,-298.25 526.53,-299.28 527.15,-300.17 527.76,-301.05 528.62,-301.70 529.49,-302.34 530.51,-302.68 531.54,-303.01 532.61,-303.00 533.69,-302.99 534.71,-302.64 535.73,-302.28 536.58,-301.62 537.43,-300.96 538.03,-300.06 538.62,-299.17 538.90,-298.12 539.18,-297.08 539.11,-296.01 539.04,-294.93 538.63,-293.94 538.22,-292.94 537.52,-292.12 536.81,-291.31 535.88,-290.76 534.96,-290.22 534.96,-290.22 534.96,-290.22 531.75,-289.20 528.54,-288.18 523.67,-286.51 518.80,-284.85 509.58,-280.73 500.36,-276.62 486.09,-269.38 471.82,-262.14 448.97,-250.77 426.12,-239.40 399.34,-227.29 372.55,-215.18 354.74,-205.47 336.94,-195.76 312.54,-181.65 288.14,-167.54 269.86,-157.11 251.58,-146.67 239.09,-138.60 226.60,-130.54 213.09,-121.11 199.57,-111.69 184.64,-101.90 169.71,-92.12 155.43,-83.01 141.15,-73.91 128.54,-66.51 115.94,-59.10 102.94,-51.88 89.94,-44.66 77.99,-37.69 66.03,-30.72 56.99,-25.67 47.96,-20.62 38.15,-15.02 28.35,-9.43 15.73,-2.01 3.11,5.41 2.42,5.70 1.73,6.00 0.98,6.12 0.24,6.24 -0.50,6.18 -1.25,6.12 -1.96,5.88 -2.68,5.64 -3.32,5.23 -3.95,4.83 -4.47,4.29 -4.99,3.74 -5.37,3.09 -5.75,2.44 -5.95,1.72 -6.16,0.99 -6.19,0.24 -6.22,-0.50 -6.07,-1.24 -5.92,-1.98 -5.60,-2.66 -5.27,-3.34 -4.80,-3.92 -4.32,-4.51 -3.72,-4.96 -3.11,-5.41 -3.11,-5.41 L -3.11,-5.41 Z"
opacity="0">
<animate attributeName="opacity" from="0" to="1" calcMode="discrete" begin="2999ms" dur="1ms" fill="freeze">
</animate>
</path>
</g>
</svg>
</div>
</div>
</body>
</html>
Check demo here
https://www.codesprogram.com/snippet/wYPlsp
Since i can't edit the path elements, i added a new Attribute below <animate attributeName="d"...: <animate attributeName="fill" values="#e67700"></animate>
How can I stack my hyperlink images on top of each other in HTML/CSS [duplicate]
This question already has answers here:
How to make an inline element appear on new line, or block element not occupy the whole line?
(9 answers)
Links on New Line
(10 answers)
How to line-break 2 anchors
(3 answers)
Move <a> tag to a new line without <br>
(5 answers)
Closed 1 year ago.
It's my first time creating a website and I want to add these images as hyperlinks stacked on top of each other. However, they're stacked horizontally even though I was following a tutorial.
This is my HTML code:
.socials {
padding-bottom: 200px;
padding-right: 16px;
}
.social {
margin: 10px;
}
<div class="socials">
<a href="http://www.linkedin.com" class="social">
<svg xmlns="http://www.w3.org/2000/svg" fill="#ffffff" width="50" height="50" viewBox="0 0 24 24"><path d="M4.98 3.5c0 1.381-1.11 2.5-2.48 2.5s-2.48-1.119-2.48-2.5c0-1.38 1.11-2.5 2.48-2.5s2.48 1.12 2.48 2.5zm.02 4.5h-5v16h5v-16zm7.982 0h-4.968v16h4.969v-8.399c0-4.67 6.029-5.052 6.029 0v8.399h4.988v-10.131c0-7.88-8.922-7.593-11.018-3.714v-2.155z"/></svg> </a>
</a>
<a href="http://www.github.com" class="social">
<svg xmlns="http://www.w3.org/2000/svg" fill="#ffffff" width="50" height="50" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
</a>
<a href="http://www.instagram.com" class="social">
<svg xmlns="http://www.w3.org/2000/svg" fill="#ffffff" width="50" height="50" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>
</a>
</div>
To demonstrate, I replaced your SVG's with Images. You can use flex-box with flex-direction: column; to have your images stack. Also, for good measures, I positioned it in the center. See below.
.socials {
display: flex;
flex-direction: column;
align-items: center;
}
<div class="socials">
<a href="http://www.linkedin.com" class="social">
<img src="https://dummyimage.com/50/000/fff">
</a>
<a href="http://www.github.com" class="social">
<img src="https://dummyimage.com/50/000/fff">
</a>
<a href="http://www.instagram.com" class="social">
<img src="https://dummyimage.com/50/000/fff">
</a>
</div>
with CSS GRID
css grid automatically puts everything in row mode :)
...few lines and your work is complete!
-or with flex-box it automatically transforms everything into columns, so you need to write an extra CSS property flex-direction
so go for display: grid; I think is the best, simplest solution :)
.socials {
display: grid;
gap: 1rem;
}
.social svg {
fill: blue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="socials">
<a href="http://www.linkedin.com" class="social">
<svg xmlns="http://www.w3.org/2000/svg" fill="#ffffff" width="50" height="50" viewBox="0 0 24 24"><path d="M4.98 3.5c0 1.381-1.11 2.5-2.48 2.5s-2.48-1.119-2.48-2.5c0-1.38 1.11-2.5 2.48-2.5s2.48 1.12 2.48 2.5zm.02 4.5h-5v16h5v-16zm7.982 0h-4.968v16h4.969v-8.399c0-4.67 6.029-5.052 6.029 0v8.399h4.988v-10.131c0-7.88-8.922-7.593-11.018-3.714v-2.155z"/></svg>
</a>
<a href="http://www.github.com" class="social">
<svg xmlns="http://www.w3.org/2000/svg" fill="#ffffff" width="50" height="50" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
</a>
<a href="http://www.instagram.com" class="social">
<svg xmlns="http://www.w3.org/2000/svg" fill="#ffffff" width="50" height="50" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>
</a>
</div>
</body>
</html>
if you want to learn more about grid: https://www.freecodecamp.org/learn/responsive-web-design/css-grid/create-your-first-css-grid
this really help me a lot to understand it
Auto margins not accounting for svg width
I am coding a navbar for my site, and am using auto margins to align the logo to the left the links to the center and a search icon to the right. It works perfectly except that the links are off center by the width of the svg. When I remove the svg the link are perfectly centered.
Right now I am setting max-width and max-height to prevent it from getting too big, but to allow it to shrink on mobile devices. Using height and width don't fix the problem. I also have to put a height and width of auto on the svg to get it to show up.
Here is what I want:
Here is the code.
:root {
--gray: #34312d;
--white: white;
--bg_color: #f9f9f9;
--black: black;
}
body {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
nav {
background: var(--gray);
display: flex;
}
.nav_list {
display: flex;
list-style: none;
flex-grow: 1;
margin: 0;
padding: 0 1em;
}
.nav_list__link {
color: var(--white);
text-decoration: none;
}
.nav_list__li {
margin: auto 15px;
border-bottom: 2px solid var(--white);
}
.nav_list__li--logo {
margin: 0;
max-height: 50px;
max-width: 200px;
border-bottom: none;
}
.nav_list__li--first {
margin-left: auto;
}
.nav_list__li--search {
margin-left: auto;
border-bottom: none;
color: var(--white);
}
<nav>
<ul class="nav_list">
<li class="nav_list__li nav_list__li--logo">
<svg viewBox="0 0 294 73" fill="none" height="auto" width="auto" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<path
d="M7.37335 35.9332V30.9334L28.5604 18.7326V24.0602L11.7533 33.4625L28.5604 42.9586V48.2862L7.37335 35.9332ZM31.0307 55.7566L40.306 10.6416H43.4492L34.1998 55.7566H31.0307ZM67.0849 35.9332L45.8979 48.2862V42.9586L62.6792 33.4625L45.8979 24.0602V18.7326L67.0849 30.9334V35.9332Z"
fill="url(#paint0_linear)"
/>
<path
d="M103.894 24.2253H107.246L98.484 44.7111H95.4479L91.4664 35.0639L87.5268 44.7111H84.4907L75.7291 24.2253H79.0489L86.1401 41.2933L89.4598 32.9004L85.9825 24.2671H89.0186L91.4664 30.7787L93.9141 24.2671H96.9502L93.5149 32.9004L96.8347 41.2933L103.894 24.2253ZM121.796 35.4507C122.924 35.6318 123.894 36.0429 124.706 36.684C125.526 37.325 126.159 38.1368 126.608 39.1193C127.056 40.1018 127.28 41.2062 127.28 42.4325C127.28 44.0282 126.891 45.4322 126.114 46.6447C125.336 47.864 124.237 48.8082 122.815 49.4771C121.4 50.146 119.748 50.4805 117.857 50.4805C115.853 50.4805 114.096 50.1077 112.583 49.3621C111.077 48.6166 109.9 47.5644 109.053 46.2057L111.385 43.8854C111.987 44.9305 112.807 45.7667 113.843 46.3938C114.887 47.0279 116.225 47.3449 117.857 47.3449C119.67 47.3449 121.096 46.9303 122.132 46.1012C123.169 45.2789 123.687 44.0561 123.687 42.4325C123.687 40.7881 123.127 39.4746 122.006 38.4922C120.893 37.5097 119.271 37.0185 117.142 37.0185H116.113V34.1128H117.216C119.114 34.1128 120.567 33.6564 121.575 32.7436C122.591 31.8308 123.099 30.6916 123.099 29.3259C123.099 28.3852 122.875 27.6152 122.426 27.016C121.978 26.4167 121.372 25.9673 120.609 25.6677C119.846 25.3611 118.967 25.2078 117.972 25.2078C116.522 25.2078 115.251 25.5179 114.159 26.138C113.073 26.7512 112.226 27.6048 111.616 28.6987L109.494 26.5038C109.963 25.6189 110.639 24.849 111.522 24.194C112.404 23.539 113.43 23.0303 114.6 22.668C115.769 22.2987 117.013 22.114 118.329 22.114C119.982 22.114 121.446 22.4032 122.721 22.9816C123.995 23.5529 124.986 24.3612 125.694 25.4064C126.408 26.4516 126.765 27.6814 126.765 29.0959C126.765 30.1132 126.566 31.0748 126.166 31.9806C125.774 32.8795 125.203 33.639 124.454 34.2592C123.705 34.8723 122.819 35.2695 121.796 35.4507Z"
fill="white"
/>
<path
d="M135.965 45.1886V23.7046H144.943C145.872 23.7046 146.718 23.8954 147.479 24.277C148.241 24.6585 148.9 25.1691 149.456 25.8086C150.013 26.4428 150.448 27.1549 150.761 27.945C151.08 28.7296 151.239 29.5358 151.239 30.3634C151.239 31.4329 151.026 32.4325 150.599 33.3623C150.172 34.2867 149.578 35.0633 148.816 35.6921C148.055 36.3155 147.169 36.6971 146.159 36.8368L151.539 45.1886H149.748L144.514 37.0787H137.521V45.1886H135.965ZM137.521 35.6518H145.089C146.024 35.6518 146.834 35.4019 147.52 34.902C148.211 34.3969 148.743 33.7412 149.116 32.935C149.494 32.1235 149.683 31.2663 149.683 30.3634C149.683 29.4336 149.465 28.5711 149.027 27.7757C148.595 26.9749 148.017 26.3273 147.293 25.8328C146.574 25.3384 145.77 25.0912 144.878 25.0912H137.521V35.6518ZM161.483 45.4949C160.37 45.4949 159.336 45.2772 158.38 44.8419C157.429 44.4066 156.603 43.8127 155.9 43.0603C155.204 42.3025 154.658 41.4238 154.264 40.4242C153.869 39.4246 153.672 38.3685 153.672 37.256C153.672 35.7673 154.004 34.4184 154.669 33.2091C155.339 31.9945 156.262 31.0191 157.44 30.2828C158.618 29.5465 159.936 29.1784 161.394 29.1784C162.896 29.1784 164.225 29.5519 165.381 30.2989C166.537 31.046 167.452 32.0295 168.128 33.2494C168.808 34.4694 169.149 35.8049 169.149 37.256C169.149 37.3796 169.149 37.5032 169.149 37.6268C169.149 37.7451 169.14 37.8445 169.124 37.9251H155.252C155.333 39.1182 155.668 40.1985 156.257 41.1658C156.846 42.1332 157.599 42.8937 158.518 43.4473C159.441 44.0008 160.451 44.2776 161.548 44.2776C162.645 44.2776 163.679 43.9954 164.651 43.4311C165.624 42.8668 166.302 42.1413 166.685 41.2545L168.03 41.6173C167.722 42.3643 167.239 43.0307 166.58 43.6166C165.921 44.2024 165.151 44.6619 164.271 44.9951C163.39 45.3283 162.461 45.4949 161.483 45.4949ZM155.187 36.7481H167.69C167.609 35.5174 167.285 34.4291 166.718 33.4832C166.151 32.532 165.405 31.7849 164.481 31.2421C163.558 30.6939 162.539 30.4198 161.427 30.4198C160.308 30.4198 159.293 30.6939 158.38 31.2421C157.472 31.7849 156.732 32.532 156.16 33.4832C155.592 34.4291 155.268 35.5174 155.187 36.7481ZM177.483 45.4949C176.23 45.4949 175.066 45.2826 173.991 44.858C172.916 44.4335 171.973 43.7858 171.163 42.9152L171.86 41.8591C172.729 42.6868 173.61 43.2887 174.501 43.6649C175.398 44.0358 176.373 44.2212 177.426 44.2212C178.782 44.2212 179.881 43.939 180.724 43.3747C181.567 42.8104 181.988 42.0231 181.988 41.0127C181.988 40.3248 181.791 39.7954 181.397 39.4246C181.002 39.0484 180.435 38.7447 179.695 38.5136C178.955 38.2825 178.056 38.0353 176.997 37.7719C175.922 37.4925 175.014 37.2023 174.274 36.9013C173.534 36.595 172.981 36.2 172.613 35.7163C172.251 35.2326 172.07 34.5769 172.07 33.7492C172.07 32.7227 172.33 31.8709 172.848 31.1937C173.367 30.5166 174.066 30.0114 174.947 29.6782C175.827 29.345 176.805 29.1784 177.88 29.1784C179.117 29.1784 180.197 29.3799 181.121 29.783C182.045 30.1861 182.75 30.7208 183.236 31.3872L182.418 32.3546C181.91 31.7097 181.248 31.2314 180.432 30.9197C179.622 30.6079 178.731 30.4521 177.759 30.4521C177.029 30.4521 176.341 30.5542 175.692 30.7584C175.044 30.9573 174.52 31.2851 174.12 31.7419C173.726 32.1934 173.529 32.8007 173.529 33.5638C173.529 34.1711 173.675 34.6468 173.966 34.9907C174.263 35.3347 174.706 35.6141 175.295 35.8291C175.884 36.0387 176.613 36.2644 177.483 36.5063C178.72 36.8073 179.784 37.119 180.676 37.4414C181.572 37.7639 182.264 38.1831 182.75 38.699C183.236 39.2096 183.479 39.9297 183.479 40.8595C183.479 42.2945 182.931 43.4258 181.834 44.2534C180.743 45.0811 179.293 45.4949 177.483 45.4949ZM193.698 45.4949C192.585 45.4949 191.556 45.2826 190.611 44.858C189.671 44.4335 188.855 43.8423 188.164 43.0845C187.472 42.3267 186.935 41.4534 186.551 40.4645C186.168 39.4756 185.976 38.4384 185.976 37.3527C185.976 36.2403 186.168 35.1949 186.551 34.2168C186.935 33.2387 187.475 32.3734 188.172 31.621C188.874 30.8632 189.695 30.2667 190.635 29.8313C191.581 29.396 192.602 29.1784 193.698 29.1784C194.795 29.1784 195.808 29.396 196.737 29.8313C197.671 30.2667 198.492 30.8632 199.2 31.621C199.913 32.3734 200.461 33.2387 200.845 34.2168C201.234 35.1949 201.428 36.2403 201.428 37.3527C201.428 38.4384 201.234 39.4756 200.845 40.4645C200.461 41.4534 199.918 42.3267 199.216 43.0845C198.519 43.8423 197.698 44.4335 196.753 44.858C195.813 45.2826 194.795 45.4949 193.698 45.4949ZM187.491 37.4092C187.491 38.6399 187.77 39.7658 188.326 40.787C188.888 41.8027 189.633 42.6142 190.562 43.2215C191.497 43.8288 192.531 44.1325 193.666 44.1325C194.806 44.1325 195.845 43.8262 196.785 43.2135C197.731 42.5954 198.482 41.7678 199.038 40.7305C199.594 39.6879 199.873 38.5512 199.873 37.3205C199.873 36.0898 199.594 34.9612 199.038 33.9347C198.482 32.9028 197.731 32.0805 196.785 31.4678C195.845 30.8498 194.816 30.5408 193.698 30.5408C192.564 30.5408 191.529 30.8552 190.595 31.484C189.666 32.1074 188.915 32.935 188.342 33.9669C187.775 34.9934 187.491 36.1408 187.491 37.4092ZM204.924 38.5297V29.4525H206.447V38.3201C206.447 40.2764 206.776 41.7355 207.436 42.6975C208.095 43.6542 209.094 44.1325 210.434 44.1325C211.325 44.1325 212.181 43.9363 213.002 43.544C213.823 43.1463 214.547 42.59 215.174 41.8753C215.806 41.1605 216.273 40.3274 216.576 39.3762V29.4525H218.099V43.1893C218.099 43.4311 218.153 43.6139 218.261 43.7375C218.374 43.8557 218.531 43.9256 218.731 43.9471V45.1886C218.531 45.21 218.374 45.2208 218.261 45.2208C218.153 45.2208 218.058 45.21 217.977 45.1886C217.632 45.1456 217.345 45.0005 217.118 44.7532C216.897 44.5006 216.775 44.1916 216.754 43.8262L216.729 41.4641C216.038 42.7163 215.087 43.7025 213.877 44.4227C212.673 45.1375 211.371 45.4949 209.972 45.4949C208.308 45.4949 207.049 44.9091 206.196 43.7375C205.348 42.5659 204.924 40.83 204.924 38.5297H204.924ZM230.412 30.8149C228.997 30.8525 227.754 31.2717 226.685 32.0725C225.62 32.8679 224.878 33.9615 224.456 35.3535V45.1886H222.933V29.4525H224.392V33.322C224.937 32.2149 225.666 31.3147 226.579 30.6214C227.492 29.9227 228.456 29.5223 229.472 29.4202C229.672 29.3987 229.853 29.388 230.015 29.388C230.182 29.388 230.315 29.388 230.412 29.388V30.8149ZM239.414 45.4949C238.323 45.4949 237.3 45.2772 236.343 44.8419C235.393 44.4066 234.561 43.8127 233.848 43.0603C233.14 42.3025 232.589 41.4292 232.195 40.4403C231.8 39.4514 231.603 38.39 231.603 37.256C231.603 35.7458 231.935 34.3861 232.6 33.1769C233.27 31.9623 234.193 30.9922 235.371 30.2667C236.549 29.5411 237.888 29.1784 239.39 29.1784C240.827 29.1784 242.094 29.5062 243.19 30.1619C244.287 30.8175 245.108 31.7097 245.654 32.8383L244.163 33.322C243.698 32.4567 243.034 31.7769 242.169 31.2824C241.31 30.788 240.362 30.5408 239.325 30.5408C238.169 30.5408 237.124 30.8337 236.189 31.4195C235.26 32.0053 234.515 32.8087 233.953 33.8299C233.397 34.8456 233.118 35.9877 233.118 37.256C233.118 38.5082 233.402 39.661 233.969 40.7144C234.542 41.7624 235.298 42.5954 236.238 43.2135C237.183 43.8262 238.223 44.1325 239.358 44.1325C240.087 44.1325 240.8 43.9954 241.497 43.7213C242.199 43.4473 242.81 43.0899 243.328 42.6492C243.847 42.2031 244.187 41.7275 244.349 41.2223L245.84 41.6495C245.575 42.3966 245.116 43.0576 244.462 43.6327C243.814 44.2077 243.058 44.6619 242.194 44.9951C241.335 45.3283 240.408 45.4949 239.414 45.4949ZM255.84 45.4949C254.727 45.4949 253.693 45.2772 252.737 44.8419C251.786 44.4066 250.96 43.8127 250.257 43.0603C249.56 42.3025 249.015 41.4238 248.621 40.4242C248.226 39.4246 248.029 38.3685 248.029 37.256C248.029 35.7673 248.361 34.4184 249.026 33.2091C249.695 31.9945 250.619 31.0191 251.797 30.2828C252.974 29.5465 254.293 29.1784 255.751 29.1784C257.253 29.1784 258.582 29.5519 259.738 30.2989C260.894 31.046 261.809 32.0295 262.485 33.2494C263.165 34.4694 263.505 35.8049 263.505 37.256C263.505 37.3796 263.505 37.5032 263.505 37.6268C263.505 37.7451 263.497 37.8445 263.481 37.9251H249.609C249.69 39.1182 250.025 40.1985 250.614 41.1658C251.203 42.1332 251.956 42.8937 252.874 43.4473C253.798 44.0008 254.808 44.2776 255.905 44.2776C257.002 44.2776 258.036 43.9954 259.008 43.4311C259.981 42.8668 260.659 42.1413 261.042 41.2545L262.387 41.6173C262.079 42.3643 261.596 43.0307 260.937 43.6166C260.278 44.2024 259.508 44.6619 258.628 44.9951C257.747 45.3283 256.818 45.4949 255.84 45.4949H255.84ZM249.544 36.7481H262.047C261.966 35.5174 261.642 34.4291 261.075 33.4832C260.507 32.532 259.762 31.7849 258.838 31.2421C257.914 30.6939 256.896 30.4198 255.783 30.4198C254.665 30.4198 253.65 30.6939 252.737 31.2421C251.829 31.7849 251.089 32.532 250.517 33.4832C249.949 34.4291 249.625 35.5174 249.544 36.7481ZM271.84 45.4949C270.587 45.4949 269.423 45.2826 268.348 44.858C267.273 44.4335 266.33 43.7858 265.52 42.9152L266.217 41.8591C267.086 42.6868 267.967 43.2887 268.858 43.6649C269.755 44.0358 270.73 44.2212 271.783 44.2212C273.139 44.2212 274.238 43.939 275.081 43.3747C275.924 42.8104 276.345 42.0231 276.345 41.0127C276.345 40.3248 276.148 39.7954 275.754 39.4246C275.359 39.0484 274.792 38.7447 274.052 38.5136C273.312 38.2825 272.413 38.0353 271.354 37.7719C270.279 37.4925 269.371 37.2023 268.631 36.9013C267.891 36.595 267.337 36.2 266.97 35.7163C266.608 35.2326 266.427 34.5769 266.427 33.7492C266.427 32.7227 266.687 31.8709 267.205 31.1937C267.724 30.5166 268.423 30.0114 269.304 29.6782C270.184 29.345 271.162 29.1784 272.237 29.1784C273.474 29.1784 274.554 29.3799 275.478 29.783C276.402 30.1861 277.107 30.7208 277.593 31.3872L276.775 32.3546C276.267 31.7097 275.605 31.2314 274.789 30.9197C273.979 30.6079 273.088 30.4521 272.115 30.4521C271.386 30.4521 270.697 30.5542 270.049 30.7584C269.401 30.9573 268.877 31.2851 268.477 31.7419C268.083 32.1934 267.886 32.8007 267.886 33.5638C267.886 34.1711 268.032 34.6468 268.323 34.9907C268.62 35.3347 269.063 35.6141 269.652 35.8291C270.241 36.0387 270.97 36.2644 271.84 36.5063C273.077 36.8073 274.141 37.119 275.032 37.4414C275.929 37.7639 276.621 38.1831 277.107 38.699C277.593 39.2096 277.836 39.9297 277.836 40.8595C277.836 42.2945 277.288 43.4258 276.191 44.2534C275.1 45.0811 273.65 45.4949 271.84 45.4949Z"
fill="white"
/>
</g>
<defs>
<linearGradient
id="paint0_linear"
x1="7.5972"
y1="13.3458"
x2="68.3447"
y2="28.9704"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#A2FAA3" />
<stop offset="1" stop-color="#3AAFB9" />
</linearGradient>
<clipPath id="clip0">
<rect
width="294"
height="78"
fill="white"
transform="translate(0 -5)"
/>
</clipPath>
</defs>
</svg>
</li>
<li class="nav_list__li nav_list__li--first">
Resources
</li>
<li class="nav_list__li">
tipsNtricks
</li>
<li class="nav_list__li">
Contact
</li>
<li class="nav_list__li nav_list__li--search">
<i class="fas fa-search"></i>
</li>
</ul>
</nav>
For a short answer, jus change your search li to have the same width that your logo and align it to the right, but I would recommend you to find another way to structure your html and css, maybe to something with display grid, but it would be more complicated to help you.
In other words, change your search li to:
.nav_list__li--search {
width: 200px;
display: flex;
justify-content: flex-end;
margin-left: auto;
border-bottom: none;
color: var(--white);
}
You could also use position absolute to position your logo so it would not interfere at the rest.
Perhaps create a 3 column grid with the sizes noted. I changed some classes and removed some for clarity. Probably not perfect but might give you a start/ideas.
:root {
--gray: #34312d;
--white: #FFFFFF;
--bg_color: #f9f9f9;
--black: #000000;
}
body {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
nav {
background: var(--gray);
}
.my-grid {
display: grid;
grid-template-columns: minmax(30%, 200px) 30% 30%;
grid-template-rows: 50px;
}
.my-logo {
grid-column-start: 1;
grid-column-end: 1;
}
.nav_list {
grid-column-start: 2;
grid-column-end: 2;
display: flex;
list-style: none;
flex-grow: 1;
margin: 0;
padding: 0 1em;
}
.nav_list__link {
color: var(--white);
text-decoration: none;
}
.nav_list__li {
margin: auto 15px;
border-bottom: 2px solid var(--white);
}
.my-icon {
grid-column-start: 4;
grid-column-end: 4;
color: var(--white);
border: solid 1px lime;
/*for clarity only)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<nav>
<div class="my-grid">
<div class="my-logo">
<svg viewBox="0 0 294 73" fill="none" height="auto" width="auto" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<path
d="M7.37335 35.9332V30.9334L28.5604 18.7326V24.0602L11.7533 33.4625L28.5604 42.9586V48.2862L7.37335 35.9332ZM31.0307 55.7566L40.306 10.6416H43.4492L34.1998 55.7566H31.0307ZM67.0849 35.9332L45.8979 48.2862V42.9586L62.6792 33.4625L45.8979 24.0602V18.7326L67.0849 30.9334V35.9332Z"
fill="url(#paint0_linear)"
/>
<path
d="M103.894 24.2253H107.246L98.484 44.7111H95.4479L91.4664 35.0639L87.5268 44.7111H84.4907L75.7291 24.2253H79.0489L86.1401 41.2933L89.4598 32.9004L85.9825 24.2671H89.0186L91.4664 30.7787L93.9141 24.2671H96.9502L93.5149 32.9004L96.8347 41.2933L103.894 24.2253ZM121.796 35.4507C122.924 35.6318 123.894 36.0429 124.706 36.684C125.526 37.325 126.159 38.1368 126.608 39.1193C127.056 40.1018 127.28 41.2062 127.28 42.4325C127.28 44.0282 126.891 45.4322 126.114 46.6447C125.336 47.864 124.237 48.8082 122.815 49.4771C121.4 50.146 119.748 50.4805 117.857 50.4805C115.853 50.4805 114.096 50.1077 112.583 49.3621C111.077 48.6166 109.9 47.5644 109.053 46.2057L111.385 43.8854C111.987 44.9305 112.807 45.7667 113.843 46.3938C114.887 47.0279 116.225 47.3449 117.857 47.3449C119.67 47.3449 121.096 46.9303 122.132 46.1012C123.169 45.2789 123.687 44.0561 123.687 42.4325C123.687 40.7881 123.127 39.4746 122.006 38.4922C120.893 37.5097 119.271 37.0185 117.142 37.0185H116.113V34.1128H117.216C119.114 34.1128 120.567 33.6564 121.575 32.7436C122.591 31.8308 123.099 30.6916 123.099 29.3259C123.099 28.3852 122.875 27.6152 122.426 27.016C121.978 26.4167 121.372 25.9673 120.609 25.6677C119.846 25.3611 118.967 25.2078 117.972 25.2078C116.522 25.2078 115.251 25.5179 114.159 26.138C113.073 26.7512 112.226 27.6048 111.616 28.6987L109.494 26.5038C109.963 25.6189 110.639 24.849 111.522 24.194C112.404 23.539 113.43 23.0303 114.6 22.668C115.769 22.2987 117.013 22.114 118.329 22.114C119.982 22.114 121.446 22.4032 122.721 22.9816C123.995 23.5529 124.986 24.3612 125.694 25.4064C126.408 26.4516 126.765 27.6814 126.765 29.0959C126.765 30.1132 126.566 31.0748 126.166 31.9806C125.774 32.8795 125.203 33.639 124.454 34.2592C123.705 34.8723 122.819 35.2695 121.796 35.4507Z"
fill="white"/>
<path d="M135.965 45.1886V23.7046H144.943C145.872 23.7046 146.718 23.8954 147.479 24.277C148.241 24.6585 148.9 25.1691 149.456 25.8086C150.013 26.4428 150.448 27.1549 150.761 27.945C151.08 28.7296 151.239 29.5358 151.239 30.3634C151.239 31.4329 151.026 32.4325 150.599 33.3623C150.172 34.2867 149.578 35.0633 148.816 35.6921C148.055 36.3155 147.169 36.6971 146.159 36.8368L151.539 45.1886H149.748L144.514 37.0787H137.521V45.1886H135.965ZM137.521 35.6518H145.089C146.024 35.6518 146.834 35.4019 147.52 34.902C148.211 34.3969 148.743 33.7412 149.116 32.935C149.494 32.1235 149.683 31.2663 149.683 30.3634C149.683 29.4336 149.465 28.5711 149.027 27.7757C148.595 26.9749 148.017 26.3273 147.293 25.8328C146.574 25.3384 145.77 25.0912 144.878 25.0912H137.521V35.6518ZM161.483 45.4949C160.37 45.4949 159.336 45.2772 158.38 44.8419C157.429 44.4066 156.603 43.8127 155.9 43.0603C155.204 42.3025 154.658 41.4238 154.264 40.4242C153.869 39.4246 153.672 38.3685 153.672 37.256C153.672 35.7673 154.004 34.4184 154.669 33.2091C155.339 31.9945 156.262 31.0191 157.44 30.2828C158.618 29.5465 159.936 29.1784 161.394 29.1784C162.896 29.1784 164.225 29.5519 165.381 30.2989C166.537 31.046 167.452 32.0295 168.128 33.2494C168.808 34.4694 169.149 35.8049 169.149 37.256C169.149 37.3796 169.149 37.5032 169.149 37.6268C169.149 37.7451 169.14 37.8445 169.124 37.9251H155.252C155.333 39.1182 155.668 40.1985 156.257 41.1658C156.846 42.1332 157.599 42.8937 158.518 43.4473C159.441 44.0008 160.451 44.2776 161.548 44.2776C162.645 44.2776 163.679 43.9954 164.651 43.4311C165.624 42.8668 166.302 42.1413 166.685 41.2545L168.03 41.6173C167.722 42.3643 167.239 43.0307 166.58 43.6166C165.921 44.2024 165.151 44.6619 164.271 44.9951C163.39 45.3283 162.461 45.4949 161.483 45.4949ZM155.187 36.7481H167.69C167.609 35.5174 167.285 34.4291 166.718 33.4832C166.151 32.532 165.405 31.7849 164.481 31.2421C163.558 30.6939 162.539 30.4198 161.427 30.4198C160.308 30.4198 159.293 30.6939 158.38 31.2421C157.472 31.7849 156.732 32.532 156.16 33.4832C155.592 34.4291 155.268 35.5174 155.187 36.7481ZM177.483 45.4949C176.23 45.4949 175.066 45.2826 173.991 44.858C172.916 44.4335 171.973 43.7858 171.163 42.9152L171.86 41.8591C172.729 42.6868 173.61 43.2887 174.501 43.6649C175.398 44.0358 176.373 44.2212 177.426 44.2212C178.782 44.2212 179.881 43.939 180.724 43.3747C181.567 42.8104 181.988 42.0231 181.988 41.0127C181.988 40.3248 181.791 39.7954 181.397 39.4246C181.002 39.0484 180.435 38.7447 179.695 38.5136C178.955 38.2825 178.056 38.0353 176.997 37.7719C175.922 37.4925 175.014 37.2023 174.274 36.9013C173.534 36.595 172.981 36.2 172.613 35.7163C172.251 35.2326 172.07 34.5769 172.07 33.7492C172.07 32.7227 172.33 31.8709 172.848 31.1937C173.367 30.5166 174.066 30.0114 174.947 29.6782C175.827 29.345 176.805 29.1784 177.88 29.1784C179.117 29.1784 180.197 29.3799 181.121 29.783C182.045 30.1861 182.75 30.7208 183.236 31.3872L182.418 32.3546C181.91 31.7097 181.248 31.2314 180.432 30.9197C179.622 30.6079 178.731 30.4521 177.759 30.4521C177.029 30.4521 176.341 30.5542 175.692 30.7584C175.044 30.9573 174.52 31.2851 174.12 31.7419C173.726 32.1934 173.529 32.8007 173.529 33.5638C173.529 34.1711 173.675 34.6468 173.966 34.9907C174.263 35.3347 174.706 35.6141 175.295 35.8291C175.884 36.0387 176.613 36.2644 177.483 36.5063C178.72 36.8073 179.784 37.119 180.676 37.4414C181.572 37.7639 182.264 38.1831 182.75 38.699C183.236 39.2096 183.479 39.9297 183.479 40.8595C183.479 42.2945 182.931 43.4258 181.834 44.2534C180.743 45.0811 179.293 45.4949 177.483 45.4949ZM193.698 45.4949C192.585 45.4949 191.556 45.2826 190.611 44.858C189.671 44.4335 188.855 43.8423 188.164 43.0845C187.472 42.3267 186.935 41.4534 186.551 40.4645C186.168 39.4756 185.976 38.4384 185.976 37.3527C185.976 36.2403 186.168 35.1949 186.551 34.2168C186.935 33.2387 187.475 32.3734 188.172 31.621C188.874 30.8632 189.695 30.2667 190.635 29.8313C191.581 29.396 192.602 29.1784 193.698 29.1784C194.795 29.1784 195.808 29.396 196.737 29.8313C197.671 30.2667 198.492 30.8632 199.2 31.621C199.913 32.3734 200.461 33.2387 200.845 34.2168C201.234 35.1949 201.428 36.2403 201.428 37.3527C201.428 38.4384 201.234 39.4756 200.845 40.4645C200.461 41.4534 199.918 42.3267 199.216 43.0845C198.519 43.8423 197.698 44.4335 196.753 44.858C195.813 45.2826 194.795 45.4949 193.698 45.4949ZM187.491 37.4092C187.491 38.6399 187.77 39.7658 188.326 40.787C188.888 41.8027 189.633 42.6142 190.562 43.2215C191.497 43.8288 192.531 44.1325 193.666 44.1325C194.806 44.1325 195.845 43.8262 196.785 43.2135C197.731 42.5954 198.482 41.7678 199.038 40.7305C199.594 39.6879 199.873 38.5512 199.873 37.3205C199.873 36.0898 199.594 34.9612 199.038 33.9347C198.482 32.9028 197.731 32.0805 196.785 31.4678C195.845 30.8498 194.816 30.5408 193.698 30.5408C192.564 30.5408 191.529 30.8552 190.595 31.484C189.666 32.1074 188.915 32.935 188.342 33.9669C187.775 34.9934 187.491 36.1408 187.491 37.4092ZM204.924 38.5297V29.4525H206.447V38.3201C206.447 40.2764 206.776 41.7355 207.436 42.6975C208.095 43.6542 209.094 44.1325 210.434 44.1325C211.325 44.1325 212.181 43.9363 213.002 43.544C213.823 43.1463 214.547 42.59 215.174 41.8753C215.806 41.1605 216.273 40.3274 216.576 39.3762V29.4525H218.099V43.1893C218.099 43.4311 218.153 43.6139 218.261 43.7375C218.374 43.8557 218.531 43.9256 218.731 43.9471V45.1886C218.531 45.21 218.374 45.2208 218.261 45.2208C218.153 45.2208 218.058 45.21 217.977 45.1886C217.632 45.1456 217.345 45.0005 217.118 44.7532C216.897 44.5006 216.775 44.1916 216.754 43.8262L216.729 41.4641C216.038 42.7163 215.087 43.7025 213.877 44.4227C212.673 45.1375 211.371 45.4949 209.972 45.4949C208.308 45.4949 207.049 44.9091 206.196 43.7375C205.348 42.5659 204.924 40.83 204.924 38.5297H204.924ZM230.412 30.8149C228.997 30.8525 227.754 31.2717 226.685 32.0725C225.62 32.8679 224.878 33.9615 224.456 35.3535V45.1886H222.933V29.4525H224.392V33.322C224.937 32.2149 225.666 31.3147 226.579 30.6214C227.492 29.9227 228.456 29.5223 229.472 29.4202C229.672 29.3987 229.853 29.388 230.015 29.388C230.182 29.388 230.315 29.388 230.412 29.388V30.8149ZM239.414 45.4949C238.323 45.4949 237.3 45.2772 236.343 44.8419C235.393 44.4066 234.561 43.8127 233.848 43.0603C233.14 42.3025 232.589 41.4292 232.195 40.4403C231.8 39.4514 231.603 38.39 231.603 37.256C231.603 35.7458 231.935 34.3861 232.6 33.1769C233.27 31.9623 234.193 30.9922 235.371 30.2667C236.549 29.5411 237.888 29.1784 239.39 29.1784C240.827 29.1784 242.094 29.5062 243.19 30.1619C244.287 30.8175 245.108 31.7097 245.654 32.8383L244.163 33.322C243.698 32.4567 243.034 31.7769 242.169 31.2824C241.31 30.788 240.362 30.5408 239.325 30.5408C238.169 30.5408 237.124 30.8337 236.189 31.4195C235.26 32.0053 234.515 32.8087 233.953 33.8299C233.397 34.8456 233.118 35.9877 233.118 37.256C233.118 38.5082 233.402 39.661 233.969 40.7144C234.542 41.7624 235.298 42.5954 236.238 43.2135C237.183 43.8262 238.223 44.1325 239.358 44.1325C240.087 44.1325 240.8 43.9954 241.497 43.7213C242.199 43.4473 242.81 43.0899 243.328 42.6492C243.847 42.2031 244.187 41.7275 244.349 41.2223L245.84 41.6495C245.575 42.3966 245.116 43.0576 244.462 43.6327C243.814 44.2077 243.058 44.6619 242.194 44.9951C241.335 45.3283 240.408 45.4949 239.414 45.4949ZM255.84 45.4949C254.727 45.4949 253.693 45.2772 252.737 44.8419C251.786 44.4066 250.96 43.8127 250.257 43.0603C249.56 42.3025 249.015 41.4238 248.621 40.4242C248.226 39.4246 248.029 38.3685 248.029 37.256C248.029 35.7673 248.361 34.4184 249.026 33.2091C249.695 31.9945 250.619 31.0191 251.797 30.2828C252.974 29.5465 254.293 29.1784 255.751 29.1784C257.253 29.1784 258.582 29.5519 259.738 30.2989C260.894 31.046 261.809 32.0295 262.485 33.2494C263.165 34.4694 263.505 35.8049 263.505 37.256C263.505 37.3796 263.505 37.5032 263.505 37.6268C263.505 37.7451 263.497 37.8445 263.481 37.9251H249.609C249.69 39.1182 250.025 40.1985 250.614 41.1658C251.203 42.1332 251.956 42.8937 252.874 43.4473C253.798 44.0008 254.808 44.2776 255.905 44.2776C257.002 44.2776 258.036 43.9954 259.008 43.4311C259.981 42.8668 260.659 42.1413 261.042 41.2545L262.387 41.6173C262.079 42.3643 261.596 43.0307 260.937 43.6166C260.278 44.2024 259.508 44.6619 258.628 44.9951C257.747 45.3283 256.818 45.4949 255.84 45.4949H255.84ZM249.544 36.7481H262.047C261.966 35.5174 261.642 34.4291 261.075 33.4832C260.507 32.532 259.762 31.7849 258.838 31.2421C257.914 30.6939 256.896 30.4198 255.783 30.4198C254.665 30.4198 253.65 30.6939 252.737 31.2421C251.829 31.7849 251.089 32.532 250.517 33.4832C249.949 34.4291 249.625 35.5174 249.544 36.7481ZM271.84 45.4949C270.587 45.4949 269.423 45.2826 268.348 44.858C267.273 44.4335 266.33 43.7858 265.52 42.9152L266.217 41.8591C267.086 42.6868 267.967 43.2887 268.858 43.6649C269.755 44.0358 270.73 44.2212 271.783 44.2212C273.139 44.2212 274.238 43.939 275.081 43.3747C275.924 42.8104 276.345 42.0231 276.345 41.0127C276.345 40.3248 276.148 39.7954 275.754 39.4246C275.359 39.0484 274.792 38.7447 274.052 38.5136C273.312 38.2825 272.413 38.0353 271.354 37.7719C270.279 37.4925 269.371 37.2023 268.631 36.9013C267.891 36.595 267.337 36.2 266.97 35.7163C266.608 35.2326 266.427 34.5769 266.427 33.7492C266.427 32.7227 266.687 31.8709 267.205 31.1937C267.724 30.5166 268.423 30.0114 269.304 29.6782C270.184 29.345 271.162 29.1784 272.237 29.1784C273.474 29.1784 274.554 29.3799 275.478 29.783C276.402 30.1861 277.107 30.7208 277.593 31.3872L276.775 32.3546C276.267 31.7097 275.605 31.2314 274.789 30.9197C273.979 30.6079 273.088 30.4521 272.115 30.4521C271.386 30.4521 270.697 30.5542 270.049 30.7584C269.401 30.9573 268.877 31.2851 268.477 31.7419C268.083 32.1934 267.886 32.8007 267.886 33.5638C267.886 34.1711 268.032 34.6468 268.323 34.9907C268.62 35.3347 269.063 35.6141 269.652 35.8291C270.241 36.0387 270.97 36.2644 271.84 36.5063C273.077 36.8073 274.141 37.119 275.032 37.4414C275.929 37.7639 276.621 38.1831 277.107 38.699C277.593 39.2096 277.836 39.9297 277.836 40.8595C277.836 42.2945 277.288 43.4258 276.191 44.2534C275.1 45.0811 273.65 45.4949 271.84 45.4949Z"
fill="white"/>
</g> <defs>
<linearGradient id="paint0_linear" x1="7.5972" y1="13.3458" x2="68.3447" y2="28.9704" gradientUnits="userSpaceOnUse">
<stop stop-color="#A2FAA3" />
<stop offset="1" stop-color="#3AAFB9" />
</linearGradient>
<clipPath id="clip0">
<rect width="294" height="78" fill="white" transform="translate(0 -5)" />
</clipPath>
</defs>
</svg>
</div>
<ul class="nav_list">
<li class="nav_list__li">
Resources
</li>
<li class="nav_list__li">
tipsNtricks
</li>
<li class="nav_list__li">
Contact
</li>
</ul>
<div class="my-icon">
<i class="fas fa-search"></i>
</div>
</nav>
To fix it I used another auto margin on the last link in the navbar, which centered it.
:root {
--gray: #34312d;
--white: white;
--bg_color: #f9f9f9;
--black: black;
}
body {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
nav {
background: var(--gray);
display: flex;
}
.nav_list {
display: flex;
list-style: none;
flex-grow: 1;
margin: 0;
padding: 0 1em;
}
.nav_list__link {
color: var(--white);
text-decoration: none;
}
.nav_list__li {
margin: auto 15px;
border-bottom: 2px solid var(--white);
}
.nav_list__li--logo {
margin: 0;
max-height: 50px;
max-width: 200px;
border-bottom: none;
}
.nav_list__li--first {
margin-left: auto;
}
.nav_list__li--search {
margin-left: auto;
border-bottom: none;
color: var(--white);
}
.nav_list__li--last {
margin-right: auto;
}
<nav>
<ul class="nav_list">
<li class="nav_list__li nav_list__li--logo">
<svg viewBox="0 0 294 73" fill="none" height="auto" width="auto" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<path
d="M7.37335 35.9332V30.9334L28.5604 18.7326V24.0602L11.7533 33.4625L28.5604 42.9586V48.2862L7.37335 35.9332ZM31.0307 55.7566L40.306 10.6416H43.4492L34.1998 55.7566H31.0307ZM67.0849 35.9332L45.8979 48.2862V42.9586L62.6792 33.4625L45.8979 24.0602V18.7326L67.0849 30.9334V35.9332Z"
fill="url(#paint0_linear)"
/>
<path
d="M103.894 24.2253H107.246L98.484 44.7111H95.4479L91.4664 35.0639L87.5268 44.7111H84.4907L75.7291 24.2253H79.0489L86.1401 41.2933L89.4598 32.9004L85.9825 24.2671H89.0186L91.4664 30.7787L93.9141 24.2671H96.9502L93.5149 32.9004L96.8347 41.2933L103.894 24.2253ZM121.796 35.4507C122.924 35.6318 123.894 36.0429 124.706 36.684C125.526 37.325 126.159 38.1368 126.608 39.1193C127.056 40.1018 127.28 41.2062 127.28 42.4325C127.28 44.0282 126.891 45.4322 126.114 46.6447C125.336 47.864 124.237 48.8082 122.815 49.4771C121.4 50.146 119.748 50.4805 117.857 50.4805C115.853 50.4805 114.096 50.1077 112.583 49.3621C111.077 48.6166 109.9 47.5644 109.053 46.2057L111.385 43.8854C111.987 44.9305 112.807 45.7667 113.843 46.3938C114.887 47.0279 116.225 47.3449 117.857 47.3449C119.67 47.3449 121.096 46.9303 122.132 46.1012C123.169 45.2789 123.687 44.0561 123.687 42.4325C123.687 40.7881 123.127 39.4746 122.006 38.4922C120.893 37.5097 119.271 37.0185 117.142 37.0185H116.113V34.1128H117.216C119.114 34.1128 120.567 33.6564 121.575 32.7436C122.591 31.8308 123.099 30.6916 123.099 29.3259C123.099 28.3852 122.875 27.6152 122.426 27.016C121.978 26.4167 121.372 25.9673 120.609 25.6677C119.846 25.3611 118.967 25.2078 117.972 25.2078C116.522 25.2078 115.251 25.5179 114.159 26.138C113.073 26.7512 112.226 27.6048 111.616 28.6987L109.494 26.5038C109.963 25.6189 110.639 24.849 111.522 24.194C112.404 23.539 113.43 23.0303 114.6 22.668C115.769 22.2987 117.013 22.114 118.329 22.114C119.982 22.114 121.446 22.4032 122.721 22.9816C123.995 23.5529 124.986 24.3612 125.694 25.4064C126.408 26.4516 126.765 27.6814 126.765 29.0959C126.765 30.1132 126.566 31.0748 126.166 31.9806C125.774 32.8795 125.203 33.639 124.454 34.2592C123.705 34.8723 122.819 35.2695 121.796 35.4507Z"
fill="white"
/>
<path
d="M135.965 45.1886V23.7046H144.943C145.872 23.7046 146.718 23.8954 147.479 24.277C148.241 24.6585 148.9 25.1691 149.456 25.8086C150.013 26.4428 150.448 27.1549 150.761 27.945C151.08 28.7296 151.239 29.5358 151.239 30.3634C151.239 31.4329 151.026 32.4325 150.599 33.3623C150.172 34.2867 149.578 35.0633 148.816 35.6921C148.055 36.3155 147.169 36.6971 146.159 36.8368L151.539 45.1886H149.748L144.514 37.0787H137.521V45.1886H135.965ZM137.521 35.6518H145.089C146.024 35.6518 146.834 35.4019 147.52 34.902C148.211 34.3969 148.743 33.7412 149.116 32.935C149.494 32.1235 149.683 31.2663 149.683 30.3634C149.683 29.4336 149.465 28.5711 149.027 27.7757C148.595 26.9749 148.017 26.3273 147.293 25.8328C146.574 25.3384 145.77 25.0912 144.878 25.0912H137.521V35.6518ZM161.483 45.4949C160.37 45.4949 159.336 45.2772 158.38 44.8419C157.429 44.4066 156.603 43.8127 155.9 43.0603C155.204 42.3025 154.658 41.4238 154.264 40.4242C153.869 39.4246 153.672 38.3685 153.672 37.256C153.672 35.7673 154.004 34.4184 154.669 33.2091C155.339 31.9945 156.262 31.0191 157.44 30.2828C158.618 29.5465 159.936 29.1784 161.394 29.1784C162.896 29.1784 164.225 29.5519 165.381 30.2989C166.537 31.046 167.452 32.0295 168.128 33.2494C168.808 34.4694 169.149 35.8049 169.149 37.256C169.149 37.3796 169.149 37.5032 169.149 37.6268C169.149 37.7451 169.14 37.8445 169.124 37.9251H155.252C155.333 39.1182 155.668 40.1985 156.257 41.1658C156.846 42.1332 157.599 42.8937 158.518 43.4473C159.441 44.0008 160.451 44.2776 161.548 44.2776C162.645 44.2776 163.679 43.9954 164.651 43.4311C165.624 42.8668 166.302 42.1413 166.685 41.2545L168.03 41.6173C167.722 42.3643 167.239 43.0307 166.58 43.6166C165.921 44.2024 165.151 44.6619 164.271 44.9951C163.39 45.3283 162.461 45.4949 161.483 45.4949ZM155.187 36.7481H167.69C167.609 35.5174 167.285 34.4291 166.718 33.4832C166.151 32.532 165.405 31.7849 164.481 31.2421C163.558 30.6939 162.539 30.4198 161.427 30.4198C160.308 30.4198 159.293 30.6939 158.38 31.2421C157.472 31.7849 156.732 32.532 156.16 33.4832C155.592 34.4291 155.268 35.5174 155.187 36.7481ZM177.483 45.4949C176.23 45.4949 175.066 45.2826 173.991 44.858C172.916 44.4335 171.973 43.7858 171.163 42.9152L171.86 41.8591C172.729 42.6868 173.61 43.2887 174.501 43.6649C175.398 44.0358 176.373 44.2212 177.426 44.2212C178.782 44.2212 179.881 43.939 180.724 43.3747C181.567 42.8104 181.988 42.0231 181.988 41.0127C181.988 40.3248 181.791 39.7954 181.397 39.4246C181.002 39.0484 180.435 38.7447 179.695 38.5136C178.955 38.2825 178.056 38.0353 176.997 37.7719C175.922 37.4925 175.014 37.2023 174.274 36.9013C173.534 36.595 172.981 36.2 172.613 35.7163C172.251 35.2326 172.07 34.5769 172.07 33.7492C172.07 32.7227 172.33 31.8709 172.848 31.1937C173.367 30.5166 174.066 30.0114 174.947 29.6782C175.827 29.345 176.805 29.1784 177.88 29.1784C179.117 29.1784 180.197 29.3799 181.121 29.783C182.045 30.1861 182.75 30.7208 183.236 31.3872L182.418 32.3546C181.91 31.7097 181.248 31.2314 180.432 30.9197C179.622 30.6079 178.731 30.4521 177.759 30.4521C177.029 30.4521 176.341 30.5542 175.692 30.7584C175.044 30.9573 174.52 31.2851 174.12 31.7419C173.726 32.1934 173.529 32.8007 173.529 33.5638C173.529 34.1711 173.675 34.6468 173.966 34.9907C174.263 35.3347 174.706 35.6141 175.295 35.8291C175.884 36.0387 176.613 36.2644 177.483 36.5063C178.72 36.8073 179.784 37.119 180.676 37.4414C181.572 37.7639 182.264 38.1831 182.75 38.699C183.236 39.2096 183.479 39.9297 183.479 40.8595C183.479 42.2945 182.931 43.4258 181.834 44.2534C180.743 45.0811 179.293 45.4949 177.483 45.4949ZM193.698 45.4949C192.585 45.4949 191.556 45.2826 190.611 44.858C189.671 44.4335 188.855 43.8423 188.164 43.0845C187.472 42.3267 186.935 41.4534 186.551 40.4645C186.168 39.4756 185.976 38.4384 185.976 37.3527C185.976 36.2403 186.168 35.1949 186.551 34.2168C186.935 33.2387 187.475 32.3734 188.172 31.621C188.874 30.8632 189.695 30.2667 190.635 29.8313C191.581 29.396 192.602 29.1784 193.698 29.1784C194.795 29.1784 195.808 29.396 196.737 29.8313C197.671 30.2667 198.492 30.8632 199.2 31.621C199.913 32.3734 200.461 33.2387 200.845 34.2168C201.234 35.1949 201.428 36.2403 201.428 37.3527C201.428 38.4384 201.234 39.4756 200.845 40.4645C200.461 41.4534 199.918 42.3267 199.216 43.0845C198.519 43.8423 197.698 44.4335 196.753 44.858C195.813 45.2826 194.795 45.4949 193.698 45.4949ZM187.491 37.4092C187.491 38.6399 187.77 39.7658 188.326 40.787C188.888 41.8027 189.633 42.6142 190.562 43.2215C191.497 43.8288 192.531 44.1325 193.666 44.1325C194.806 44.1325 195.845 43.8262 196.785 43.2135C197.731 42.5954 198.482 41.7678 199.038 40.7305C199.594 39.6879 199.873 38.5512 199.873 37.3205C199.873 36.0898 199.594 34.9612 199.038 33.9347C198.482 32.9028 197.731 32.0805 196.785 31.4678C195.845 30.8498 194.816 30.5408 193.698 30.5408C192.564 30.5408 191.529 30.8552 190.595 31.484C189.666 32.1074 188.915 32.935 188.342 33.9669C187.775 34.9934 187.491 36.1408 187.491 37.4092ZM204.924 38.5297V29.4525H206.447V38.3201C206.447 40.2764 206.776 41.7355 207.436 42.6975C208.095 43.6542 209.094 44.1325 210.434 44.1325C211.325 44.1325 212.181 43.9363 213.002 43.544C213.823 43.1463 214.547 42.59 215.174 41.8753C215.806 41.1605 216.273 40.3274 216.576 39.3762V29.4525H218.099V43.1893C218.099 43.4311 218.153 43.6139 218.261 43.7375C218.374 43.8557 218.531 43.9256 218.731 43.9471V45.1886C218.531 45.21 218.374 45.2208 218.261 45.2208C218.153 45.2208 218.058 45.21 217.977 45.1886C217.632 45.1456 217.345 45.0005 217.118 44.7532C216.897 44.5006 216.775 44.1916 216.754 43.8262L216.729 41.4641C216.038 42.7163 215.087 43.7025 213.877 44.4227C212.673 45.1375 211.371 45.4949 209.972 45.4949C208.308 45.4949 207.049 44.9091 206.196 43.7375C205.348 42.5659 204.924 40.83 204.924 38.5297H204.924ZM230.412 30.8149C228.997 30.8525 227.754 31.2717 226.685 32.0725C225.62 32.8679 224.878 33.9615 224.456 35.3535V45.1886H222.933V29.4525H224.392V33.322C224.937 32.2149 225.666 31.3147 226.579 30.6214C227.492 29.9227 228.456 29.5223 229.472 29.4202C229.672 29.3987 229.853 29.388 230.015 29.388C230.182 29.388 230.315 29.388 230.412 29.388V30.8149ZM239.414 45.4949C238.323 45.4949 237.3 45.2772 236.343 44.8419C235.393 44.4066 234.561 43.8127 233.848 43.0603C233.14 42.3025 232.589 41.4292 232.195 40.4403C231.8 39.4514 231.603 38.39 231.603 37.256C231.603 35.7458 231.935 34.3861 232.6 33.1769C233.27 31.9623 234.193 30.9922 235.371 30.2667C236.549 29.5411 237.888 29.1784 239.39 29.1784C240.827 29.1784 242.094 29.5062 243.19 30.1619C244.287 30.8175 245.108 31.7097 245.654 32.8383L244.163 33.322C243.698 32.4567 243.034 31.7769 242.169 31.2824C241.31 30.788 240.362 30.5408 239.325 30.5408C238.169 30.5408 237.124 30.8337 236.189 31.4195C235.26 32.0053 234.515 32.8087 233.953 33.8299C233.397 34.8456 233.118 35.9877 233.118 37.256C233.118 38.5082 233.402 39.661 233.969 40.7144C234.542 41.7624 235.298 42.5954 236.238 43.2135C237.183 43.8262 238.223 44.1325 239.358 44.1325C240.087 44.1325 240.8 43.9954 241.497 43.7213C242.199 43.4473 242.81 43.0899 243.328 42.6492C243.847 42.2031 244.187 41.7275 244.349 41.2223L245.84 41.6495C245.575 42.3966 245.116 43.0576 244.462 43.6327C243.814 44.2077 243.058 44.6619 242.194 44.9951C241.335 45.3283 240.408 45.4949 239.414 45.4949ZM255.84 45.4949C254.727 45.4949 253.693 45.2772 252.737 44.8419C251.786 44.4066 250.96 43.8127 250.257 43.0603C249.56 42.3025 249.015 41.4238 248.621 40.4242C248.226 39.4246 248.029 38.3685 248.029 37.256C248.029 35.7673 248.361 34.4184 249.026 33.2091C249.695 31.9945 250.619 31.0191 251.797 30.2828C252.974 29.5465 254.293 29.1784 255.751 29.1784C257.253 29.1784 258.582 29.5519 259.738 30.2989C260.894 31.046 261.809 32.0295 262.485 33.2494C263.165 34.4694 263.505 35.8049 263.505 37.256C263.505 37.3796 263.505 37.5032 263.505 37.6268C263.505 37.7451 263.497 37.8445 263.481 37.9251H249.609C249.69 39.1182 250.025 40.1985 250.614 41.1658C251.203 42.1332 251.956 42.8937 252.874 43.4473C253.798 44.0008 254.808 44.2776 255.905 44.2776C257.002 44.2776 258.036 43.9954 259.008 43.4311C259.981 42.8668 260.659 42.1413 261.042 41.2545L262.387 41.6173C262.079 42.3643 261.596 43.0307 260.937 43.6166C260.278 44.2024 259.508 44.6619 258.628 44.9951C257.747 45.3283 256.818 45.4949 255.84 45.4949H255.84ZM249.544 36.7481H262.047C261.966 35.5174 261.642 34.4291 261.075 33.4832C260.507 32.532 259.762 31.7849 258.838 31.2421C257.914 30.6939 256.896 30.4198 255.783 30.4198C254.665 30.4198 253.65 30.6939 252.737 31.2421C251.829 31.7849 251.089 32.532 250.517 33.4832C249.949 34.4291 249.625 35.5174 249.544 36.7481ZM271.84 45.4949C270.587 45.4949 269.423 45.2826 268.348 44.858C267.273 44.4335 266.33 43.7858 265.52 42.9152L266.217 41.8591C267.086 42.6868 267.967 43.2887 268.858 43.6649C269.755 44.0358 270.73 44.2212 271.783 44.2212C273.139 44.2212 274.238 43.939 275.081 43.3747C275.924 42.8104 276.345 42.0231 276.345 41.0127C276.345 40.3248 276.148 39.7954 275.754 39.4246C275.359 39.0484 274.792 38.7447 274.052 38.5136C273.312 38.2825 272.413 38.0353 271.354 37.7719C270.279 37.4925 269.371 37.2023 268.631 36.9013C267.891 36.595 267.337 36.2 266.97 35.7163C266.608 35.2326 266.427 34.5769 266.427 33.7492C266.427 32.7227 266.687 31.8709 267.205 31.1937C267.724 30.5166 268.423 30.0114 269.304 29.6782C270.184 29.345 271.162 29.1784 272.237 29.1784C273.474 29.1784 274.554 29.3799 275.478 29.783C276.402 30.1861 277.107 30.7208 277.593 31.3872L276.775 32.3546C276.267 31.7097 275.605 31.2314 274.789 30.9197C273.979 30.6079 273.088 30.4521 272.115 30.4521C271.386 30.4521 270.697 30.5542 270.049 30.7584C269.401 30.9573 268.877 31.2851 268.477 31.7419C268.083 32.1934 267.886 32.8007 267.886 33.5638C267.886 34.1711 268.032 34.6468 268.323 34.9907C268.62 35.3347 269.063 35.6141 269.652 35.8291C270.241 36.0387 270.97 36.2644 271.84 36.5063C273.077 36.8073 274.141 37.119 275.032 37.4414C275.929 37.7639 276.621 38.1831 277.107 38.699C277.593 39.2096 277.836 39.9297 277.836 40.8595C277.836 42.2945 277.288 43.4258 276.191 44.2534C275.1 45.0811 273.65 45.4949 271.84 45.4949Z"
fill="white"
/>
</g>
<defs>
<linearGradient
id="paint0_linear"
x1="7.5972"
y1="13.3458"
x2="68.3447"
y2="28.9704"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#A2FAA3" />
<stop offset="1" stop-color="#3AAFB9" />
</linearGradient>
<clipPath id="clip0">
<rect
width="294"
height="78"
fill="white"
transform="translate(0 -5)"
/>
</clipPath>
</defs>
</svg>
</li>
<li class="nav_list__li nav_list__li--first">
Resources
</li>
<li class="nav_list__li">
tipsNtricks
</li>
<li class="nav_list__li nav_list__li--last">
Contact
</li>
<li class="nav_list__li nav_list__li--search">
<i class="fas fa-search"></i>
</li>
</ul>
</nav>
svg not showing up/ weird scaling
Heads up I'm a beginner on coding.
I have been trying to make a portfolio type of website to practice my coding with HTML and CSS, I wanted to use 2 SVGs at the bottom of the page but I ran into some problem. Whenever I use position: relative; on both of the SVG, they would not appear on the page, but whenever I reload my page SVG can be seen for a slight second before going away.
The only way I managed to make it work is through making them position: absolute;, however it will create a problem when window is re-scaled.
This is what I want the website to look like.
#ig {
position: absolute;
margin-top: 37%;
margin-left: 40%;
}
.ig {
position: relative;
margin-right: 17%;
font-size: 120%;
font-family: "Lobster", sans-serif;
}
.twitter {
position: absolute;
padding: 0;
margin-top: 37%;
margin-left: 59%;
}
.handle {
position: relative;
bottom: 9%;
left: 10%;
font-size: 120%;
font-family: "Lobster", sans-serif;
}
<svg
id="ig"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
width="32"
height="32"
viewBox="0 0 32 32"
>
<title>instagram1</title>
<path
d="M16 2.881c4.275 0 4.781 0.019 6.462 0.094 1.563 0.069 2.406 0.331 2.969 0.55 0.744 0.288 1.281 0.638 1.837 1.194 0.563 0.563 0.906 1.094 1.2 1.838 0.219 0.563 0.481 1.412 0.55 2.969 0.075 1.688 0.094 2.194 0.094 6.463s-0.019 4.781-0.094 6.463c-0.069 1.563-0.331 2.406-0.55 2.969-0.288 0.744-0.637 1.281-1.194 1.837-0.563 0.563-1.094 0.906-1.837 1.2-0.563 0.219-1.413 0.481-2.969 0.55-1.688 0.075-2.194 0.094-6.463 0.094s-4.781-0.019-6.463-0.094c-1.563-0.069-2.406-0.331-2.969-0.55-0.744-0.288-1.281-0.637-1.838-1.194-0.563-0.563-0.906-1.094-1.2-1.837-0.219-0.563-0.481-1.413-0.55-2.969-0.075-1.688-0.094-2.194-0.094-6.463s0.019-4.781 0.094-6.463c0.069-1.563 0.331-2.406 0.55-2.969 0.288-0.744 0.638-1.281 1.194-1.838 0.563-0.563 1.094-0.906 1.838-1.2 0.563-0.219 1.412-0.481 2.969-0.55 1.681-0.075 2.188-0.094 6.463-0.094zM16 0c-4.344 0-4.887 0.019-6.594 0.094-1.7 0.075-2.869 0.35-3.881 0.744-1.056 0.412-1.95 0.956-2.837 1.85-0.894 0.888-1.438 1.781-1.85 2.831-0.394 1.019-0.669 2.181-0.744 3.881-0.075 1.713-0.094 2.256-0.094 6.6s0.019 4.887 0.094 6.594c0.075 1.7 0.35 2.869 0.744 3.881 0.413 1.056 0.956 1.95 1.85 2.837 0.887 0.887 1.781 1.438 2.831 1.844 1.019 0.394 2.181 0.669 3.881 0.744 1.706 0.075 2.25 0.094 6.594 0.094s4.888-0.019 6.594-0.094c1.7-0.075 2.869-0.35 3.881-0.744 1.050-0.406 1.944-0.956 2.831-1.844s1.438-1.781 1.844-2.831c0.394-1.019 0.669-2.181 0.744-3.881 0.075-1.706 0.094-2.25 0.094-6.594s-0.019-4.887-0.094-6.594c-0.075-1.7-0.35-2.869-0.744-3.881-0.394-1.063-0.938-1.956-1.831-2.844-0.887-0.887-1.781-1.438-2.831-1.844-1.019-0.394-2.181-0.669-3.881-0.744-1.712-0.081-2.256-0.1-6.6-0.1v0z"
></path>
<path
d="M16 7.781c-4.537 0-8.219 3.681-8.219 8.219s3.681 8.219 8.219 8.219 8.219-3.681 8.219-8.219c0-4.537-3.681-8.219-8.219-8.219zM16 21.331c-2.944 0-5.331-2.387-5.331-5.331s2.387-5.331 5.331-5.331c2.944 0 5.331 2.387 5.331 5.331s-2.387 5.331-5.331 5.331z"
></path>
<path
d="M26.462 7.456c0 1.060-0.859 1.919-1.919 1.919s-1.919-0.859-1.919-1.919c0-1.060 0.859-1.919 1.919-1.919s1.919 0.859 1.919 1.919z"
></path>
</svg>
<p class="ig">annoying_fly</p>
<svg
class="twitter"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<title>twitter</title>
<path
d="M20.833 5.262c-0.186 0.242-0.391 0.475-0.616 0.696-0.233 0.232-0.347 0.567-0.278 0.908 0.037 0.182 0.060 0.404 0.061 0.634 0 5.256-2.429 8.971-5.81 10.898-2.647 1.509-5.938 1.955-9.222 1.12 1.245-0.361 2.46-0.921 3.593-1.69 0.147-0.099 0.273-0.243 0.352-0.421 0.224-0.505-0.003-1.096-0.508-1.32-2.774-1.233-4.13-2.931-4.769-4.593-0.417-1.084-0.546-2.198-0.52-3.227 0.021-0.811 0.138-1.56 0.278-2.182 0.394 0.343 0.803 0.706 1.235 1.038 2.051 1.577 4.624 2.479 7.395 2.407 0.543-0.015 0.976-0.457 0.976-1v-1.011c-0.002-0.179 0.009-0.357 0.034-0.533 0.113-0.806 0.504-1.569 1.162-2.141 0.725-0.631 1.636-0.908 2.526-0.846s1.753 0.463 2.384 1.188c0.252 0.286 0.649 0.416 1.033 0.304 0.231-0.067 0.463-0.143 0.695-0.228zM22.424 2.183c-0.74 0.522-1.523 0.926-2.287 1.205-0.931-0.836-2.091-1.302-3.276-1.385-1.398-0.097-2.836 0.339-3.977 1.332-1.036 0.901-1.652 2.108-1.83 3.372-0.037 0.265-0.055 0.532-0.054 0.8-1.922-0.142-3.693-0.85-5.15-1.97-0.775-0.596-1.462-1.309-2.034-2.116-0.32-0.45-0.944-0.557-1.394-0.237-0.154 0.109-0.267 0.253-0.335 0.409 0 0-0.132 0.299-0.285 0.76-0.112 0.337-0.241 0.775-0.357 1.29-0.163 0.722-0.302 1.602-0.326 2.571-0.031 1.227 0.12 2.612 0.652 3.996 0.683 1.775 1.966 3.478 4.147 4.823-1.569 0.726-3.245 1.039-4.873 0.967-0.552-0.024-1.019 0.403-1.043 0.955-0.017 0.389 0.19 0.736 0.513 0.918 4.905 2.725 10.426 2.678 14.666 0.261 4.040-2.301 6.819-6.7 6.819-12.634-0.001-0.167-0.008-0.33-0.023-0.489 1.006-1.115 1.676-2.429 1.996-3.781 0.127-0.537-0.206-1.076-0.743-1.203-0.29-0.069-0.58-0.003-0.807 0.156z"
></path>
</svg>
<p class="handle">#kintay8</p>
use bootstrap or use it like this it will solve your issue
.container{
display :flex
}
.instagram, .twitter{
width: 50%;
text-align: center;
}
p.ig, p.handle{
font-size: 120%;
font-family: "Lobster", sans-serif;
}
<div class="container">
<div class="instagram">
<svg id="ig" version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<title>instagram1</title>
<path d="M16 2.881c4.275 0 4.781 0.019 6.462 0.094 1.563 0.069 2.406 0.331 2.969 0.55 0.744 0.288 1.281 0.638 1.837 1.194 0.563 0.563 0.906 1.094 1.2 1.838 0.219 0.563 0.481 1.412 0.55 2.969 0.075 1.688 0.094 2.194 0.094 6.463s-0.019 4.781-0.094 6.463c-0.069 1.563-0.331 2.406-0.55 2.969-0.288 0.744-0.637 1.281-1.194 1.837-0.563 0.563-1.094 0.906-1.837 1.2-0.563 0.219-1.413 0.481-2.969 0.55-1.688 0.075-2.194 0.094-6.463 0.094s-4.781-0.019-6.463-0.094c-1.563-0.069-2.406-0.331-2.969-0.55-0.744-0.288-1.281-0.637-1.838-1.194-0.563-0.563-0.906-1.094-1.2-1.837-0.219-0.563-0.481-1.413-0.55-2.969-0.075-1.688-0.094-2.194-0.094-6.463s0.019-4.781 0.094-6.463c0.069-1.563 0.331-2.406 0.55-2.969 0.288-0.744 0.638-1.281 1.194-1.838 0.563-0.563 1.094-0.906 1.838-1.2 0.563-0.219 1.412-0.481 2.969-0.55 1.681-0.075 2.188-0.094 6.463-0.094zM16 0c-4.344 0-4.887 0.019-6.594 0.094-1.7 0.075-2.869 0.35-3.881 0.744-1.056 0.412-1.95 0.956-2.837 1.85-0.894 0.888-1.438 1.781-1.85 2.831-0.394 1.019-0.669 2.181-0.744 3.881-0.075 1.713-0.094 2.256-0.094 6.6s0.019 4.887 0.094 6.594c0.075 1.7 0.35 2.869 0.744 3.881 0.413 1.056 0.956 1.95 1.85 2.837 0.887 0.887 1.781 1.438 2.831 1.844 1.019 0.394 2.181 0.669 3.881 0.744 1.706 0.075 2.25 0.094 6.594 0.094s4.888-0.019 6.594-0.094c1.7-0.075 2.869-0.35 3.881-0.744 1.050-0.406 1.944-0.956 2.831-1.844s1.438-1.781 1.844-2.831c0.394-1.019 0.669-2.181 0.744-3.881 0.075-1.706 0.094-2.25 0.094-6.594s-0.019-4.887-0.094-6.594c-0.075-1.7-0.35-2.869-0.744-3.881-0.394-1.063-0.938-1.956-1.831-2.844-0.887-0.887-1.781-1.438-2.831-1.844-1.019-0.394-2.181-0.669-3.881-0.744-1.712-0.081-2.256-0.1-6.6-0.1v0z"></path>
<path d="M16 7.781c-4.537 0-8.219 3.681-8.219 8.219s3.681 8.219 8.219 8.219 8.219-3.681 8.219-8.219c0-4.537-3.681-8.219-8.219-8.219zM16 21.331c-2.944 0-5.331-2.387-5.331-5.331s2.387-5.331 5.331-5.331c2.944 0 5.331 2.387 5.331 5.331s-2.387 5.331-5.331 5.331z"></path>
<path d="M26.462 7.456c0 1.060-0.859 1.919-1.919 1.919s-1.919-0.859-1.919-1.919c0-1.060 0.859-1.919 1.919-1.919s1.919 0.859 1.919 1.919z"></path>
</svg>
<p class="ig">annoying_fly</p>
</div>
<div class="twitter">
<svg class="twitter" version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<title>twitter</title>
<path d="M20.833 5.262c-0.186 0.242-0.391 0.475-0.616 0.696-0.233 0.232-0.347 0.567-0.278 0.908 0.037 0.182 0.060 0.404 0.061 0.634 0 5.256-2.429 8.971-5.81 10.898-2.647 1.509-5.938 1.955-9.222 1.12 1.245-0.361 2.46-0.921 3.593-1.69 0.147-0.099 0.273-0.243 0.352-0.421 0.224-0.505-0.003-1.096-0.508-1.32-2.774-1.233-4.13-2.931-4.769-4.593-0.417-1.084-0.546-2.198-0.52-3.227 0.021-0.811 0.138-1.56 0.278-2.182 0.394 0.343 0.803 0.706 1.235 1.038 2.051 1.577 4.624 2.479 7.395 2.407 0.543-0.015 0.976-0.457 0.976-1v-1.011c-0.002-0.179 0.009-0.357 0.034-0.533 0.113-0.806 0.504-1.569 1.162-2.141 0.725-0.631 1.636-0.908 2.526-0.846s1.753 0.463 2.384 1.188c0.252 0.286 0.649 0.416 1.033 0.304 0.231-0.067 0.463-0.143 0.695-0.228zM22.424 2.183c-0.74 0.522-1.523 0.926-2.287 1.205-0.931-0.836-2.091-1.302-3.276-1.385-1.398-0.097-2.836 0.339-3.977 1.332-1.036 0.901-1.652 2.108-1.83 3.372-0.037 0.265-0.055 0.532-0.054 0.8-1.922-0.142-3.693-0.85-5.15-1.97-0.775-0.596-1.462-1.309-2.034-2.116-0.32-0.45-0.944-0.557-1.394-0.237-0.154 0.109-0.267 0.253-0.335 0.409 0 0-0.132 0.299-0.285 0.76-0.112 0.337-0.241 0.775-0.357 1.29-0.163 0.722-0.302 1.602-0.326 2.571-0.031 1.227 0.12 2.612 0.652 3.996 0.683 1.775 1.966 3.478 4.147 4.823-1.569 0.726-3.245 1.039-4.873 0.967-0.552-0.024-1.019 0.403-1.043 0.955-0.017 0.389 0.19 0.736 0.513 0.918 4.905 2.725 10.426 2.678 14.666 0.261 4.040-2.301 6.819-6.7 6.819-12.634-0.001-0.167-0.008-0.33-0.023-0.489 1.006-1.115 1.676-2.429 1.996-3.781 0.127-0.537-0.206-1.076-0.743-1.203-0.29-0.069-0.58-0.003-0.807 0.156z"></path>
</svg>
<p class="handle">#kintay8</p>
</div>
</div>
First of all, I can see your svgs but their positioning is not correct. You have 2 options. One option is to position them absolute as you have already done and they will be responsive if you use vw for margin top and margin left (in my opinion you should you top and left or bottom and right instead of margin as you position them absolute) or you put them in a flex container in order to be in the same row
Check this. hope it helps.
You don't have to add absolute. A simple HTML structure could solve your problem.
.social-networks{display:inline-block; width:250px; text-align:center}
#ig {
margin:0 auto
}
.ig {
position: relative;
margin-right: 0;
font-size: 120%;
font-family: "Lobster", sans-serif;
}
.twitter {
margin:0 auto
}
.handle {
position: relative;
font-size: 120%;
font-family: "Lobster", sans-serif;
}
<div class="social-networks">
<svg id="ig" version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<title>instagram1</title>
<path d="M16 2.881c4.275 0 4.781 0.019 6.462 0.094 1.563 0.069 2.406 0.331 2.969 0.55 0.744 0.288 1.281 0.638 1.837 1.194 0.563 0.563 0.906 1.094 1.2 1.838 0.219 0.563 0.481 1.412 0.55 2.969 0.075 1.688 0.094 2.194 0.094 6.463s-0.019 4.781-0.094 6.463c-0.069 1.563-0.331 2.406-0.55 2.969-0.288 0.744-0.637 1.281-1.194 1.837-0.563 0.563-1.094 0.906-1.837 1.2-0.563 0.219-1.413 0.481-2.969 0.55-1.688 0.075-2.194 0.094-6.463 0.094s-4.781-0.019-6.463-0.094c-1.563-0.069-2.406-0.331-2.969-0.55-0.744-0.288-1.281-0.637-1.838-1.194-0.563-0.563-0.906-1.094-1.2-1.837-0.219-0.563-0.481-1.413-0.55-2.969-0.075-1.688-0.094-2.194-0.094-6.463s0.019-4.781 0.094-6.463c0.069-1.563 0.331-2.406 0.55-2.969 0.288-0.744 0.638-1.281 1.194-1.838 0.563-0.563 1.094-0.906 1.838-1.2 0.563-0.219 1.412-0.481 2.969-0.55 1.681-0.075 2.188-0.094 6.463-0.094zM16 0c-4.344 0-4.887 0.019-6.594 0.094-1.7 0.075-2.869 0.35-3.881 0.744-1.056 0.412-1.95 0.956-2.837 1.85-0.894 0.888-1.438 1.781-1.85 2.831-0.394 1.019-0.669 2.181-0.744 3.881-0.075 1.713-0.094 2.256-0.094 6.6s0.019 4.887 0.094 6.594c0.075 1.7 0.35 2.869 0.744 3.881 0.413 1.056 0.956 1.95 1.85 2.837 0.887 0.887 1.781 1.438 2.831 1.844 1.019 0.394 2.181 0.669 3.881 0.744 1.706 0.075 2.25 0.094 6.594 0.094s4.888-0.019 6.594-0.094c1.7-0.075 2.869-0.35 3.881-0.744 1.050-0.406 1.944-0.956 2.831-1.844s1.438-1.781 1.844-2.831c0.394-1.019 0.669-2.181 0.744-3.881 0.075-1.706 0.094-2.25 0.094-6.594s-0.019-4.887-0.094-6.594c-0.075-1.7-0.35-2.869-0.744-3.881-0.394-1.063-0.938-1.956-1.831-2.844-0.887-0.887-1.781-1.438-2.831-1.844-1.019-0.394-2.181-0.669-3.881-0.744-1.712-0.081-2.256-0.1-6.6-0.1v0z"></path>
<path d="M16 7.781c-4.537 0-8.219 3.681-8.219 8.219s3.681 8.219 8.219 8.219 8.219-3.681 8.219-8.219c0-4.537-3.681-8.219-8.219-8.219zM16 21.331c-2.944 0-5.331-2.387-5.331-5.331s2.387-5.331 5.331-5.331c2.944 0 5.331 2.387 5.331 5.331s-2.387 5.331-5.331 5.331z"></path>
<path d="M26.462 7.456c0 1.060-0.859 1.919-1.919 1.919s-1.919-0.859-1.919-1.919c0-1.060 0.859-1.919 1.919-1.919s1.919 0.859 1.919 1.919z"></path>
</svg>
<p class="ig">annoying_fly</p>
</div>
<div class="social-networks">
<svg class="twitter" version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<title>twitter</title>
<path d="M20.833 5.262c-0.186 0.242-0.391 0.475-0.616 0.696-0.233 0.232-0.347 0.567-0.278 0.908 0.037 0.182 0.060 0.404 0.061 0.634 0 5.256-2.429 8.971-5.81 10.898-2.647 1.509-5.938 1.955-9.222 1.12 1.245-0.361 2.46-0.921 3.593-1.69 0.147-0.099 0.273-0.243 0.352-0.421 0.224-0.505-0.003-1.096-0.508-1.32-2.774-1.233-4.13-2.931-4.769-4.593-0.417-1.084-0.546-2.198-0.52-3.227 0.021-0.811 0.138-1.56 0.278-2.182 0.394 0.343 0.803 0.706 1.235 1.038 2.051 1.577 4.624 2.479 7.395 2.407 0.543-0.015 0.976-0.457 0.976-1v-1.011c-0.002-0.179 0.009-0.357 0.034-0.533 0.113-0.806 0.504-1.569 1.162-2.141 0.725-0.631 1.636-0.908 2.526-0.846s1.753 0.463 2.384 1.188c0.252 0.286 0.649 0.416 1.033 0.304 0.231-0.067 0.463-0.143 0.695-0.228zM22.424 2.183c-0.74 0.522-1.523 0.926-2.287 1.205-0.931-0.836-2.091-1.302-3.276-1.385-1.398-0.097-2.836 0.339-3.977 1.332-1.036 0.901-1.652 2.108-1.83 3.372-0.037 0.265-0.055 0.532-0.054 0.8-1.922-0.142-3.693-0.85-5.15-1.97-0.775-0.596-1.462-1.309-2.034-2.116-0.32-0.45-0.944-0.557-1.394-0.237-0.154 0.109-0.267 0.253-0.335 0.409 0 0-0.132 0.299-0.285 0.76-0.112 0.337-0.241 0.775-0.357 1.29-0.163 0.722-0.302 1.602-0.326 2.571-0.031 1.227 0.12 2.612 0.652 3.996 0.683 1.775 1.966 3.478 4.147 4.823-1.569 0.726-3.245 1.039-4.873 0.967-0.552-0.024-1.019 0.403-1.043 0.955-0.017 0.389 0.19 0.736 0.513 0.918 4.905 2.725 10.426 2.678 14.666 0.261 4.040-2.301 6.819-6.7 6.819-12.634-0.001-0.167-0.008-0.33-0.023-0.489 1.006-1.115 1.676-2.429 1.996-3.781 0.127-0.537-0.206-1.076-0.743-1.203-0.29-0.069-0.58-0.003-0.807 0.156z"></path>
</svg>
<p class="handle">#kintay8</p>
</div>
Check this Out:
HTML:
<div id="about-me">
<h1>About Me</h1>
<p> bla bla bla bla bla bla bla bla bla bla bla bla</p>
<p> bla bla bla bla bla bla bla bla bla bla bla bla</p>
<h1>Things I Offer</h1>
<p> bla bla bla bla bla bla bla bla bla bla bla bla</p>
<p> bla bla bla bla bla bla bla bla bla bla bla bla</p>
<div id="socials-container">
<div id="instagram">
<svg id="ig" version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<title>instagram1</title>
<path d="M16 2.881c4.275 0 4.781 0.019 6.462 0.094 1.563 0.069 2.406 0.331 2.969 0.55 0.744 0.288 1.281 0.638 1.837 1.194 0.563 0.563 0.906 1.094 1.2 1.838 0.219 0.563 0.481 1.412 0.55 2.969 0.075 1.688 0.094 2.194 0.094 6.463s-0.019 4.781-0.094 6.463c-0.069 1.563-0.331 2.406-0.55 2.969-0.288 0.744-0.637 1.281-1.194 1.837-0.563 0.563-1.094 0.906-1.837 1.2-0.563 0.219-1.413 0.481-2.969 0.55-1.688 0.075-2.194 0.094-6.463 0.094s-4.781-0.019-6.463-0.094c-1.563-0.069-2.406-0.331-2.969-0.55-0.744-0.288-1.281-0.637-1.838-1.194-0.563-0.563-0.906-1.094-1.2-1.837-0.219-0.563-0.481-1.413-0.55-2.969-0.075-1.688-0.094-2.194-0.094-6.463s0.019-4.781 0.094-6.463c0.069-1.563 0.331-2.406 0.55-2.969 0.288-0.744 0.638-1.281 1.194-1.838 0.563-0.563 1.094-0.906 1.838-1.2 0.563-0.219 1.412-0.481 2.969-0.55 1.681-0.075 2.188-0.094 6.463-0.094zM16 0c-4.344 0-4.887 0.019-6.594 0.094-1.7 0.075-2.869 0.35-3.881 0.744-1.056 0.412-1.95 0.956-2.837 1.85-0.894 0.888-1.438 1.781-1.85 2.831-0.394 1.019-0.669 2.181-0.744 3.881-0.075 1.713-0.094 2.256-0.094 6.6s0.019 4.887 0.094 6.594c0.075 1.7 0.35 2.869 0.744 3.881 0.413 1.056 0.956 1.95 1.85 2.837 0.887 0.887 1.781 1.438 2.831 1.844 1.019 0.394 2.181 0.669 3.881 0.744 1.706 0.075 2.25 0.094 6.594 0.094s4.888-0.019 6.594-0.094c1.7-0.075 2.869-0.35 3.881-0.744 1.050-0.406 1.944-0.956 2.831-1.844s1.438-1.781 1.844-2.831c0.394-1.019 0.669-2.181 0.744-3.881 0.075-1.706 0.094-2.25 0.094-6.594s-0.019-4.887-0.094-6.594c-0.075-1.7-0.35-2.869-0.744-3.881-0.394-1.063-0.938-1.956-1.831-2.844-0.887-0.887-1.781-1.438-2.831-1.844-1.019-0.394-2.181-0.669-3.881-0.744-1.712-0.081-2.256-0.1-6.6-0.1v0z"></path>
<path d="M16 7.781c-4.537 0-8.219 3.681-8.219 8.219s3.681 8.219 8.219 8.219 8.219-3.681 8.219-8.219c0-4.537-3.681-8.219-8.219-8.219zM16 21.331c-2.944 0-5.331-2.387-5.331-5.331s2.387-5.331 5.331-5.331c2.944 0 5.331 2.387 5.331 5.331s-2.387 5.331-5.331 5.331z"></path>
<path d="M26.462 7.456c0 1.060-0.859 1.919-1.919 1.919s-1.919-0.859-1.919-1.919c0-1.060 0.859-1.919 1.919-1.919s1.919 0.859 1.919 1.919z"></path>
</svg>
<p class="ig">annoying_fly</p>
</div>
<div id="twitter-box">
<svg id="twitter" version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<title>twitter</title>
<path d="M20.833 5.262c-0.186 0.242-0.391 0.475-0.616 0.696-0.233 0.232-0.347 0.567-0.278 0.908 0.037 0.182 0.060 0.404 0.061 0.634 0 5.256-2.429 8.971-5.81 10.898-2.647 1.509-5.938 1.955-9.222 1.12 1.245-0.361 2.46-0.921 3.593-1.69 0.147-0.099 0.273-0.243 0.352-0.421 0.224-0.505-0.003-1.096-0.508-1.32-2.774-1.233-4.13-2.931-4.769-4.593-0.417-1.084-0.546-2.198-0.52-3.227 0.021-0.811 0.138-1.56 0.278-2.182 0.394 0.343 0.803 0.706 1.235 1.038 2.051 1.577 4.624 2.479 7.395 2.407 0.543-0.015 0.976-0.457 0.976-1v-1.011c-0.002-0.179 0.009-0.357 0.034-0.533 0.113-0.806 0.504-1.569 1.162-2.141 0.725-0.631 1.636-0.908 2.526-0.846s1.753 0.463 2.384 1.188c0.252 0.286 0.649 0.416 1.033 0.304 0.231-0.067 0.463-0.143 0.695-0.228zM22.424 2.183c-0.74 0.522-1.523 0.926-2.287 1.205-0.931-0.836-2.091-1.302-3.276-1.385-1.398-0.097-2.836 0.339-3.977 1.332-1.036 0.901-1.652 2.108-1.83 3.372-0.037 0.265-0.055 0.532-0.054 0.8-1.922-0.142-3.693-0.85-5.15-1.97-0.775-0.596-1.462-1.309-2.034-2.116-0.32-0.45-0.944-0.557-1.394-0.237-0.154 0.109-0.267 0.253-0.335 0.409 0 0-0.132 0.299-0.285 0.76-0.112 0.337-0.241 0.775-0.357 1.29-0.163 0.722-0.302 1.602-0.326 2.571-0.031 1.227 0.12 2.612 0.652 3.996 0.683 1.775 1.966 3.478 4.147 4.823-1.569 0.726-3.245 1.039-4.873 0.967-0.552-0.024-1.019 0.403-1.043 0.955-0.017 0.389 0.19 0.736 0.513 0.918 4.905 2.725 10.426 2.678 14.666 0.261 4.040-2.301 6.819-6.7 6.819-12.634-0.001-0.167-0.008-0.33-0.023-0.489 1.006-1.115 1.676-2.429 1.996-3.781 0.127-0.537-0.206-1.076-0.743-1.203-0.29-0.069-0.58-0.003-0.807 0.156z"></path>
</svg>
<p class="handle">#kintay8</p>
</div>
</div>
</div>
CSS:
#about-me {
background-color: #ccc;
display: flex;
flex-direction: column;
text-align: center;
items-align: center;
width: 80vw;
margin-left: 10vw;
}
#socials-container {
display: flex;
flex-direction: row;
justify-content: space-around;
width: 50vw;
margin: 0 auto;
}
#instagram {
display: flex;
flex-direction: column;
align-items: center;
width: 100px;
}
#twitter-box {
display: flex;
flex-direction: column;
align-items: center;
width: 100px;
}
.ig, .handle {
font-family: "Lobster", sans-serif;
}
SVG logo doesn't look good in Bootstrap navbar
Designer has sent me a new logo as a SVG.
I want to use it inline in my HTML but I could not get it to display without setting min-width.
However now I am using min-width to get logo to desired size, the bottom of the logo is lower than the bottom of the navbar.
How do I get the SVG to use more space above the logo, and less space under, so that the logo is neatly positioned within the navbar and looks good?
Code
.navbar-brand {
min-width: 250px;
}
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Creator: CorelDRAW X6 -->
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" viewBox="0 0 7090 1628" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<style type="text/css">
<![CDATA[
.fil1 {fill:#FEFEFE}
.fil3 {fill:#FEFEFE;fill-rule:nonzero}
.fil2 {fill:#033C73;fill-rule:nonzero}
.fil0 {fill:url(#id0)}
]]>
</style>
<linearGradient id="id0" gradientUnits="userSpaceOnUse" x1="800.768" y1="1267.59" x2="932.867" y2="1645.01">
<stop offset="0" style="stop-color:#C5C6C6"/>
<stop offset="0.639216" style="stop-color:#FDFDFD"/>
<stop offset="1" style="stop-color:#FEFEFE"/>
</linearGradient>
</defs>
<g id="Layer_x0020_1">
<metadata id="CorelCorpID_0Corel-Layer"/>
<polygon class="fil0" points="1098,1285 1098,1628 636,1325 "/>
<path class="fil1" d="M1184 96c274,194 275,949 37,1156 -189,164 -846,166 -1038,8 -246,-203 -245,-950 10,-1150 181,-142 805,-146 991,-14z"/>
<path class="fil2" d="M1132 694c2,1 4,3 5,5 57,56 91,134 91,219l0 97 -177 0 0 -97c0,-37 -15,-70 -39,-94 -24,-24 -57,-39 -93,-39l0 -1 -131 0 0 142 0 88 -89 0 -222 0 0 1c-85,0 -163,-35 -219,-92 -57,-56 -92,-134 -92,-219l0 -314 178 0 0 314c0,36 15,69 39,94 24,24 58,39 94,39l0 0 134 0 0 -447 177 0 0 213 131 0 0 -1c36,0 69,-15 93,-39 24,-24 39,-57 39,-94l0 -79 177 0 0 79c0,85 -34,163 -91,219 -1,2 -3,4 -5,6z"/>
<path class="fil3" d="M1990 870c-90,0 -152,-67 -152,-158 0,-92 62,-159 152,-159 72,0 121,43 136,112l140 0c-17,-142 -125,-239 -275,-239 -166,0 -291,120 -291,286 0,165 125,285 291,285 150,0 258,-97 275,-239l-140 0c-15,69 -64,112 -136,112zm843 -433l-136 0 0 220 -224 0 0 -220 -136 0 0 549 136 0 0 -206 224 0 0 206 136 0 0 -549zm459 455l37 94 145 0 -233 -552 -130 0 -233 552 145 0 37 -94 232 0zm-45 -117l-142 0 71 -182 71 182zm640 -216l0 -122 -486 0 0 122 175 0 0 427 137 0 0 -427 174 0zm483 268l118 159 164 0 -141 -186c66,-33 105,-93 105,-170 0,-119 -91,-193 -227,-193l-240 0 0 549 136 0 0 -159 85 0zm-85 -123l0 -147 101 0c53,0 95,29 95,73 0,45 -42,74 -95,74l-101 0zm668 -278c-165,0 -291,126 -291,286 0,159 126,285 291,285 166,0 291,-126 291,-285 0,-160 -125,-286 -291,-286zm0 445c-89,0 -153,-73 -153,-159 0,-87 64,-159 153,-159 89,0 152,72 152,159 0,86 -63,159 -152,159zm639 -445c-165,0 -290,126 -290,286 0,159 125,285 290,285 167,0 292,-126 292,-285 0,-160 -125,-286 -292,-286zm0 445c-88,0 -152,-73 -152,-159 0,-87 64,-159 152,-159 89,0 153,72 153,159 0,86 -64,159 -153,159zm955 -434l-102 0 -194 293 -196 -293 -101 0 0 549 137 0 -1 -277 123 190 0 1 75 0 0 -1 122 -188 0 275 137 0 0 -549zm307 -12c-129,0 -218,69 -218,179 0,87 51,138 159,162l91 20c47,9 58,28 58,47 0,29 -27,48 -78,48 -64,0 -106,-29 -115,-77l-136 0c13,135 124,193 247,193 138,0 228,-68 228,-178 0,-95 -65,-135 -165,-157l-77 -17c-41,-9 -63,-22 -63,-52 0,-36 31,-55 78,-55 56,0 82,28 89,69l137 0c-14,-147 -146,-182 -235,-182z"/>
</g>
</svg>
</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
</ul>
</div>
</div>
</nav>
.navbar-brand {
width: 35vw;
}
use VW ( viewport width) it is used to resize the image based on window size
Do not use the svg code. I hope the designer has provided you a file with the extension .svg. Use that file as source of image.
<img class="logo" src="your-path/logo.svg" />
Then add you desired width using css.
.logo { width: 150px; }