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

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

Related

vertical center svg and text inline with css

I wanna center vertical an icon and text, both in the same container, I tried to set up svg as inline-block element and use vertical-align: middle but I see its not on the middle. Any simple way to center them?
.icon{
display: inline-block;
vertical-align: middle;
height: .9rem;
margin-right: 0.25rem;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet" />
<div class="title">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 9.5 17" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M1 1l7.5 7.5-7.5 7.5"></path>
</svg>
<span>ABOUT ME</span>
</div>

Use flexbox
.icon{
height: .9rem;
margin-right: 0.25rem;
}
.title{
display: flex;
align-items:center
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet" />
<div class="title">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 9.5 17" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M1 1l7.5 7.5-7.5 7.5"></path>
</svg>
<span>ABOUT ME</span>
</div>

No CSS or external dependencies required:
<svg height="140px" fill="none" viewBox="0 0 700 170" stroke-width="20" stroke="currentColor" style="background:pink">
<g stroke-width="1" >
<path d="M100 35h800" stroke="green"/>
<path id="P" d="M100 95h800" stroke="red"/>
<path d="M100 135h800" stroke="green"/>
</g>
<path stroke-linecap="round" stroke-linejoin="round" d="M10 10l75 75-75 75"></path>
<text stroke-width="2">
<textPath href="#P" font-size="700%" fill="black" dominant-baseline="middle">
ABOUT ME
</textPath>
</text>
</svg>

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

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;

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>

Troubleshooting bizarre SVG behavior

I exported three svgs via Sketch as elements to be included in html, but one (twitter) is leaving me utterly perplexed.
All three svgs were created the same way, all three use #999999 as their stroke color, and have stroke-width: 2.
However, twitter's stroke appears significantly thinner & darker in color than it should.
Link to Codepen Example
Code in question
<li>
<a>
<svg width="26px" height="22px" viewBox="29 0 26 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 41 (35326) - http://www.bohemiancoding.com/sketch -->
<desc>Created with Sketch.</desc>
<defs>
<path d="M52.4856971,4.68997313 C51.7333146,5.02377149 50.9207961,5.24903418 50.0734261,5.34528278 C50.9419804,4.82581336 51.604159,4.00735892 51.9185059,3.02371183 C51.1053041,3.50836792 50.2032651,3.85650118 49.246557,4.04763316 C48.4811906,3.2284961 47.38781,2.71653543 46.1775743,2.71653543 C43.8555072,2.71653543 41.9762592,4.60123329 41.9762592,6.91461287 C41.9762592,7.24226769 42.0104274,7.56377899 42.0773969,7.87027277 C38.5867793,7.69961922 35.4843117,6.027897 33.4130388,3.4878895 C33.0508565,4.10906844 32.8458476,4.82581336 32.8458476,5.59785004 C32.8458476,7.05181833 33.5838795,8.33513305 34.7107449,9.09215222 C34.0205484,9.06484765 33.3788706,8.88054181 32.8116794,8.56653927 L32.8048458,8.62114841 C32.8048458,10.6491952 34.2604088,12.348222 36.1799751,12.730486 C35.8314601,12.8274172 35.4556105,12.8820264 35.0722439,12.8820264 C34.8002655,12.8820264 34.5399042,12.8547218 34.2795429,12.8069388 C34.820083,14.4725175 36.3720001,15.6868882 38.2088796,15.7223841 C36.7745009,16.848015 34.9560722,17.5176595 32.9886704,17.5176595 C32.646989,17.5176595 32.3121412,17.4964985 31.984127,17.454859 C33.8428741,18.6494339 36.0569698,19.346383 38.4275557,19.346383 C46.1707407,19.346383 50.4014403,12.9502878 50.4014403,7.40063419 C50.4014403,7.22383711 50.39324,7.03884866 50.3864063,6.86136896 C51.2078085,6.26612936 51.9185059,5.52890601 52.4856971,4.68997313 L52.4856971,4.68997313 Z" id="path-1"></path>
<mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="-2" y="-2" width="24.5015702" height="20.6298476">
<rect x="29.984127" y="0.716535433" width="24.5015702" height="20.6298476" fill="#999999"></rect>
<use xlink:href="#path-1" fill="black"></use>
</mask>
</defs>
<use id="Twitter" stroke="#999999" mask="url(#mask-2)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" xlink:href="#path-1"></use>
</svg>
</a>
</li>
I've looked over the svg code numerous times and couldn't spot anything obvious that would cause the issue I'm having.
Any suggestions/advice would be much appreciated!

Your issue is caused by the strange arrangement of your Twitter SVG. It appears to have an unnecessary <mask> element which has the effect of making the "walls" of that icon look thinner. At a guess, I'd say that it was an icon designed to be displayed as a fill, and someone has modified it and given it a stroke and no fill.
If you remove the mask, and adjust the stroke-width, the icon matches the others much better.
#media (max-width: 769px) {
#container-master {
display: none;
}
}
#container-master {
display: flex;
flex-direction: column;
justify-content: center;
height: 100px;
background-color: #000;
position: fixed;
z-index: -100;
bottom: 0px;
width: 100%; }
#container {
display: flex;
margin: 0; }
#container span {
color: #999999;
font-size: 2vw;
}
#media (max-width: 850px) {
#container span {
font-size: 17px;
}
}
#media (min-width: 1200px) {
#container span {
font-size: 24px;
}
}
* {
list-style: none;
margin: 0;
padding: 0; }
.cta-social {
flex: 1;
justify-content: center;
display: flex;
align-items: center;
}
.cta-social li {
display: inline-block;
}
.cta-social > li:first-child {
margin-right: 35px; }
.cta-social > li:last-child {
margin-left: 35px; }
#container > li:first-child {
margin-left: 22px;
flex: 1;
justify-content: flex-start;
display: flex;
align-items: center; }
#container > li:last-child {
margin-right: 30px;
flex: 1;
justify-content: flex-end;
display: flex;
align-items: center; }
.cta-last-li {
transform: translate3d(0, -11px, 0); }
.cta-last-li svg {
transform: translate3d(0, 11px, 0); }
.cta-last-li span {
transform: translate3d(0, 7px, 0);
display: inline-block; }
<div id="container-master">
<ul id="container">
<li>
<a href="#">
<span>© Boberson&Sons.</span>
</a>
</li>
<ul class="cta-social">
<li>
<a>
<svg width="13px" height="auto" viewBox="-2 -1 13 23" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 41 (35326) - http://www.bohemiancoding.com/sketch -->
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Facebook" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M9.1524685,0.477435398 C9.1524685,0.477435398 7.96904567,5.75242739e-14 6.69657162,2.84217094e-14 C5.42409757,-8.29900652e-16 3.14797652,0.193046611 3.14797623,2.54258452 C3.14797595,4.89212243 3.14797623,20.9876873 3.14797623,20.9876873" id="Path-26" stroke="#999999" stroke-width="2"></path>
<path d="M-2.25597319e-13,7.29773304 L8.24446303,7.29773304" id="Line" stroke="#999999" stroke-width="2" stroke-linecap="square"></path>
</g>
</svg>
</a>
</li>
<li>
<a>
<svg width="26px" height="22px" viewBox="29 0 26 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 41 (35326) - http://www.bohemiancoding.com/sketch -->
<desc>Created with Sketch.</desc>
<path d="M52.4856971,4.68997313 C51.7333146,5.02377149 50.9207961,5.24903418 50.0734261,5.34528278 C50.9419804,4.82581336 51.604159,4.00735892 51.9185059,3.02371183 C51.1053041,3.50836792 50.2032651,3.85650118 49.246557,4.04763316 C48.4811906,3.2284961 47.38781,2.71653543 46.1775743,2.71653543 C43.8555072,2.71653543 41.9762592,4.60123329 41.9762592,6.91461287 C41.9762592,7.24226769 42.0104274,7.56377899 42.0773969,7.87027277 C38.5867793,7.69961922 35.4843117,6.027897 33.4130388,3.4878895 C33.0508565,4.10906844 32.8458476,4.82581336 32.8458476,5.59785004 C32.8458476,7.05181833 33.5838795,8.33513305 34.7107449,9.09215222 C34.0205484,9.06484765 33.3788706,8.88054181 32.8116794,8.56653927 L32.8048458,8.62114841 C32.8048458,10.6491952 34.2604088,12.348222 36.1799751,12.730486 C35.8314601,12.8274172 35.4556105,12.8820264 35.0722439,12.8820264 C34.8002655,12.8820264 34.5399042,12.8547218 34.2795429,12.8069388 C34.820083,14.4725175 36.3720001,15.6868882 38.2088796,15.7223841 C36.7745009,16.848015 34.9560722,17.5176595 32.9886704,17.5176595 C32.646989,17.5176595 32.3121412,17.4964985 31.984127,17.454859 C33.8428741,18.6494339 36.0569698,19.346383 38.4275557,19.346383 C46.1707407,19.346383 50.4014403,12.9502878 50.4014403,7.40063419 C50.4014403,7.22383711 50.39324,7.03884866 50.3864063,6.86136896 C51.2078085,6.26612936 51.9185059,5.52890601 52.4856971,4.68997313 L52.4856971,4.68997313 Z" stroke="#999999" stroke-width="1.5" stroke-linejoin="round" fill="none"/>
</svg>
</a>
</li>
<li>
<a>
<svg width="24px" height="24px" viewBox="73 -1 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 41 (35326) - http://www.bohemiancoding.com/sketch -->
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Instagram" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(74.007937, 0.905512)">
<path d="M17.7680275,0 L4.10031403,0 C1.93825261,0 0,1.56153207 0,3.41318485 L0,17.0659243 C0,18.9431759 1.93825261,20.4791091 4.10031403,20.4791091 L17.7680275,20.4791091 C19.3312722,20.4791091 20.5015702,18.9431759 20.5015702,17.0659243 L20.5015702,3.41318485 C20.5015702,1.56153207 19.3312722,0 17.7680275,0 L17.7680275,0 Z" id="Path" stroke="#999999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M14.6439787,9.90198683 C14.6439787,12.6611242 12.683184,14.6279351 10.5887231,14.6279351 C7.82737689,14.6279351 5.85759148,12.6611242 5.85759148,9.90198683 C5.85759148,7.81961784 7.82737689,5.85117404 10.5887231,5.85117404 C12.683184,5.85199048 14.6439787,7.81961784 14.6439787,9.90198683 L14.6439787,9.90198683 Z" id="Path" stroke="#999999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M17.5727744,4.14458161 C17.5727744,4.29086096 17.4751479,4.38838053 17.3287081,4.38838053 L16.3524429,4.38838053 C16.2060031,4.38838053 16.1083766,4.29086096 16.1083766,4.14458161 L16.1083766,3.16938594 C16.1083766,3.02310659 16.2060031,2.92558702 16.3524429,2.92558702 L17.3287081,2.92558702 C17.4751479,2.92558702 17.5727744,3.02310659 17.5727744,3.16938594 L17.5727744,4.14458161 L17.5727744,4.14458161 Z" id="Path" fill="#999999"></path>
<path d="M0,7.31396755 L6.58979041,7.31396755 L0,7.31396755 Z" id="Path" stroke="#999999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M13.9117798,7.31396755 L20.5015702,7.31396755 L13.9117798,7.31396755 Z" id="Path-copy" stroke="#999999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</g>
</svg>
</a>
</li>
</ul>
<li class="cta-last-li">
<a href="mailto:studio#nothingandco.com">
<svg width="23px" height="auto" viewBox="19 554 26 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 41 (35326) - http://www.bohemiancoding.com/sketch -->
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Mail" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(20.000000, 555.000000)">
<rect id="Rectangle-8" stroke="#999999" stroke-width="2" x="0" y="0" width="23" height="16.56" rx="2"></rect>
<path d="M7.26658876e-14,2.76 L8.38793439,9.50160064 C10.1066808,10.8830017 12.8986286,10.8835758 14.6272352,9.50023346 L23,2.79980769" id="Path-28" stroke="#999999" stroke-width="2"></path>
<path d="M15.64,8.28 L22.6677778,14.9751562" id="Path-28-copy" stroke="#999999" stroke-width="2"></path>
<path d="M1.84,8.28 L8.86777778,14.9751562" id="Path-28-copy-2" stroke="#999999" stroke-width="2" transform="translate(4.430656, 10.748041) scale(-1, 1) translate(-4.430656, -10.748041) "></path>
</g>
</svg>
<span> bibbiddybob#bobmail.bob</span>
</a>
</li>
</ul>
</div>