vertical center svg and text inline with css - html

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>

Related

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>

CSS: transition only affecting last element

So I have 3 social media buttons on my website. I am adding a hover effect to them so yhey would turn red with a smooth transition effect.
But for some reason the transition effect is onlty applied to the last svg icon..
Why and how can I change it so it will be applied to all of them
<div class="socials">
<svg xmlns="http://www.w3.org/2000/svg" width="25.029" height="25.029" viewBox="0 0 25.029 25.029">
<g id="Icon_feather-instagram" data-name="Icon feather-instagram" transform="translate(1.5 1.5)">
<path id="Path_1" data-name="Path 1" d="M8.507,3H19.522a5.507,5.507,0,0,1,5.507,5.507V19.522a5.507,5.507,0,0,1-5.507,5.507H8.507A5.507,5.507,0,0,1,3,19.522V8.507A5.507,5.507,0,0,1,8.507,3Z" transform="translate(-3 -3)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path id="Path_2" data-name="Path 2" d="M20.829,15.695a4.406,4.406,0,1,1-3.712-3.712,4.406,4.406,0,0,1,3.712,3.712Z" transform="translate(-5.408 -5.374)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path id="Path_3" data-name="Path 3" d="M26.25,9.75h0" transform="translate(-9.177 -4.793)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
</g>
</svg>
</div>
<div class="socials">
<svg xmlns="http://www.w3.org/2000/svg" width="24.797" height="26.183" viewBox="0 0 24.797 26.183">
<path id="Icon_feather-github" data-name="Icon feather-github" d="M10.71,21.316C5.2,22.968,5.2,18.562,3,18.011M18.42,24.62V20.357a3.712,3.712,0,0,0-1.035-2.875c3.459-.386,7.093-1.7,7.093-7.71a5.991,5.991,0,0,0-1.651-4.13,5.584,5.584,0,0,0-.1-4.153s-1.3-.386-4.307,1.63a14.738,14.738,0,0,0-7.71,0C7.7,1.1,6.4,1.489,6.4,1.489a5.584,5.584,0,0,0-.1,4.153A5.992,5.992,0,0,0,4.652,9.805c0,5.97,3.635,7.281,7.093,7.71a3.712,3.712,0,0,0-1.035,2.842V24.62" transform="translate(-1.181 0.063)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
</svg>
</div>
<div class="socials">
<svg xmlns="http://www.w3.org/2000/svg" width="23.131" height="23.131" viewBox="0 0 23.131 23.131">
<path id="Icon_awesome-linkedin" data-name="Icon awesome-linkedin" d="M21.478,2.25H1.647A1.659,1.659,0,0,0,0,3.918v19.8a1.659,1.659,0,0,0,1.647,1.668H21.478a1.664,1.664,0,0,0,1.652-1.668V3.918A1.664,1.664,0,0,0,21.478,2.25ZM6.991,22.076H3.563V11.038H7V22.076ZM5.277,9.53A1.988,1.988,0,1,1,7.264,7.542,1.989,1.989,0,0,1,5.277,9.53ZM19.842,22.076H16.413v-5.37c0-1.28-.026-2.927-1.781-2.927-1.786,0-2.06,1.394-2.06,2.835v5.463H9.144V11.038h3.289v1.508h.046a3.611,3.611,0,0,1,3.248-1.781c3.47,0,4.115,2.287,4.115,5.261Z" transform="translate(0 -2.25)" fill="#fff"/>
</svg>
</div>
.socials:hover path{
fill: #FF4141;
transition: 0.5s ease;
}

It's because they have none as the initial value for the property fill, while the last one has #FFF. It's impossible to make a transition from no value. Replacing fill="none" by fill="#fff" in the path tags worked for me.
If you need them to be transparent, you can use a rgba value instead (rgba(255,255,255,0)).

How to make the following SVG fit its parent (horizontally and vertically)?

Live reproduction: https://codepen.io/alexcheninfo/pen/dZqmLv
This is the SVG:
<svg class="line-chart" width="860" height="405"></svg>
This is the CSS of the container:
.common-section {
position: relative;
width: 100%;
background-color: red;
margin-bottom: 30px;
}
Screenshot:

Two things:
You are missing the viewBox attribute.
Adding preserveAspectRatio="xMidYMid meet" will maintain the original aspect ratio as the image scales. If you need to support IE 11 or below, then you either need to use CSS to preserve the aspect ratio (see http://www.mademyday.de/css-height-equals-width-with-pure-css.html) or you could use JS to automate that for you (see https://gist.github.com/Heydon/369185d08d9ce2426f01863625e95525).
Here’s a working version of your CodePen demo:
https://codepen.io/tedw/pen/YEOLPr?editors=1100
FWIW, here are some good resources regarding scaling SVGs:
https://css-tricks.com/scale-svg/
https://codepen.io/jonitrythall/post/preserveaspectratio-in-svg
Hope that helps!
UPDATE:
I imported your SVG into Illustrator and did some optimization (including running it through https://jakearchibald.github.io/svgomg/). Here’s the final code:
<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 522 213" preserveAspectRatio="xMidYMid meet" style="font-family: Helvetica, sans-serif; font-size: 6px;" fill="#000">
<g transform="translate(20 60)">
<path d="M490 128.2l-71.2 5-71-.3L63-57l-71 176.3"/>
<circle cx="489.9" cy="128.2" r="3"/>
<circle cx="418.8" cy="133.4" r="3"/>
<circle cx="347.7" cy="132.9" r="3"/>
<circle cx="63.2" cy="-57" r="3"/>
<circle cx="-7.9" cy="119.3" r="3"/>
</g>
<text transform="translate(498.37 210.08)">17/10/18</text>
<text transform="translate(427.266 210.08)">17/10/17</text>
<text transform="translate(356.16 210.08)">17/10/16</text>
<text transform="translate(71.735 210.08)">17/10/12</text>
<text transform="translate(.85 210.08)">17/10/11</text>
<text transform="translate(0 201.83)">0</text>
<text transform="translate(0 179.485)">100</text>
<text transform="translate(0 157.137)">200</text>
<text transform="translate(0 134.793)">300</text>
<text transform="translate(0 112.47)">400</text>
<text transform="translate(0 90.123)">500</text>
<text transform="translate(0 67.78)">600</text>
<text transform="translate(0 45.435)">700</text>
<text transform="translate(0 23.095)">800</text>
<g fill="none" stroke="#000">
<path d="M12 200.6h498"/>
<path d="M12 178.3h498"/>
<path d="M12 156h498"/>
<path d="M12 133.6h498"/>
<path d="M12 111.3h498"/>
<path d="M12 89h498"/>
<path d="M12 66.6h498"/>
<path d="M12 44.3h498"/>
<path d="M12 21.8h498"/>
</g>
</svg>

Why Are Instances of Inline SVGs Turning Into Black Boxes When Previous Instances Have a Parent that's Display: None?

I am trying to make a page that has two navs because the ordering and placement of the icons needs to change between mobile and desktop.
I will be duplicating the same inline SVG icons between the navs, though.
Here is a codepen that demonstrates the behavior in Chrome. In safari it seems fine.
https://codepen.io/stephen_marsh/pen/RZaxqO
And because StackOverflow is nagging me, here is the code:
HTML:
<nav class="nav-mobile">
<div class="nav-left">
<button class="button-circle"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
<defs>
<path id="hamburger-a" d="M0.96,-3.55271368e-15 L15.04,-3.55271368e-15 C15.552,-3.55271368e-15 16,0.544352952 16,1.16647061 C16,1.78858827 15.552,2.33294122 15.04,2.33294122 L0.96,2.33294122 C0.448,2.33294122 0,1.78858827 0,1.16647061 C0,0.544352952 0.448,-3.55271368e-15 0.96,-3.55271368e-15 Z M0.96,5.44352952 L15.04,5.44352952 C15.552,5.44352952 16,5.98788247 16,6.61000013 C16,7.23211779 15.552,7.77647075 15.04,7.77647075 L0.96,7.77647075 C0.448,7.77647075 0,7.23211779 0,6.61000013 C0,5.98788247 0.448,5.44352952 0.96,5.44352952 Z M0.96,10.887059 L15.04,10.887059 C15.552,10.887059 16,11.431412 16,12.0535297 C16,12.6756473 15.552,13.2200003 15.04,13.2200003 L0.96,13.2200003 C0.448,13.2200003 0,12.6756473 0,12.0535297 C0,11.431412 0.448,10.887059 0.96,10.887059 Z"/>
</defs>
<g fill="none" fill-rule="evenodd">
<polygon points="0 0 24 0 24 24 0 24" opacity="0"/>
<g transform="translate(4 5)">
<mask id="hamburger-b" fill="#fff">
<use xlink:href="#hamburger-a"/>
</mask>
<use fill="#9E9E9E" xlink:href="#hamburger-a"/>
<g fill="#424242" mask="url(#hamburger-b)">
<rect width="24" height="24" transform="translate(-4 -5)"/>
</g>
</g>
</g>
</svg>
</button>
<button class="button-circle"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
<defs>
<path id="covers-a" d="M2,9.21052632 L6.21052632,9.21052632 L6.21052632,5 L2,5 L2,9.21052632 L2,9.21052632 Z M2,14.4736842 L6.21052632,14.4736842 L6.21052632,10.2631579 L2,10.2631579 L2,14.4736842 L2,14.4736842 Z M7.26315789,14.4736842 L11.4736842,14.4736842 L11.4736842,10.2631579 L7.26315789,10.2631579 L7.26315789,14.4736842 L7.26315789,14.4736842 Z M12.5263158,14.4736842 L16.7368421,14.4736842 L16.7368421,10.2631579 L12.5263158,10.2631579 L12.5263158,14.4736842 L12.5263158,14.4736842 Z M7.26315789,9.21052632 L11.4736842,9.21052632 L11.4736842,5 L7.26315789,5 L7.26315789,9.21052632 L7.26315789,9.21052632 Z M12.5263158,5 L12.5263158,9.21052632 L16.7368421,9.21052632 L16.7368421,5 L12.5263158,5 L12.5263158,5 Z M17.7894737,14.4736842 L22,14.4736842 L22,10.2631579 L17.7894737,10.2631579 L17.7894737,14.4736842 L17.7894737,14.4736842 Z M2,19.7368421 L6.21052632,19.7368421 L6.21052632,15.5263158 L2,15.5263158 L2,19.7368421 L2,19.7368421 Z M7.26315789,19.7368421 L11.4736842,19.7368421 L11.4736842,15.5263158 L7.26315789,15.5263158 L7.26315789,19.7368421 L7.26315789,19.7368421 Z M12.5263158,19.7368421 L16.7368421,19.7368421 L16.7368421,15.5263158 L12.5263158,15.5263158 L12.5263158,19.7368421 L12.5263158,19.7368421 Z M17.7894737,19.7368421 L22,19.7368421 L22,15.5263158 L17.7894737,15.5263158 L17.7894737,19.7368421 L17.7894737,19.7368421 Z M17.7894737,5 L17.7894737,9.21052632 L22,9.21052632 L22,5 L17.7894737,5 L17.7894737,5 Z"/>
</defs>
<g fill="none" fill-rule="evenodd">
<polygon points="0 0 24 0 24 24 0 24" opacity="0"/>
<mask id="covers-b" fill="#fff">
<use xlink:href="#covers-a"/>
</mask>
<use fill="#BDBDBD" xlink:href="#covers-a"/>
<g fill="#424242" mask="url(#covers-b)">
<rect width="24" height="24"/>
</g>
</g>
</svg>
</button>
</div>
<div class="nav-right">
<button class="button-circle"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
<defs>
<path id="empty-a" d="M12.96875,1.55555556 C12.734375,1.32222222 11.484375,0.388888889 11.25,0.233333333 C11.015625,-1.77635684e-15 10.625,-1.77635684e-15 10.390625,-1.77635684e-15 L2.96875,-1.77635684e-15 C2.734375,-1.77635684e-15 2.34375,0.0777777778 2.109375,0.233333333 C1.875,0.466666667 0.625,1.4 0.390625,1.55555556 C0.15625,1.78888889 0,2.02222222 0,2.48888889 C0.078125,2.87777778 1.484375,12.4444444 1.484375,12.4444444 C1.5625,12.6777778 1.875,12.9111111 2.109375,12.9111111 L11.171875,12.9111111 C11.40625,12.9111111 11.71875,12.6777778 11.796875,12.4444444 C11.796875,12.4444444 13.203125,2.87777778 13.28125,2.48888889 C13.359375,2.02222222 13.203125,1.71111111 12.96875,1.55555556 L12.96875,1.55555556 Z M10,4.9 C10,4.9 10,5.13333333 9.921875,5.52222222 L9.921875,5.52222222 L9.921875,5.67777778 C9.765625,6.53333333 9.296875,7.31111111 8.59375,7.77777778 C8.046875,8.16666667 7.421875,8.32222222 6.796875,8.32222222 C6.09375,8.32222222 5.46875,8.08888889 5,7.77777778 C4.296875,7.31111111 3.75,6.53333333 3.671875,5.67777778 L3.671875,5.52222222 L3.671875,5.52222222 C3.59375,5.21111111 3.59375,4.9 3.59375,4.9 C3.59375,4.9 3.59375,4.9 3.59375,4.82222222 C3.59375,4.82222222 3.59375,4.82222222 3.59375,4.74444444 C3.59375,4.66666667 3.671875,4.51111111 3.75,4.43333333 C3.828125,4.35555556 3.984375,4.27777778 4.0625,4.27777778 L4.0625,4.27777778 L4.140625,4.27777778 L4.140625,4.27777778 C4.296875,4.27777778 4.453125,4.35555556 4.53125,4.51111111 C4.609375,4.58888889 4.609375,4.66666667 4.609375,4.74444444 C4.609375,4.74444444 4.6875,4.97777778 4.6875,5.28888889 L4.6875,5.44444444 L4.6875,5.44444444 C4.765625,5.83333333 5,6.22222222 5.3125,6.53333333 C5.703125,6.84444444 6.171875,7.07777778 6.71875,7.07777778 C7.265625,7.07777778 7.734375,6.84444444 8.125,6.53333333 C8.4375,6.22222222 8.671875,5.91111111 8.75,5.44444444 L8.75,5.44444444 L8.75,5.28888889 C8.828125,4.97777778 8.828125,4.74444444 8.828125,4.74444444 C8.828125,4.66666667 8.828125,4.58888889 8.90625,4.51111111 C8.984375,4.35555556 9.140625,4.27777778 9.296875,4.27777778 L9.296875,4.27777778 L9.375,4.27777778 L9.375,4.27777778 C9.53125,4.27777778 9.609375,4.35555556 9.6875,4.43333333 C9.765625,4.51111111 9.84375,4.58888889 9.84375,4.74444444 C10,4.82222222 10,4.82222222 10,4.9 L10,4.9 L10,4.9 Z M11.40625,2.1 L11.40625,2.1 L10.703125,2.1 L9.609375,2.1 L7.5,2.1 L5.78125,2.1 L3.671875,2.1 L2.578125,2.1 L2.03125,2.1 L2.03125,2.1 C1.875,2.1 1.796875,2.02222222 1.796875,1.86666667 C1.796875,1.78888889 1.796875,1.71111111 1.875,1.71111111 L1.875,1.71111111 L2.734375,1.08888889 L2.734375,1.08888889 C2.734375,1.08888889 2.734375,1.08888889 2.8125,1.01111111 L2.8125,1.01111111 C2.890625,0.933333333 3.046875,0.855555556 3.203125,0.855555556 L3.203125,0.855555556 L10.078125,0.855555556 L10.078125,0.855555556 C10.234375,0.855555556 10.390625,0.933333333 10.46875,1.01111111 L10.46875,1.01111111 C10.46875,1.01111111 10.46875,1.01111111 10.546875,1.08888889 L10.546875,1.08888889 L11.40625,1.71111111 L11.484375,1.71111111 C11.5625,1.78888889 11.5625,1.78888889 11.5625,1.86666667 C11.640625,1.94444444 11.484375,2.1 11.40625,2.1 L11.40625,2.1 Z"/>
</defs>
<g fill="none" fill-rule="evenodd" transform="translate(5 6)">
<mask id="empty-b" fill="#fff">
<use xlink:href="#empty-a"/>
</mask>
<use fill="#BDBDBD" xlink:href="#empty-a"/>
<g fill="#424242" mask="url(#empty-b)">
<rect width="24" height="24" transform="translate(-5 -6)"/>
</g>
</g>
</svg>
</button>
</div>
</nav>
<nav class="nav-desktop">
<div class="nav-left">
<button class="button-circle"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
<defs>
<path id="hamburger-a" d="M0.96,-3.55271368e-15 L15.04,-3.55271368e-15 C15.552,-3.55271368e-15 16,0.544352952 16,1.16647061 C16,1.78858827 15.552,2.33294122 15.04,2.33294122 L0.96,2.33294122 C0.448,2.33294122 0,1.78858827 0,1.16647061 C0,0.544352952 0.448,-3.55271368e-15 0.96,-3.55271368e-15 Z M0.96,5.44352952 L15.04,5.44352952 C15.552,5.44352952 16,5.98788247 16,6.61000013 C16,7.23211779 15.552,7.77647075 15.04,7.77647075 L0.96,7.77647075 C0.448,7.77647075 0,7.23211779 0,6.61000013 C0,5.98788247 0.448,5.44352952 0.96,5.44352952 Z M0.96,10.887059 L15.04,10.887059 C15.552,10.887059 16,11.431412 16,12.0535297 C16,12.6756473 15.552,13.2200003 15.04,13.2200003 L0.96,13.2200003 C0.448,13.2200003 0,12.6756473 0,12.0535297 C0,11.431412 0.448,10.887059 0.96,10.887059 Z"/>
</defs>
<g fill="none" fill-rule="evenodd">
<polygon points="0 0 24 0 24 24 0 24" opacity="0"/>
<g transform="translate(4 5)">
<mask id="hamburger-b" fill="#fff">
<use xlink:href="#hamburger-a"/>
</mask>
<use fill="#9E9E9E" xlink:href="#hamburger-a"/>
<g fill="#424242" mask="url(#hamburger-b)">
<rect width="24" height="24" transform="translate(-4 -5)"/>
</g>
</g>
</g>
</svg>
</button>
<button class="button-circle"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
<defs>
<path id="covers-a" d="M2,9.21052632 L6.21052632,9.21052632 L6.21052632,5 L2,5 L2,9.21052632 L2,9.21052632 Z M2,14.4736842 L6.21052632,14.4736842 L6.21052632,10.2631579 L2,10.2631579 L2,14.4736842 L2,14.4736842 Z M7.26315789,14.4736842 L11.4736842,14.4736842 L11.4736842,10.2631579 L7.26315789,10.2631579 L7.26315789,14.4736842 L7.26315789,14.4736842 Z M12.5263158,14.4736842 L16.7368421,14.4736842 L16.7368421,10.2631579 L12.5263158,10.2631579 L12.5263158,14.4736842 L12.5263158,14.4736842 Z M7.26315789,9.21052632 L11.4736842,9.21052632 L11.4736842,5 L7.26315789,5 L7.26315789,9.21052632 L7.26315789,9.21052632 Z M12.5263158,5 L12.5263158,9.21052632 L16.7368421,9.21052632 L16.7368421,5 L12.5263158,5 L12.5263158,5 Z M17.7894737,14.4736842 L22,14.4736842 L22,10.2631579 L17.7894737,10.2631579 L17.7894737,14.4736842 L17.7894737,14.4736842 Z M2,19.7368421 L6.21052632,19.7368421 L6.21052632,15.5263158 L2,15.5263158 L2,19.7368421 L2,19.7368421 Z M7.26315789,19.7368421 L11.4736842,19.7368421 L11.4736842,15.5263158 L7.26315789,15.5263158 L7.26315789,19.7368421 L7.26315789,19.7368421 Z M12.5263158,19.7368421 L16.7368421,19.7368421 L16.7368421,15.5263158 L12.5263158,15.5263158 L12.5263158,19.7368421 L12.5263158,19.7368421 Z M17.7894737,19.7368421 L22,19.7368421 L22,15.5263158 L17.7894737,15.5263158 L17.7894737,19.7368421 L17.7894737,19.7368421 Z M17.7894737,5 L17.7894737,9.21052632 L22,9.21052632 L22,5 L17.7894737,5 L17.7894737,5 Z"/>
</defs>
<g fill="none" fill-rule="evenodd">
<polygon points="0 0 24 0 24 24 0 24" opacity="0"/>
<mask id="covers-b" fill="#fff">
<use xlink:href="#covers-a"/>
</mask>
<use fill="#BDBDBD" xlink:href="#covers-a"/>
<g fill="#424242" mask="url(#covers-b)">
<rect width="24" height="24"/>
</g>
</g>
</svg>
</button>
</div>
<div class="nav-right">
<button class="button-circle"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
<defs>
<path id="search-a" d="M16.3217424,14.8346938 C15.9890463,14.568364 15.7228895,13.9025394 15.9225071,13.5030447 C16.52136,12.3711429 16.7875168,11.1060762 16.5878992,9.70784463 C16.2552031,6.97796389 14.1259486,4.71416034 11.3978413,4.3146656 C7.07279299,3.58225857 3.41313676,7.31087617 4.0785288,11.6387359 C4.54430323,14.3686166 6.74009697,16.4992553 9.46820433,16.8321676 C10.8655276,17.0319149 12.1297725,16.7655851 13.260939,16.166343 C13.593635,15.9665956 14.1924878,16.2329254 14.5251838,16.5658377 L17.519448,19.7617957 C18.1183009,20.4276202 19.1829281,20.3610378 19.7152418,19.6286308 C20.1810162,19.0293886 20.0479378,18.1638167 19.5156241,17.631157 L16.3217424,14.8346938 L16.3217424,14.8346938 Z M5.94162652,10.5068341 C5.94162652,8.10986566 7.87126344,6.11239195 10.2666748,6.11239195 C12.6620861,6.11239195 14.591723,8.0432832 14.591723,10.5068341 C14.591723,12.9038026 12.6620861,14.9012763 10.2666748,14.9012763 C7.87126344,14.9012763 5.94162652,12.970385 5.94162652,10.5068341 L5.94162652,10.5068341 Z"/>
</defs>
<g fill="none" fill-rule="evenodd">
<mask id="search-b" fill="#fff">
<use xlink:href="#search-a"/>
</mask>
<use fill="#212121" xlink:href="#search-a"/>
<g fill="#424242" mask="url(#search-b)">
<rect width="24" height="24"/>
</g>
</g>
</svg>
</button>
<button class="button-circle"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
<defs>
<path id="empty-a" d="M12.96875,1.55555556 C12.734375,1.32222222 11.484375,0.388888889 11.25,0.233333333 C11.015625,-1.77635684e-15 10.625,-1.77635684e-15 10.390625,-1.77635684e-15 L2.96875,-1.77635684e-15 C2.734375,-1.77635684e-15 2.34375,0.0777777778 2.109375,0.233333333 C1.875,0.466666667 0.625,1.4 0.390625,1.55555556 C0.15625,1.78888889 0,2.02222222 0,2.48888889 C0.078125,2.87777778 1.484375,12.4444444 1.484375,12.4444444 C1.5625,12.6777778 1.875,12.9111111 2.109375,12.9111111 L11.171875,12.9111111 C11.40625,12.9111111 11.71875,12.6777778 11.796875,12.4444444 C11.796875,12.4444444 13.203125,2.87777778 13.28125,2.48888889 C13.359375,2.02222222 13.203125,1.71111111 12.96875,1.55555556 L12.96875,1.55555556 Z M10,4.9 C10,4.9 10,5.13333333 9.921875,5.52222222 L9.921875,5.52222222 L9.921875,5.67777778 C9.765625,6.53333333 9.296875,7.31111111 8.59375,7.77777778 C8.046875,8.16666667 7.421875,8.32222222 6.796875,8.32222222 C6.09375,8.32222222 5.46875,8.08888889 5,7.77777778 C4.296875,7.31111111 3.75,6.53333333 3.671875,5.67777778 L3.671875,5.52222222 L3.671875,5.52222222 C3.59375,5.21111111 3.59375,4.9 3.59375,4.9 C3.59375,4.9 3.59375,4.9 3.59375,4.82222222 C3.59375,4.82222222 3.59375,4.82222222 3.59375,4.74444444 C3.59375,4.66666667 3.671875,4.51111111 3.75,4.43333333 C3.828125,4.35555556 3.984375,4.27777778 4.0625,4.27777778 L4.0625,4.27777778 L4.140625,4.27777778 L4.140625,4.27777778 C4.296875,4.27777778 4.453125,4.35555556 4.53125,4.51111111 C4.609375,4.58888889 4.609375,4.66666667 4.609375,4.74444444 C4.609375,4.74444444 4.6875,4.97777778 4.6875,5.28888889 L4.6875,5.44444444 L4.6875,5.44444444 C4.765625,5.83333333 5,6.22222222 5.3125,6.53333333 C5.703125,6.84444444 6.171875,7.07777778 6.71875,7.07777778 C7.265625,7.07777778 7.734375,6.84444444 8.125,6.53333333 C8.4375,6.22222222 8.671875,5.91111111 8.75,5.44444444 L8.75,5.44444444 L8.75,5.28888889 C8.828125,4.97777778 8.828125,4.74444444 8.828125,4.74444444 C8.828125,4.66666667 8.828125,4.58888889 8.90625,4.51111111 C8.984375,4.35555556 9.140625,4.27777778 9.296875,4.27777778 L9.296875,4.27777778 L9.375,4.27777778 L9.375,4.27777778 C9.53125,4.27777778 9.609375,4.35555556 9.6875,4.43333333 C9.765625,4.51111111 9.84375,4.58888889 9.84375,4.74444444 C10,4.82222222 10,4.82222222 10,4.9 L10,4.9 L10,4.9 Z M11.40625,2.1 L11.40625,2.1 L10.703125,2.1 L9.609375,2.1 L7.5,2.1 L5.78125,2.1 L3.671875,2.1 L2.578125,2.1 L2.03125,2.1 L2.03125,2.1 C1.875,2.1 1.796875,2.02222222 1.796875,1.86666667 C1.796875,1.78888889 1.796875,1.71111111 1.875,1.71111111 L1.875,1.71111111 L2.734375,1.08888889 L2.734375,1.08888889 C2.734375,1.08888889 2.734375,1.08888889 2.8125,1.01111111 L2.8125,1.01111111 C2.890625,0.933333333 3.046875,0.855555556 3.203125,0.855555556 L3.203125,0.855555556 L10.078125,0.855555556 L10.078125,0.855555556 C10.234375,0.855555556 10.390625,0.933333333 10.46875,1.01111111 L10.46875,1.01111111 C10.46875,1.01111111 10.46875,1.01111111 10.546875,1.08888889 L10.546875,1.08888889 L11.40625,1.71111111 L11.484375,1.71111111 C11.5625,1.78888889 11.5625,1.78888889 11.5625,1.86666667 C11.640625,1.94444444 11.484375,2.1 11.40625,2.1 L11.40625,2.1 Z"/>
</defs>
<g fill="none" fill-rule="evenodd" transform="translate(5 6)">
<mask id="empty-b" fill="#fff">
<use xlink:href="#empty-a"/>
</mask>
<use fill="#BDBDBD" xlink:href="#empty-a"/>
<g fill="#424242" mask="url(#empty-b)">
<rect width="24" height="24" transform="translate(-5 -6)"/>
</g>
</g>
</svg>
</button>
</div>
</nav>
CSS:
nav.nav-desktop {
display: none;
}
#media only screen and (min-width: 48em) {
nav.nav-mobile {
display: none;
}
nav.nav-desktop {
display: initial;
z-index: 999;
width: 100%;
height: 96px;
position: fixed;
top: 0;
left: 0;
}
nav.nav-desktop .nav-left {
display: inline-block;
position: absolute;
top: 28px;
left: 24px;
}
nav.nav-desktop .nav-left button {
margin-left: 24px;
}
nav.nav-desktop .nav-right {
display: inline-block;
position: absolute;
top: 28px;
right: 24px;
}
nav.nav-desktop .nav-right button {
margin-right: 24px;
}
nav.nav-desktop .logo-container {
position: absolute;
top: 50%;
left: 50%;
width: 438px;
height: 72px;
margin: -36px 0 0 -219px;
}
}
Note how once you get into the desktop breakpoint, 3 of the 4 icons become black boxes.
Fyi: The "search" magnifying glass icon is removed on mobile as per the designer's comps, so that is never inside a "display: none" parent -- and so that still shows up fine on desktop.
Am I doing something wrong here? I am not experienced with SVGs
Is this a Chrome bug?

It is because you have duplicate id attributes. For instance you have two <mask> elements labelled id="hamburger-b".
If you have duplicate id attributes, it is browser dependent which one gets used. You might wonder why that would matter if the definitions are identical. Unfortunately, it turns out you happen to be setting the one that Chrome is choosing to display: none.
The solution is to change the ids of one of the duplicates. For example, change hamburger-a to hamburger-a2, hamburger-b to hamburger-b2, etc.

How do I use SVG icons in HTML?

I have an svg file with 3 icons.
When I import it via the <img> tag, I get the 3 icons one below each other.
I want to use the icons in a row, one next to the other.
How can I use them separately?
The .svg file:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="16.3px"
height="26.9px" viewBox="0 0 16.3 26.9" enable-background="new 0 0 16.3 26.9" xml:space="preserve">
<g id="bg">
</g>
<g id="ui">
<g>
<polygon points="8.1,0 10.3,4.3 15.2,5 11.7,8.3 12.5,13 8.1,10.8 3.8,13 4.6,8.3 1.1,5 6,4.3 "/>
<polygon fill="none" stroke="#000000" stroke-miterlimit="10" points="8.1,13 10.3,17.3 15.2,18 11.7,21.3 12.5,26 8.1,23.8
3.8,26 4.6,21.3 1.1,18 6,17.3 "/>
</g>
</g>
<g id="pop_ups">
</g>
</svg>
Thanks!

Use the SVG file as a sprite.
Create an icon-sized element, hiding the overflow:
.icon {
display: inline-block;
width: 16.3px;
height: 13.45px;
overflow: hidden;
}
Position the SVG within the element so the icon shows through:
.icon > img {
position: relative;
}
.darkStar > img {
top: 0;
}
.lightStar > img {
top: -13.45px;
}
Demo (using inline SVG instead of a linked <img>, which defeats the purpose, but is easier to demo here):
.icon {
display: inline-block;
width: 16.3px;
height: 13.45px;
overflow: hidden;
}
.icon > svg {
position: relative;
}
.darkStar > svg {
top: 0;
}
.lightStar > svg {
top: -13.45px;
}
<span class="icon lightStar">
<svg width="16.3px" height="26.9px">
<polygon points="8.1,0 10.3,4.3 15.2,5 11.7,8.3 12.5,13 8.1,10.8 3.8,13 4.6,8.3 1.1,5 6,4.3" />
<polygon points="8.1,13 10.3,17.3 15.2,18 11.7,21.3 12.5,26 8.1,23.8 3.8,26 4.6,21.3 1.1,18 6,17.3" fill="none" stroke="#000000" stroke-miterlimit="10" />
</svg>
</span>
<span class="icon darkStar">
<svg width="16.3px" height="26.9px">
<polygon points="8.1,0 10.3,4.3 15.2,5 11.7,8.3 12.5,13 8.1,10.8 3.8,13 4.6,8.3 1.1,5 6,4.3" />
<polygon points="8.1,13 10.3,17.3 15.2,18 11.7,21.3 12.5,26 8.1,23.8 3.8,26 4.6,21.3 1.1,18 6,17.3" fill="none" stroke="#000000" stroke-miterlimit="10" />
</svg>
</span>

You can use fragment identifiers to display only part of the SVG file in any particular img element.
The advantage of this approach is that the "individual sprites" in your SVG file are defined in your SVG file, so when using it elsewhere you don't need to know anything of the internal structure, you can just ask for what you want by name:
<button>
<img src="x.svg#star1" alt="*">
</button>
The most cross-platform-compatible solution is add some SVG views which define which part of the image to show for which ID fragment. The view syntax is similar to the global viewBox attribute of the root SVG element*:
<view id="star1" viewBox="0 0 10 10"/>
Here's a good blog post (with a live example) which explains the technique in great detail.
*note that I haven't calculated that viewBox value for your SVG, you'll have to figure it out yourself.

I'm not sure if you mean vertically or horizontally, but here's something I found from Codepen.io which has a lot of SVG samples you might want to go through.
http://codepen.io/jonnowitts/pen/waONVV
Here he has SVG's lined up vertically in a row.
<button type="button" id="positive">
<div class="content">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="42" viewBox="-9 0 38 40" preserveAspectRatio="xMidYMid meet">
<path class="check" fill="none" d="M0 20 L8 28 L25 10" stroke="white" stroke-width="3"/>
</svg>
<span>Positive</span>
</div>
</button>
<button id="negative">
<div class="content">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="42" viewBox="-9 0 38 40" preserveAspectRatio="xMidYMid meet">
<path class="cross-1" fill="none" d="M0 10 L20 30" stroke="white" stroke-width="3"/>
<path class="cross-2" fill="none" d="M20 10 L0 30" stroke="white" stroke-width="3"/>
</svg>
<span>Negative</span>
</div>
</button>
<button id="warning">
<div class="content">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="42" viewBox="-3 0 38 40" preserveAspectRatio="xMidYMid meet">
<polygon class="triangle"
stroke="white"
stroke-width="2"
fill="none"
points="15,4 0,34 30,34"
/>
<path class="exclaim-1" d="M15 14 L15 22 Z" stroke-width="4" stroke="white" fill="none" />
<path class="exclaim-2" d="M15 24 L15 29 Z" stroke-width="4" stroke="white" fill="none" />
</svg>
<span>Warning</span>
</div>
</button>