How to make my second set of box move under on the first box [duplicate] - html

This question already has answers here:
Targeting flex items on the last or specific row
(10 answers)
Closed 1 year ago.
Please see the HTML and CSS below:
.nw-folder-icon-a {
fill: #ffc92c;
}
.nw-folder-icon-b {
fill: #ff9f00;
}
.nw-folder-icon-c {
fill: #ffffff;
}
.ex-item {
display: flex;
align-items: center;
border: 2px solid blue;
width: 18%;
border-radius: 10px;
padding: 10px 20px;
}
.ex-title {
font-weight: 600;
width: calc(100% - 60px);
margin-left: 10px;
}
.icon-folder-main {
width: 100%;
display: flex;
flex-direction: row;
gap: 15px;
flex-wrap: wrap;
justify-content: center;
}
<div class="icon-folder-main">
<div class="ex-item">
<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 50 50" width="50px" height="50" class="nw-folder-icon">
<path class="nw-folder-icon-a" d="M47,11V38a4,4,0,0,1-4,4H7a4,4,0,0,1-4-4V11A2,2,0,0,1,5,9H45A2,2,0,0,1,47,11Z"/>
<path class="nw-folder-icon-b" d="M45,8H5a3,3,0,0,0-3,3V38a5,5,0,0,0,5,5H43a5,5,0,0,0,5-5V11A3,3,0,0,0,45,8Zm1,23v7a3,3,0,0,1-3,3H7a3,3,0,0,1-3-3V27a3,3,0,0,1,3-3H26.13A5,5,0,0,0,30,22.21l1.78-2.13A3,3,0,0,1,34.07,19H43a3,3,0,0,1,3,3ZM42,15v2H34.07a5,5,0,0,0-3.85,1.8l-1.79,2.13A3,3,0,0,1,26.13,22H8V15a1,1,0,0,1,1-1H41A1,1,0,0,1,42,15Zm4,3a4.84,4.84,0,0,0-2-.93V15a3,3,0,0,0-3-3H9a3,3,0,0,0-3,3v7.1A4.84,4.84,0,0,0,4,23V11a1,1,0,0,1,1-1H45a1,1,0,0,1,1,1Z"/>
<path class="nw-folder-icon-c" d="M26.13,22H8V15a1,1,0,0,1,1-1H41a1,1,0,0,1,1,1v2H34.07a5,5,0,0,0-3.85,1.8l-1.79,2.13A3,3,0,0,1,26.13,22Z"/></svg>
<div class="ex-title">APECH</div>
</div>
<div class="ex-item">
<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 50 50" width="50px" height="50" class="nw-folder-icon">
<path class="nw-folder-icon-a" d="M47,11V38a4,4,0,0,1-4,4H7a4,4,0,0,1-4-4V11A2,2,0,0,1,5,9H45A2,2,0,0,1,47,11Z"/>
<path class="nw-folder-icon-b" d="M45,8H5a3,3,0,0,0-3,3V38a5,5,0,0,0,5,5H43a5,5,0,0,0,5-5V11A3,3,0,0,0,45,8Zm1,23v7a3,3,0,0,1-3,3H7a3,3,0,0,1-3-3V27a3,3,0,0,1,3-3H26.13A5,5,0,0,0,30,22.21l1.78-2.13A3,3,0,0,1,34.07,19H43a3,3,0,0,1,3,3ZM42,15v2H34.07a5,5,0,0,0-3.85,1.8l-1.79,2.13A3,3,0,0,1,26.13,22H8V15a1,1,0,0,1,1-1H41A1,1,0,0,1,42,15Zm4,3a4.84,4.84,0,0,0-2-.93V15a3,3,0,0,0-3-3H9a3,3,0,0,0-3,3v7.1A4.84,4.84,0,0,0,4,23V11a1,1,0,0,1,1-1H45a1,1,0,0,1,1,1Z"/>
<path class="nw-folder-icon-c" d="M26.13,22H8V15a1,1,0,0,1,1-1H41a1,1,0,0,1,1,1v2H34.07a5,5,0,0,0-3.85,1.8l-1.79,2.13A3,3,0,0,1,26.13,22Z"/></svg>
<div class="ex-title">APECH</div>
</div>
<div class="ex-item">
<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 50 50" width="50px" height="50" class="nw-folder-icon">
<path class="nw-folder-icon-a" d="M47,11V38a4,4,0,0,1-4,4H7a4,4,0,0,1-4-4V11A2,2,0,0,1,5,9H45A2,2,0,0,1,47,11Z"/>
<path class="nw-folder-icon-b" d="M45,8H5a3,3,0,0,0-3,3V38a5,5,0,0,0,5,5H43a5,5,0,0,0,5-5V11A3,3,0,0,0,45,8Zm1,23v7a3,3,0,0,1-3,3H7a3,3,0,0,1-3-3V27a3,3,0,0,1,3-3H26.13A5,5,0,0,0,30,22.21l1.78-2.13A3,3,0,0,1,34.07,19H43a3,3,0,0,1,3,3ZM42,15v2H34.07a5,5,0,0,0-3.85,1.8l-1.79,2.13A3,3,0,0,1,26.13,22H8V15a1,1,0,0,1,1-1H41A1,1,0,0,1,42,15Zm4,3a4.84,4.84,0,0,0-2-.93V15a3,3,0,0,0-3-3H9a3,3,0,0,0-3,3v7.1A4.84,4.84,0,0,0,4,23V11a1,1,0,0,1,1-1H45a1,1,0,0,1,1,1Z"/>
<path class="nw-folder-icon-c" d="M26.13,22H8V15a1,1,0,0,1,1-1H41a1,1,0,0,1,1,1v2H34.07a5,5,0,0,0-3.85,1.8l-1.79,2.13A3,3,0,0,1,26.13,22Z"/></svg>
<div class="ex-title">APECH</div>
</div>
<div class="ex-item">
<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 50 50" width="50px" height="50" class="nw-folder-icon">
<path class="nw-folder-icon-a" d="M47,11V38a4,4,0,0,1-4,4H7a4,4,0,0,1-4-4V11A2,2,0,0,1,5,9H45A2,2,0,0,1,47,11Z"/>
<path class="nw-folder-icon-b" d="M45,8H5a3,3,0,0,0-3,3V38a5,5,0,0,0,5,5H43a5,5,0,0,0,5-5V11A3,3,0,0,0,45,8Zm1,23v7a3,3,0,0,1-3,3H7a3,3,0,0,1-3-3V27a3,3,0,0,1,3-3H26.13A5,5,0,0,0,30,22.21l1.78-2.13A3,3,0,0,1,34.07,19H43a3,3,0,0,1,3,3ZM42,15v2H34.07a5,5,0,0,0-3.85,1.8l-1.79,2.13A3,3,0,0,1,26.13,22H8V15a1,1,0,0,1,1-1H41A1,1,0,0,1,42,15Zm4,3a4.84,4.84,0,0,0-2-.93V15a3,3,0,0,0-3-3H9a3,3,0,0,0-3,3v7.1A4.84,4.84,0,0,0,4,23V11a1,1,0,0,1,1-1H45a1,1,0,0,1,1,1Z"/>
<path class="nw-folder-icon-c" d="M26.13,22H8V15a1,1,0,0,1,1-1H41a1,1,0,0,1,1,1v2H34.07a5,5,0,0,0-3.85,1.8l-1.79,2.13A3,3,0,0,1,26.13,22Z"/></svg>
<div class="ex-title">APECH</div>
</div>
<div class="ex-item">
<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 50 50" width="50px" height="50" class="nw-folder-icon">
<path class="nw-folder-icon-a" d="M47,11V38a4,4,0,0,1-4,4H7a4,4,0,0,1-4-4V11A2,2,0,0,1,5,9H45A2,2,0,0,1,47,11Z"/>
<path class="nw-folder-icon-b" d="M45,8H5a3,3,0,0,0-3,3V38a5,5,0,0,0,5,5H43a5,5,0,0,0,5-5V11A3,3,0,0,0,45,8Zm1,23v7a3,3,0,0,1-3,3H7a3,3,0,0,1-3-3V27a3,3,0,0,1,3-3H26.13A5,5,0,0,0,30,22.21l1.78-2.13A3,3,0,0,1,34.07,19H43a3,3,0,0,1,3,3ZM42,15v2H34.07a5,5,0,0,0-3.85,1.8l-1.79,2.13A3,3,0,0,1,26.13,22H8V15a1,1,0,0,1,1-1H41A1,1,0,0,1,42,15Zm4,3a4.84,4.84,0,0,0-2-.93V15a3,3,0,0,0-3-3H9a3,3,0,0,0-3,3v7.1A4.84,4.84,0,0,0,4,23V11a1,1,0,0,1,1-1H45a1,1,0,0,1,1,1Z"/>
<path class="nw-folder-icon-c" d="M26.13,22H8V15a1,1,0,0,1,1-1H41a1,1,0,0,1,1,1v2H34.07a5,5,0,0,0-3.85,1.8l-1.79,2.13A3,3,0,0,1,26.13,22Z"/></svg>
<div class="ex-title">This folder should be on the left side<----</div>
</div>
</div>
Hi guys, just asking as you can see the boxes on the second set are
centered because I used justify-content: center; on my main
container .icon-folder-main. My goal is if the boxes go to the 2nd
set it should be under the first box. I tried using `flex-start still
not working. Can anyone help me with the correct way to implement it?


justify-content:space-between;

Related

why my svg icon is not show in a section next to input?

my icon is not showing. But if I reduce the width of my input field from 100% to 90% then it shows. What I am doing wrong ?
.flex {
display: flex;
align-items: center;
}
.jc {
justify-content: center;
}
<section class="flex jc">
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="#333" style="color:#333" height="15" width="15" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke-miterlimit="10" stroke-width="32" d="M221.09 64a157.09 157.09 0 10157.09 157.09A157.1 157.1 0 00221.09 64z"></path><path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32" d="M338.29 338.29L448 448"></path></svg>
<input type="text" name="search">
</section>

set the icon width to 15px and the input field width to 100% - 15px
.flex {
display: flex;
align-items: center;
}
.jc {
justify-content: center;
}
.icon {
width: 15px;
}
input {
width: calc(100% - 15px);
}
<section class="flex jc">
<svg class="icon" stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="#333" style="color:#333" height="15" width="15" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke-miterlimit="10" stroke-width="32" d="M221.09 64a157.09 157.09 0 10157.09 157.09A157.1 157.1 0 00221.09 64z"></path><path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32" d="M338.29 338.29L448 448"></path></svg>
<input type="text" name="search">
</section>

Your SVG Icon is already in section tag

svg defined with same width and height, same viewport yet they are different size

I'm trying to have 3 icons of social media as SVG in a flex container.
I defined for each SVG the same height, width and viewport.
The facebook and instagram svg are same size , but the twitter one is a different size yet the viewport width and height which i defined in the svg tag are the same
So i'm trying to have all those social media icons in the same parent container and all have the same size.
.social-media {
display: flex;
align-items: center;
justify-content: center;
gap: 25px;
}
.social-media svg {
cursor: pointer;
}
<div class="social-media">
<div class="twitter">
<svg viewBox="0 0 112.196 112.196" style="enable-background:new 0 0 112.196 112.196;" xml:space="preserve" width="260px" height="260px">
<path fill="#03a9f4" d="M24,4C13,4,4,13,4,24s9,20,20,20s20-9,20-20S35,4,24,4z" />
<path fill="#fff" d="M36,17.1c-0.9,0.4-2,0.8-3,0.9c1-0.6,2.6-1.9,3-3c-1,0.6-2.7,1.2-3.8,1.4C31.3,15.4,30,15,28.6,15 c-2.7,0-4.6,2.3-4.6,5v2c-4,0-7.9-3-10.3-6c-0.4,0.7-0.7,1.6-0.7,2.5c0,1.8,1.7,3.7,3,4.5c-0.8,0-2.3-0.6-3-1c0,0,0,0,0,0.1 c0,2.4,1.7,4,3.9,4.4C16.5,26.6,16,27,14.1,27c0.6,1.9,3.8,3,5.9,3c-1.7,1.3-4.7,2-7,2c-0.4,0-0.6,0-1,0c2.2,1.4,5.2,2,8,2 c9.1,0,14-6.9,14-13.4c0-0.2,0-0.9,0-1.1C35,18.8,35.3,18.1,36,17.1" />
</svg>
</div>
<div class="facebook">
<svg viewBox="0 0 112.196 112.196" style="enable-background:new 0 0 112.196 112.196;" xml:space="preserve" width="260px" height="260px">
<g>
<circle style="fill:#3B5998;" cx="56.098" cy="56.098" r="56.098" />
<path style="fill:#FFFFFF;" d="M70.201,58.294h-10.01v36.672H45.025V58.294h-7.213V45.406h7.213v-8.34
c0-5.964,2.833-15.303,15.301-15.303L71.56,21.81v12.51h-8.151c-1.337,0-3.217,0.668-3.217,3.513v7.585h11.334L70.201,58.294z" />
</g>
</svg>
</div>
<div class="instagram">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 112.196 112.196" width="260px" height="260px" style="enable-background:new 0 0 112.196 112.196;" xml:space="preserve">
<g>
<circle id="XMLID_115_" style="fill:#6A453B;" cx="56.098" cy="56.097" r="56.098" />
<path style="fill:#FFFFFF;" d="M79.124,22.506h-46.05c-5.83,0-10.56,4.73-10.56,10.57v46.05c0,5.83,4.73,10.56,10.56,10.56h46.05
c5.83,0,10.56-4.73,10.56-10.56v-46.05C89.684,27.236,84.954,22.506,79.124,22.506z M71.983,30.276l8.44-0.02h0.02
c0.81-0.01,1.47,0.65,1.47,1.45v8.47c0,0.81-0.65,1.46-1.46,1.46l-8.43,0.03c-0.81,0-1.46-0.65-1.46-1.45l-0.03-8.47
C70.523,30.936,71.173,30.286,71.983,30.276z M45.804,50.326c0.22-0.38,0.45-0.76,0.71-1.12c2.15-2.98,5.64-4.93,9.58-4.93
c3.95,0,7.44,1.95,9.59,4.93c0.26,0.36,0.49,0.74,0.71,1.13c0.96,1.7,1.53,3.67,1.53,5.76c0,6.52-5.31,11.82-11.83,11.82
c-6.52,0-11.82-5.3-11.82-11.82C44.273,54.006,44.834,52.036,45.804,50.326z M83.144,76.706c0,3.55-2.89,6.44-6.44,6.44h-41.21
c-3.55,0-6.44-2.89-6.44-6.44v-27.5h10.03c-0.25,0.61-0.47,1.25-0.65,1.89c-0.46,1.59-0.7,3.27-0.7,5
c0,10.13,8.24,18.37,18.36,18.37c10.13,0,18.37-8.24,18.37-18.37c0-1.73-0.25-3.41-0.7-5c-0.19-0.64-0.4-1.28-0.65-1.89h10.03
V76.706z" />
</g>
</svg>
</div>
</div>

The problem is that the icons are drawn in a vector editor with different physical sizes.
To find out these sizes, for example, the twitter icon, you need to use the JS getBBox() method.
<script>
console.log(twitter.getBBox())
</script>
.social-media {
display: flex;
align-items: center;
justify-content: center;
gap: 25px;
}
.social-media svg {
cursor: pointer;
}
.twitter {
border:1px solid;
}
<div class="social-media">
<div class="twitter" >
<svg viewBox="0 0 112.196 112.196" style="enable-background:new 0 0 112.196 112.196;" xml:space="preserve" width="260px" height="260px" >
<g>
<path id="twitter" fill="#03a9f4" d="M24,4C13,4,4,13,4,24s9,20,20,20s20-9,20-20S35,4,24,4z" />
<path fill="#fff" d="M36,17.1c-0.9,0.4-2,0.8-3,0.9c1-0.6,2.6-1.9,3-3c-1,0.6-2.7,1.2-3.8,1.4C31.3,15.4,30,15,28.6,15 c-2.7,0-4.6,2.3-4.6,5v2c-4,0-7.9-3-10.3-6c-0.4,0.7-0.7,1.6-0.7,2.5c0,1.8,1.7,3.7,3,4.5c-0.8,0-2.3-0.6-3-1c0,0,0,0,0,0.1 c0,2.4,1.7,4,3.9,4.4C16.5,26.6,16,27,14.1,27c0.6,1.9,3.8,3,5.9,3c-1.7,1.3-4.7,2-7,2c-0.4,0-0.6,0-1,0c2.2,1.4,5.2,2,8,2 c9.1,0,14-6.9,14-13.4c0-0.2,0-0.9,0-1.1C35,18.8,35.3,18.1,36,17.1" />
</g>
</svg>
</div>
<div class="facebook">
<svg viewBox="0 0 112.196 112.196" style="enable-background:new 0 0 112.196 112.196;" xml:space="preserve" width="260px" height="260px">
<g >
<circle id="facebook" style="fill:#3B5998;" cx="56.098" cy="56.098" r="56.098" />
<path style="fill:#FFFFFF;" d="M70.201,58.294h-10.01v36.672H45.025V58.294h-7.213V45.406h7.213v-8.34
c0-5.964,2.833-15.303,15.301-15.303L71.56,21.81v12.51h-8.151c-1.337,0-3.217,0.668-3.217,3.513v7.585h11.334L70.201,58.294z" />
</g>
</svg>
</div>
<div class="instagram">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 112.196 112.196" width="260px" height="260px" style="enable-background:new 0 0 112.196 112.196;" xml:space="preserve">
<g>
<circle id="instagram" style="fill:#6A453B;" cx="56.098" cy="56.097" r="56.098" />
<path style="fill:#FFFFFF;" d="M79.124,22.506h-46.05c-5.83,0-10.56,4.73-10.56,10.57v46.05c0,5.83,4.73,10.56,10.56,10.56h46.05
c5.83,0,10.56-4.73,10.56-10.56v-46.05C89.684,27.236,84.954,22.506,79.124,22.506z M71.983,30.276l8.44-0.02h0.02
c0.81-0.01,1.47,0.65,1.47,1.45v8.47c0,0.81-0.65,1.46-1.46,1.46l-8.43,0.03c-0.81,0-1.46-0.65-1.46-1.45l-0.03-8.47
C70.523,30.936,71.173,30.286,71.983,30.276z M45.804,50.326c0.22-0.38,0.45-0.76,0.71-1.12c2.15-2.98,5.64-4.93,9.58-4.93
c3.95,0,7.44,1.95,9.59,4.93c0.26,0.36,0.49,0.74,0.71,1.13c0.96,1.7,1.53,3.67,1.53,5.76c0,6.52-5.31,11.82-11.83,11.82
c-6.52,0-11.82-5.3-11.82-11.82C44.273,54.006,44.834,52.036,45.804,50.326z M83.144,76.706c0,3.55-2.89,6.44-6.44,6.44h-41.21
c-3.55,0-6.44-2.89-6.44-6.44v-27.5h10.03c-0.25,0.61-0.47,1.25-0.65,1.89c-0.46,1.59-0.7,3.27-0.7,5
c0,10.13,8.24,18.37,18.36,18.37c10.13,0,18.37-8.24,18.37-18.37c0-1.73-0.25-3.41-0.7-5c-0.19-0.64-0.4-1.28-0.65-1.89h10.03
V76.706z" />
</g>
</svg>
</div>
</div>
<script>
console.log(twitter.getBBox())
</script>
The resulting values must be added to the viewBox="4 4 40 40" for the twitter icon
And then the empty padding will be cut off from the icon and it will completely fill the parent container.
.social-media {
display: flex;
align-items: center;
justify-content: center;
gap: 25px;
}
.social-media svg {
cursor: pointer;
}
.twitter {
border:1px solid;
}
<div class="social-media">
<div class="twitter" >
<svg viewBox="4 4 40 40" style="enable-background:new 0 0 112.196 112.196;" xml:space="preserve" width="260px" height="260px" >
<g>
<path id="twitter" fill="#03a9f4" d="M24,4C13,4,4,13,4,24s9,20,20,20s20-9,20-20S35,4,24,4z" />
<path fill="#fff" d="M36,17.1c-0.9,0.4-2,0.8-3,0.9c1-0.6,2.6-1.9,3-3c-1,0.6-2.7,1.2-3.8,1.4C31.3,15.4,30,15,28.6,15 c-2.7,0-4.6,2.3-4.6,5v2c-4,0-7.9-3-10.3-6c-0.4,0.7-0.7,1.6-0.7,2.5c0,1.8,1.7,3.7,3,4.5c-0.8,0-2.3-0.6-3-1c0,0,0,0,0,0.1 c0,2.4,1.7,4,3.9,4.4C16.5,26.6,16,27,14.1,27c0.6,1.9,3.8,3,5.9,3c-1.7,1.3-4.7,2-7,2c-0.4,0-0.6,0-1,0c2.2,1.4,5.2,2,8,2 c9.1,0,14-6.9,14-13.4c0-0.2,0-0.9,0-1.1C35,18.8,35.3,18.1,36,17.1" />
</g>
</svg>
</div>
<div class="facebook">
<svg viewBox="0 0 112.196 112.196" style="enable-background:new 0 0 112.196 112.196;" xml:space="preserve" width="260px" height="260px">
<g >
<circle id="facebook" style="fill:#3B5998;" cx="56.098" cy="56.098" r="56.098" />
<path style="fill:#FFFFFF;" d="M70.201,58.294h-10.01v36.672H45.025V58.294h-7.213V45.406h7.213v-8.34
c0-5.964,2.833-15.303,15.301-15.303L71.56,21.81v12.51h-8.151c-1.337,0-3.217,0.668-3.217,3.513v7.585h11.334L70.201,58.294z" />
</g>
</svg>
</div>
<div class="instagram">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 112.196 112.196" width="260px" height="260px" style="enable-background:new 0 0 112.196 112.196;" xml:space="preserve">
<g>
<circle id="instagram" style="fill:#6A453B;" cx="56.098" cy="56.097" r="56.098" />
<path style="fill:#FFFFFF;" d="M79.124,22.506h-46.05c-5.83,0-10.56,4.73-10.56,10.57v46.05c0,5.83,4.73,10.56,10.56,10.56h46.05
c5.83,0,10.56-4.73,10.56-10.56v-46.05C89.684,27.236,84.954,22.506,79.124,22.506z M71.983,30.276l8.44-0.02h0.02
c0.81-0.01,1.47,0.65,1.47,1.45v8.47c0,0.81-0.65,1.46-1.46,1.46l-8.43,0.03c-0.81,0-1.46-0.65-1.46-1.45l-0.03-8.47
C70.523,30.936,71.173,30.286,71.983,30.276z M45.804,50.326c0.22-0.38,0.45-0.76,0.71-1.12c2.15-2.98,5.64-4.93,9.58-4.93
c3.95,0,7.44,1.95,9.59,4.93c0.26,0.36,0.49,0.74,0.71,1.13c0.96,1.7,1.53,3.67,1.53,5.76c0,6.52-5.31,11.82-11.83,11.82
c-6.52,0-11.82-5.3-11.82-11.82C44.273,54.006,44.834,52.036,45.804,50.326z M83.144,76.706c0,3.55-2.89,6.44-6.44,6.44h-41.21
c-3.55,0-6.44-2.89-6.44-6.44v-27.5h10.03c-0.25,0.61-0.47,1.25-0.65,1.89c-0.46,1.59-0.7,3.27-0.7,5
c0,10.13,8.24,18.37,18.36,18.37c10.13,0,18.37-8.24,18.37-18.37c0-1.73-0.25-3.41-0.7-5c-0.19-0.64-0.4-1.28-0.65-1.89h10.03
V76.706z" />
</g>
</svg>
</div>
</div>
If you need to reduce the size of icons to 48px for example, then it will be enough to reduce the size of the user's viewport from 260px to 48px
.social-media {
display: flex;
align-items: center;
justify-content: center;
gap: 25px;
}
.social-media svg {
cursor: pointer;
}
<div class="social-media">
<div class="twitter" >
<svg viewBox="4 4 40 40" style="enable-background:new 0 0 112.196 112.196;" xml:space="preserve" width="48" height="48" >
<g>
<path id="twitter" fill="#03a9f4" d="M24,4C13,4,4,13,4,24s9,20,20,20s20-9,20-20S35,4,24,4z" />
<path fill="#fff" d="M36,17.1c-0.9,0.4-2,0.8-3,0.9c1-0.6,2.6-1.9,3-3c-1,0.6-2.7,1.2-3.8,1.4C31.3,15.4,30,15,28.6,15 c-2.7,0-4.6,2.3-4.6,5v2c-4,0-7.9-3-10.3-6c-0.4,0.7-0.7,1.6-0.7,2.5c0,1.8,1.7,3.7,3,4.5c-0.8,0-2.3-0.6-3-1c0,0,0,0,0,0.1 c0,2.4,1.7,4,3.9,4.4C16.5,26.6,16,27,14.1,27c0.6,1.9,3.8,3,5.9,3c-1.7,1.3-4.7,2-7,2c-0.4,0-0.6,0-1,0c2.2,1.4,5.2,2,8,2 c9.1,0,14-6.9,14-13.4c0-0.2,0-0.9,0-1.1C35,18.8,35.3,18.1,36,17.1" />
</g>
</svg>
</div>
<div class="facebook">
<svg viewBox="0 0 112.196 112.196" style="enable-background:new 0 0 112.196 112.196;" xml:space="preserve" width="48" height="48">
<g >
<circle id="facebook" style="fill:#3B5998;" cx="56.098" cy="56.098" r="56.098" />
<path style="fill:#FFFFFF;" d="M70.201,58.294h-10.01v36.672H45.025V58.294h-7.213V45.406h7.213v-8.34
c0-5.964,2.833-15.303,15.301-15.303L71.56,21.81v12.51h-8.151c-1.337,0-3.217,0.668-3.217,3.513v7.585h11.334L70.201,58.294z" />
</g>
</svg>
</div>
<div class="instagram">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 112.196 112.196" width="48" height="48" style="enable-background:new 0 0 112.196 112.196;" xml:space="preserve">
<g>
<circle id="instagram" style="fill:#6A453B;" cx="56.098" cy="56.097" r="56.098" />
<path style="fill:#FFFFFF;" d="M79.124,22.506h-46.05c-5.83,0-10.56,4.73-10.56,10.57v46.05c0,5.83,4.73,10.56,10.56,10.56h46.05
c5.83,0,10.56-4.73,10.56-10.56v-46.05C89.684,27.236,84.954,22.506,79.124,22.506z M71.983,30.276l8.44-0.02h0.02
c0.81-0.01,1.47,0.65,1.47,1.45v8.47c0,0.81-0.65,1.46-1.46,1.46l-8.43,0.03c-0.81,0-1.46-0.65-1.46-1.45l-0.03-8.47
C70.523,30.936,71.173,30.286,71.983,30.276z M45.804,50.326c0.22-0.38,0.45-0.76,0.71-1.12c2.15-2.98,5.64-4.93,9.58-4.93
c3.95,0,7.44,1.95,9.59,4.93c0.26,0.36,0.49,0.74,0.71,1.13c0.96,1.7,1.53,3.67,1.53,5.76c0,6.52-5.31,11.82-11.83,11.82
c-6.52,0-11.82-5.3-11.82-11.82C44.273,54.006,44.834,52.036,45.804,50.326z M83.144,76.706c0,3.55-2.89,6.44-6.44,6.44h-41.21
c-3.55,0-6.44-2.89-6.44-6.44v-27.5h10.03c-0.25,0.61-0.47,1.25-0.65,1.89c-0.46,1.59-0.7,3.27-0.7,5
c0,10.13,8.24,18.37,18.36,18.37c10.13,0,18.37-8.24,18.37-18.37c0-1.73-0.25-3.41-0.7-5c-0.19-0.64-0.4-1.28-0.65-1.89h10.03
V76.706z" />
</g>
</svg>
</div>
</div>

EDIT :
I manage to find a fix (more like a hack I guess) to have the same size, I think it is not the best way to do it, but if someone ever has the same problem as me you can do as following :
1- Replace the first path tag of the twitter SVG by a circle tag (to match the 2 others SVG)
<circle style="fill:#03a9f4;" cx="56.098" cy="56.098" r="56.098"></circle>
Instead of :
<path fill="#03a9f4" d="M24,4C13,4,4,13,4,24s9,20,20,20s20-9,20-20S35,4,24,4z" />
2- Add some CSS style to the Path of the twitter icon
transform: translate(85%, 85%) scale(3);
transform-origin: center;
Like I said, what I did is more of a hack and i'm certain there is a way more proper way to do it, If anyone has the answer I would be glad to hear about it

is this a svg stroke-width bug in chrome?

Im trying to create a svg dot that i can scale up using stroke width.
I want to controll all my icons stroke-width with a variable and to do this i need to be able to create dots not just lines, but im getting some weird results when i have a small circle or a circular path and i increase the stroke width.
The red color is the circle fill, the blue color is the stroke but when increasing the stroke width im getting a gap between the fill and the stroke for some reason. (i used zoom 2000% to make everything bigger)
svg{
zoom: 3000%;
margin-top: 1px;
fill: red;
stroke: blue;
}
body{
display: flex;
div{
display: flex;
flex: 1;
align-items: center;
flex-direction: column;
height: 100%;
padding: 20px 0;
}
}
<div>
stroke-width: 1px;
<svg stroke-width="1" xmlns="http://www.w3.org/2000/svg" width="4" height="6.843" viewBox="0 0 4 6.843">
<g id="Group_614" data-name="Group 614" transform="translate(-851.372 -396.657)">
<path id="Group_608" data-name="Group 608" d="M16,22.1a.371.371,0,1,1-.371.371h0A.371.371,0,0,1,16,22.1Z" transform="translate(837.372 375.561)" stroke-miterlimit="10"/>
<circle id="Ellipse_20" data-name="Ellipse 20" cx="0.5" cy="0.5" r="0.5" transform="translate(852.872 401)" />
</g>
</svg>
</div>
<div>
stroke-width: 2px;
<svg stroke-width="2" xmlns="http://www.w3.org/2000/svg" width="4" height="6.843" viewBox="0 0 4 6.843">
<g id="Group_614" data-name="Group 614" transform="translate(-851.372 -396.657)">
<path id="Group_608" data-name="Group 608" d="M16,22.1a.371.371,0,1,1-.371.371h0A.371.371,0,0,1,16,22.1Z" transform="translate(837.372 375.561)" stroke-miterlimit="10"/>
<circle id="Ellipse_20" data-name="Ellipse 20" cx="0.5" cy="0.5" r="0.5" transform="translate(852.872 401)" />
</g>
</svg>
</div>
<div>
stroke-width: 3px;
<svg stroke-width="3px" xmlns="http://www.w3.org/2000/svg" width="4" height="6.843" viewBox="0 0 4 6.843">
<g id="Group_614" data-name="Group 614" transform="translate(-851.372 -396.657)">
<path id="Group_608" data-name="Group 608" d="M16,22.1a.371.371,0,1,1-.371.371h0A.371.371,0,0,1,16,22.1Z" transform="translate(837.372 375.561)" stroke-miterlimit="10"/>
<circle id="Ellipse_20" data-name="Ellipse 20" cx="0.5" cy="0.5" r="0.5" transform="translate(852.872 401)" />
</g>
</svg>
</div>
<div>
stroke-width: 4px;
<svg stroke-width="4px" xmlns="http://www.w3.org/2000/svg" width="4" height="6.843" viewBox="0 0 4 6.843">
<g id="Group_614" data-name="Group 614" transform="translate(-851.372 -396.657)">
<path id="Group_608" data-name="Group 608" d="M16,22.1a.371.371,0,1,1-.371.371h0A.371.371,0,0,1,16,22.1Z" transform="translate(837.372 375.561)" stroke-miterlimit="10"/>
<circle id="Ellipse_20" data-name="Ellipse 20" cx="0.5" cy="0.5" r="0.5" transform="translate(852.872 401)" />
</g>
</svg>
</div>

Trying to draw circles whose stroke is more than double the radius is not a good idea. As you have found, the behaviour in that situation is unreliable, and many 2D rendering libraries don't handle it gracefully. The correct behaviour isn't defined in the SVG spec either.
However, there is a simple solution to your problem. Simply draw a zero length line that has round end caps. The good news is that this is not a trick. It is safe to do because this behaviour is specified in the spec. And all SVG renderers handle it correctly.
svg{
margin-top: 1px;
fill: none;
stroke: blue;
stroke-linecap: round;
}
body{
display: flex;
div{
display: flex;
flex: 1;
align-items: center;
flex-direction: column;
height: 100%;
padding: 20px 0;
}
}
<div>
stroke-width: 1px;
<svg stroke-width="1" width="120" height="120" viewBox="0 0 4 4">
<path d="M2,2h0"/>
</svg>
</div>
<div>
stroke-width: 2px;
<svg stroke-width="2" width="120" height="120" viewBox="0 0 4 4">
<path d="M2,2h0"/>
</svg>
</div>
<div>
stroke-width: 3px;
<svg stroke-width="3" width="120" height="120" viewBox="0 0 4 4">
<path d="M2,2h0"/>
</svg>
</div>
<div>
stroke-width: 4px;
<svg stroke-width="4" width="120" height="120" viewBox="0 0 4 4">
<path d="M2,2h0"/>
</svg>
</div>

Scale SVG image non-proportionally to fit in remaining space

Below arrow is composed out of 3 single elements. The center part should stretch horizontally so the arrow can fill its surrounding container. But as you can see in the rendered code, the stretching doesn't work. How to enable stretching and making sure, there are no gaps at the junctures. Probably, there should be a small overlap between the parts because of the antialiasing (which is mandatory).
EDIT: Using preserveAspectRatio="none" suggested by #Turnip is stretching the image, but it is producing gaps and jumps on certain widths. See this screenshot:
Can't explain this weird behavior at all!
.arrow {
display: flex;
max-width: 200px;
padding-bottom: 2em;
}
.arrow svg {
height: 25px;
shape-rendering: auto;
}
#arrow-1 svg.stretched {}
#arrow-2 svg.stretched {
width: 100%;
}
<div class="arrow" id="arrow-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 25">
<path fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="3" d="M13 2.5h-1.31A5.21 5.21 0 006.5 7.69v14.62"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="mid" viewBox="0 0 3 25"><rect y="1" width="3" height="3"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 25">
<path fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="3" d="M5.5 15.84V7.69A5.21 5.21 0 00.31 2.5H0"/>
<path d="M5.5 24.31l4.88-11.94-4.88 2.84-4.88-2.84L5.5 24.31z"/>
</svg>
</div>
<div class="arrow" id="arrow-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 25">
<path fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="3" d="M13 2.5h-1.31A5.21 5.21 0 006.5 7.69v14.62"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="stretched" viewBox="0 0 3 25"><rect y="1" width="3" height="3"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 25">
<path fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="3" d="M5.5 15.84V7.69A5.21 5.21 0 00.31 2.5H0"/>
<path d="M5.5 24.31l4.88-11.94-4.88 2.84-4.88-2.84L5.5 24.31z"/>
</svg>
</div>

You can do the biggest part using CSS and it would easier to handle:
.box {
width: 50%;
margin: auto;
height: 50px;
border: 10px solid;
border-bottom: 0;
border-radius: 20px 20px 0 0;
position: relative;
}
.box::after {
content: "";
position: absolute;
bottom: 0;
right: -5px;
width: 45px;
height: 58px;
transform: translate(50%, 30%);
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 12 11 13"><path d="M5.5 24.31l4.88-11.94-4.88 2.84-4.88-2.84L5.5 24.31z"></path></svg>') bottom/contain no-repeat;
}
<div class="box"></div>
Also like below:
.box {
width: 50%;
margin: auto;
height: 50px;
border: 10px solid;
border-bottom: 0;
border-radius: 20px 20px 0 0;
position: relative;
}
.box svg {
position: absolute;
bottom: 0;
right: -5px;
width: 45px;
transform: translate(50%, 30%);
}
<div class="box">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 12 11 13"><path d="M5.5 24.31l4.88-11.94-4.88 2.84-4.88-2.84L5.5 24.31z"></path></svg>
</div>

Instead of using 3 svg elements I'm using only one. I'm putting the start and the end of the "arrow" in a <symbol> element so that I can use those shapes where I need them. Please observe that the <symbol> elements have a tight viewbox (the viewBox is wrapping tight the shape and has the same size as the bounding box of the shape + some extra space for the 1/2 width of the line).
Now I can use those symbols as many times as I need and where I need.
In order to connect the 2 use elements I'm using a line. please observe that the x1 attribute of the line (in the first group) is 18 where 18 = 10 (the x attribute of the first use element) + 8 (the width attribute of the first use element).
The x2 attribute of the line deppends on how long you need it to be and has the same value as the attribute x of the second use element.
<svg viewBox="0 0 130 70">
<symbol id="start" xmlns="http://www.w3.org/2000/svg" viewBox="5 0 8 22">
<path fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="3" d="M13 2.5h-1.31A5.21 5.21 0 006.5 7.69v14.62" />
</symbol>
<symbol id="end" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 25">
<path fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="3" d="M5.5 15.84V7.69A5.21 5.21 0 00.31 2.5H0" />
<path d="M5.5 24.31l4.88-11.94-4.88 2.84-4.88-2.84L5.5 24.31z" />
</symbol>
<g id="g1">
<use xlink:href="#start" x="10" width="8" height="22" />
<use xlink:href="#end" x="100" width="11" height="25" />
<line x1="18" y1="2.5" x2="100" y2="2.5" stroke="black" stroke-width="3" stroke-linecap="round" />
</g>
<g id="g2">
<use xlink:href="#start" x="20" y="35" width="8" height="22" />
<use xlink:href="#end" x="70" y="35" width="11" height="25" />
<line x1="28" x2="70" y1="37.5" y2="37.5" stroke="black" stroke-width="3" stroke-linecap="round" />
</g>
</svg>

Use preserveAspectRatio="none" on the SVG that you want to stretch. This will allow the inner rect to stretch along with the SVG element.
.arrow {
display: flex;
max-width: 200px;
padding-bottom: 2em;
}
.arrow svg {
height: 25px;
shape-rendering: auto;
}
#arrow-1 svg.stretched {}
#arrow-2 svg.stretched {
width: 100%;
}
<div class="arrow" id="arrow-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 25">
<path fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="3" d="M13 2.5h-1.31A5.21 5.21 0 006.5 7.69v14.62"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="mid" viewBox="0 0 3 25"><rect y="1" width="3" height="3"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 25">
<path fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="3" d="M5.5 15.84V7.69A5.21 5.21 0 00.31 2.5H0"/>
<path d="M5.5 24.31l4.88-11.94-4.88 2.84-4.88-2.84L5.5 24.31z"/>
</svg>
</div>
<div class="arrow" id="arrow-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 25">
<path fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="3" d="M13 2.5h-1.31A5.21 5.21 0 006.5 7.69v14.62"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="stretched" viewBox="0 0 3 25" preserveAspectRatio="none"><rect y="2" width="3" height="3"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 25">
<path fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="3" d="M5.5 15.84V7.69A5.21 5.21 0 00.31 2.5H0"/>
<path d="M5.5 24.31l4.88-11.94-4.88 2.84-4.88-2.84L5.5 24.31z"/>
</svg>
</div>

Vertically align SVG icons to center in UL

I have created a sample code for this, so that will make more sense. I want to align all the icons vertically center. The icons are having different sizes. I have added borders for debugging purpose so we can see exactly if it is vertically centered or not.
I know a method to give fixed width to the LI tag and then vertically align the A tag by making is position absolute, but I am looking for more flexible solution as in this example I have given fixed width to SVG files but that will not happen in main site.
Thank You.
.wrapper {
width: 300px;
margin: 50px auto;
border: 2px solid grey;
}
.wrapper ul.socialmedia-menu {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0px;
padding: 0px;
}
.wrapper ul.socialmedia-menu li {
list-style: none;
border: 1px solid blue;
}
.wrapper ul.socialmedia-menu li a svg {
width: 30px;
height: auto;
}
<div class="wrapper">
<ul class="socialmedia-menu">
<li>
<svg class="i_instagram" preserveAspectRatio="xMidYMid" width="18" height="18" viewBox="0 0 18 18"><use xlink:href="#i_instagram"></use></svg>
</li>
<li>
<svg class="i_twitter" preserveAspectRatio="xMidYMid" width="18.438" height="15" viewBox="0 0 18.438 15"><use xlink:href="#i_twitter"></use></svg>
</li>
<li>
<a href="#"><svg class="i_pinterest" preserveAspectRatio="xMidYMid" width="17.031" height="17.03" viewBox="0 0 17.031 17.03"><use xlink:href="#i_pinterest"></use>
</svg></a>
</li>
<li>
<svg class="i_facebook" preserveAspectRatio="xMidYMid" width="21.125" height="21.16" viewBox="0 0 21.125 21.16"><use xlink:href="#i_facebook"></use></svg>
</li>
<li>
<svg class="i_tumblr" preserveAspectRatio="xMidYMid" width="9.126" height="15.53" viewBox="0 0 9.126 15.53"><use xlink:href="#i_tumblr"></use></svg>
</li>
<li>
<svg class="i_email" preserveAspectRatio="xMidYMid" width="18" height="14" viewBox="0 0 18 14"><use xlink:href="#i_email"></use></svg>
</li>
</ul>
</div>
<!--- SVG DEFINITIONS : You can skip looking at it :) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">
<defs>
<g id="i_instagram">
<path d="M118.989,4005.62c2.4,0,2.689.01,3.638,0.06a4.811,4.811,0,0,1,1.672.31,2.807,2.807,0,0,1,1.036.67,2.765,2.765,0,0,1,.673,1.04,4.919,4.919,0,0,1,.31,1.67c0.043,0.95.052,1.23,0.052,3.64s-0.009,2.68-.052,3.63a5.054,5.054,0,0,1-.31,1.68,2.728,2.728,0,0,1-.673,1.03,2.687,2.687,0,0,1-1.036.67,4.811,4.811,0,0,1-1.672.31c-0.949.05-1.233,0.06-3.638,0.06s-2.689-.01-3.638-0.06a4.817,4.817,0,0,1-1.672-.31,2.684,2.684,0,0,1-1.035-.67,2.728,2.728,0,0,1-.673-1.03,5.027,5.027,0,0,1-.31-1.68c-0.044-.95-0.053-1.23-0.053-3.63s0.009-2.69.053-3.64a4.894,4.894,0,0,1,.31-1.67,2.765,2.765,0,0,1,.673-1.04,2.8,2.8,0,0,1,1.035-.67,4.817,4.817,0,0,1,1.672-.31c0.95-.05,1.234-0.06,3.638-0.06m0-1.62c-2.445,0-2.751.01-3.712,0.06a6.6,6.6,0,0,0-2.185.41,4.6,4.6,0,0,0-2.633,2.64,6.543,6.543,0,0,0-.419,2.18c-0.044.96-.054,1.27-0.054,3.72s0.01,2.75.054,3.71a6.543,6.543,0,0,0,.419,2.18,4.366,4.366,0,0,0,1.038,1.6,4.429,4.429,0,0,0,1.595,1.04,6.839,6.839,0,0,0,2.185.42c0.961,0.04,1.267.05,3.712,0.05s2.752-.01,3.712-0.05a6.84,6.84,0,0,0,2.186-.42,4.429,4.429,0,0,0,1.595-1.04,4.366,4.366,0,0,0,1.038-1.6,6.521,6.521,0,0,0,.418-2.18c0.044-.96.055-1.27,0.055-3.71s-0.011-2.76-.055-3.72a6.521,6.521,0,0,0-.418-2.18,4.6,4.6,0,0,0-2.633-2.64,6.6,6.6,0,0,0-2.186-.41c-0.96-.05-1.266-0.06-3.712-0.06h0Zm0,4.38a4.625,4.625,0,1,0,4.624,4.63A4.625,4.625,0,0,0,118.989,4008.38Zm0,7.63a3.005,3.005,0,1,1,3-3A3.005,3.005,0,0,1,118.989,4016.01Zm5.887-7.81a1.081,1.081,0,1,1-1.081-1.08A1.078,1.078,0,0,1,124.876,4008.2Z" transform="translate(-110 -4004)"></path>
</g>
</defs>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">
<defs>
<g id="i_twitter">
<path d="M164.2,4007.27a7.544,7.544,0,0,1-2.174.59,3.8,3.8,0,0,0,1.664-2.09,7.673,7.673,0,0,1-2.4.92,3.784,3.784,0,0,0-6.549,2.59,3.871,3.871,0,0,0,.1.86,10.749,10.749,0,0,1-7.8-3.95,3.713,3.713,0,0,0-.512,1.9,3.788,3.788,0,0,0,1.684,3.15,3.818,3.818,0,0,1-1.715-.47v0.04a3.794,3.794,0,0,0,3.036,3.72,4.077,4.077,0,0,1-1,.13,4.161,4.161,0,0,1-.712-0.07,3.794,3.794,0,0,0,3.536,2.63,7.628,7.628,0,0,1-4.7,1.62,8.942,8.942,0,0,1-.9-0.05,10.766,10.766,0,0,0,16.572-9.07c0-.17,0-0.33-0.011-0.49A7.768,7.768,0,0,0,164.2,4007.27Z" transform="translate(-145.75 -4005.5)"></path>
</g>
</defs>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">
<defs>
<g id="i_pinterest">
<path d="M191.98,4004.48a8.508,8.508,0,0,0-3.415,16.3,7.452,7.452,0,0,1,.148-1.95c0.164-.69,1.095-4.64,1.095-4.64a3.235,3.235,0,0,1-.272-1.34c0-1.26.731-2.21,1.64-2.21a1.145,1.145,0,0,1,1.148,1.28,18.34,18.34,0,0,1-.751,3.02,1.318,1.318,0,0,0,1.342,1.64c1.612,0,2.7-2.07,2.7-4.52,0-1.87-1.256-3.26-3.54-3.26a4.025,4.025,0,0,0-4.188,4.07,2.473,2.473,0,0,0,.561,1.67,0.406,0.406,0,0,1,.122.47c-0.041.16-.134,0.54-0.173,0.69a0.294,0.294,0,0,1-.426.21,3.283,3.283,0,0,1-1.742-3.25c0-2.42,2.038-5.32,6.08-5.32a5.085,5.085,0,0,1,5.385,4.88c0,3.33-1.855,5.83-4.59,5.83a2.449,2.449,0,0,1-2.078-1.06s-0.494,1.96-.6,2.34a7.166,7.166,0,0,1-.856,1.82,8.711,8.711,0,0,0,2.411.35A8.51,8.51,0,0,0,191.98,4004.48Z" transform="translate(-183.469 -4004.47)"></path>
</g>
</defs>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">
<defs>
<g id="i_facebook">
<path d="M19.284,21.151 L15.498,21.151 L15.498,11.216 L18.433,11.216 L18.653,8.347 L15.498,8.347 L15.498,7.447 L15.498,6.418 L15.498,6.106 C15.498,5.334 16.187,5.059 16.957,5.059 C17.726,5.059 18.551,5.298 18.551,5.298 L19.045,2.358 C19.045,2.358 17.993,2.002 15.498,2.002 C13.966,2.002 13.075,2.586 12.427,3.446 C11.811,4.258 11.789,5.569 11.789,6.418 L11.789,6.565 L11.789,7.447 L11.789,8.347 L9.810,8.347 L9.810,11.216 L11.789,11.216 L11.789,21.151 L1.835,21.151 C0.824,21.151 0.003,20.332 0.003,19.314 L0.003,1.826 C0.003,0.812 0.824,-0.011 1.835,-0.011 L19.284,-0.011 C20.295,-0.011 21.116,0.812 21.116,1.826 L21.116,19.314 C21.116,20.332 20.295,21.151 19.284,21.151 Z"></path>
</g>
</defs>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">
<defs>
<g id="i_tumblr">
<path d="M267.393,4017.64a1.37,1.37,0,0,1-1.525-1.53v-4.56h2.957v-2.64H265.88v-3.93h-2.322a0.131,0.131,0,0,0-.114.12,4.753,4.753,0,0,1-3.119,4.18v2.27h1.83v4.8c0,1.74,1.082,4.2,4.534,4.15a4.3,4.3,0,0,0,2.746-.91l-0.763-2.21A3.993,3.993,0,0,1,267.393,4017.64Z" transform="translate(-260.312 -4004.97)"></path>
</g>
</defs>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">
<defs>
<g id="i_email">
<path d="M291.988,4005.99v14h18v-14h-18Zm16.14,1.55-7.139,6-7.139-6h14.278Zm-14.64,10.9v-9.2l7.5,6.31,7.5-6.31v9.2h-15Z" transform="translate(-292 -4006)"></path>
</g>
</defs>
</svg>

display:flex on the parent item li with align-items to vertical align center the SVG.
.wrapper ul.socialmedia-menu li{
display: -webkit-flex; display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
.wrapper {
width: 300px;
margin: 50px auto;
border: 2px solid grey;
}
.wrapper ul.socialmedia-menu {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0px;
padding: 0px;
}
.wrapper ul.socialmedia-menu li {
list-style: none;
border: 1px solid blue;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
.wrapper ul.socialmedia-menu li a svg {
width: 30px;
height: auto;
}
<div class="wrapper">
<ul class="socialmedia-menu">
<li>
<svg class="i_instagram" preserveAspectRatio="xMidYMid" width="18" height="18" viewBox="0 0 18 18"><use xlink:href="#i_instagram"></use></svg>
</li>
<li>
<svg class="i_twitter" preserveAspectRatio="xMidYMid" width="18.438" height="15" viewBox="0 0 18.438 15"><use xlink:href="#i_twitter"></use></svg>
</li>
<li>
<a href="#"><svg class="i_pinterest" preserveAspectRatio="xMidYMid" width="17.031" height="17.03" viewBox="0 0 17.031 17.03"><use xlink:href="#i_pinterest"></use>
</svg></a>
</li>
<li>
<svg class="i_facebook" preserveAspectRatio="xMidYMid" width="21.125" height="21.16" viewBox="0 0 21.125 21.16"><use xlink:href="#i_facebook"></use></svg>
</li>
<li>
<svg class="i_tumblr" preserveAspectRatio="xMidYMid" width="9.126" height="15.53" viewBox="0 0 9.126 15.53"><use xlink:href="#i_tumblr"></use></svg>
</li>
<li>
<svg class="i_email" preserveAspectRatio="xMidYMid" width="18" height="14" viewBox="0 0 18 14"><use xlink:href="#i_email"></use></svg>
</li>
</ul>
</div>
<!--- SVG DEFINITIONS : You can skip looking at it :) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">
<defs>
<g id="i_instagram">
<path d="M118.989,4005.62c2.4,0,2.689.01,3.638,0.06a4.811,4.811,0,0,1,1.672.31,2.807,2.807,0,0,1,1.036.67,2.765,2.765,0,0,1,.673,1.04,4.919,4.919,0,0,1,.31,1.67c0.043,0.95.052,1.23,0.052,3.64s-0.009,2.68-.052,3.63a5.054,5.054,0,0,1-.31,1.68,2.728,2.728,0,0,1-.673,1.03,2.687,2.687,0,0,1-1.036.67,4.811,4.811,0,0,1-1.672.31c-0.949.05-1.233,0.06-3.638,0.06s-2.689-.01-3.638-0.06a4.817,4.817,0,0,1-1.672-.31,2.684,2.684,0,0,1-1.035-.67,2.728,2.728,0,0,1-.673-1.03,5.027,5.027,0,0,1-.31-1.68c-0.044-.95-0.053-1.23-0.053-3.63s0.009-2.69.053-3.64a4.894,4.894,0,0,1,.31-1.67,2.765,2.765,0,0,1,.673-1.04,2.8,2.8,0,0,1,1.035-.67,4.817,4.817,0,0,1,1.672-.31c0.95-.05,1.234-0.06,3.638-0.06m0-1.62c-2.445,0-2.751.01-3.712,0.06a6.6,6.6,0,0,0-2.185.41,4.6,4.6,0,0,0-2.633,2.64,6.543,6.543,0,0,0-.419,2.18c-0.044.96-.054,1.27-0.054,3.72s0.01,2.75.054,3.71a6.543,6.543,0,0,0,.419,2.18,4.366,4.366,0,0,0,1.038,1.6,4.429,4.429,0,0,0,1.595,1.04,6.839,6.839,0,0,0,2.185.42c0.961,0.04,1.267.05,3.712,0.05s2.752-.01,3.712-0.05a6.84,6.84,0,0,0,2.186-.42,4.429,4.429,0,0,0,1.595-1.04,4.366,4.366,0,0,0,1.038-1.6,6.521,6.521,0,0,0,.418-2.18c0.044-.96.055-1.27,0.055-3.71s-0.011-2.76-.055-3.72a6.521,6.521,0,0,0-.418-2.18,4.6,4.6,0,0,0-2.633-2.64,6.6,6.6,0,0,0-2.186-.41c-0.96-.05-1.266-0.06-3.712-0.06h0Zm0,4.38a4.625,4.625,0,1,0,4.624,4.63A4.625,4.625,0,0,0,118.989,4008.38Zm0,7.63a3.005,3.005,0,1,1,3-3A3.005,3.005,0,0,1,118.989,4016.01Zm5.887-7.81a1.081,1.081,0,1,1-1.081-1.08A1.078,1.078,0,0,1,124.876,4008.2Z" transform="translate(-110 -4004)"></path>
</g>
</defs>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">
<defs>
<g id="i_twitter">
<path d="M164.2,4007.27a7.544,7.544,0,0,1-2.174.59,3.8,3.8,0,0,0,1.664-2.09,7.673,7.673,0,0,1-2.4.92,3.784,3.784,0,0,0-6.549,2.59,3.871,3.871,0,0,0,.1.86,10.749,10.749,0,0,1-7.8-3.95,3.713,3.713,0,0,0-.512,1.9,3.788,3.788,0,0,0,1.684,3.15,3.818,3.818,0,0,1-1.715-.47v0.04a3.794,3.794,0,0,0,3.036,3.72,4.077,4.077,0,0,1-1,.13,4.161,4.161,0,0,1-.712-0.07,3.794,3.794,0,0,0,3.536,2.63,7.628,7.628,0,0,1-4.7,1.62,8.942,8.942,0,0,1-.9-0.05,10.766,10.766,0,0,0,16.572-9.07c0-.17,0-0.33-0.011-0.49A7.768,7.768,0,0,0,164.2,4007.27Z" transform="translate(-145.75 -4005.5)"></path>
</g>
</defs>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">
<defs>
<g id="i_pinterest">
<path d="M191.98,4004.48a8.508,8.508,0,0,0-3.415,16.3,7.452,7.452,0,0,1,.148-1.95c0.164-.69,1.095-4.64,1.095-4.64a3.235,3.235,0,0,1-.272-1.34c0-1.26.731-2.21,1.64-2.21a1.145,1.145,0,0,1,1.148,1.28,18.34,18.34,0,0,1-.751,3.02,1.318,1.318,0,0,0,1.342,1.64c1.612,0,2.7-2.07,2.7-4.52,0-1.87-1.256-3.26-3.54-3.26a4.025,4.025,0,0,0-4.188,4.07,2.473,2.473,0,0,0,.561,1.67,0.406,0.406,0,0,1,.122.47c-0.041.16-.134,0.54-0.173,0.69a0.294,0.294,0,0,1-.426.21,3.283,3.283,0,0,1-1.742-3.25c0-2.42,2.038-5.32,6.08-5.32a5.085,5.085,0,0,1,5.385,4.88c0,3.33-1.855,5.83-4.59,5.83a2.449,2.449,0,0,1-2.078-1.06s-0.494,1.96-.6,2.34a7.166,7.166,0,0,1-.856,1.82,8.711,8.711,0,0,0,2.411.35A8.51,8.51,0,0,0,191.98,4004.48Z" transform="translate(-183.469 -4004.47)"></path>
</g>
</defs>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">
<defs>
<g id="i_facebook">
<path d="M19.284,21.151 L15.498,21.151 L15.498,11.216 L18.433,11.216 L18.653,8.347 L15.498,8.347 L15.498,7.447 L15.498,6.418 L15.498,6.106 C15.498,5.334 16.187,5.059 16.957,5.059 C17.726,5.059 18.551,5.298 18.551,5.298 L19.045,2.358 C19.045,2.358 17.993,2.002 15.498,2.002 C13.966,2.002 13.075,2.586 12.427,3.446 C11.811,4.258 11.789,5.569 11.789,6.418 L11.789,6.565 L11.789,7.447 L11.789,8.347 L9.810,8.347 L9.810,11.216 L11.789,11.216 L11.789,21.151 L1.835,21.151 C0.824,21.151 0.003,20.332 0.003,19.314 L0.003,1.826 C0.003,0.812 0.824,-0.011 1.835,-0.011 L19.284,-0.011 C20.295,-0.011 21.116,0.812 21.116,1.826 L21.116,19.314 C21.116,20.332 20.295,21.151 19.284,21.151 Z"></path>
</g>
</defs>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">
<defs>
<g id="i_tumblr">
<path d="M267.393,4017.64a1.37,1.37,0,0,1-1.525-1.53v-4.56h2.957v-2.64H265.88v-3.93h-2.322a0.131,0.131,0,0,0-.114.12,4.753,4.753,0,0,1-3.119,4.18v2.27h1.83v4.8c0,1.74,1.082,4.2,4.534,4.15a4.3,4.3,0,0,0,2.746-.91l-0.763-2.21A3.993,3.993,0,0,1,267.393,4017.64Z" transform="translate(-260.312 -4004.97)"></path>
</g>
</defs>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">
<defs>
<g id="i_email">
<path d="M291.988,4005.99v14h18v-14h-18Zm16.14,1.55-7.139,6-7.139-6h14.278Zm-14.64,10.9v-9.2l7.5,6.31,7.5-6.31v9.2h-15Z" transform="translate(-292 -4006)"></path>
</g>
</defs>
</svg>