How to downward a svg element? - html

Question

I'm working on a project and currently I meet a problem.
Here is my markup:
<a href="#">Here is a link icon.
<svg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M12.2068 1.79276C10.2975 -0.116585 7.2018 -0.116585 5.29246 1.79276L4.64288 2.44234C4.25236 2.83286 4.25236 3.46603 4.64288 3.85655C5.03341 4.24707 5.66657 4.24707 6.0571 3.85655L6.70667 3.20698C7.83497 2.07868 9.6643 2.07868 10.7926 3.20698C11.9209 4.33528 11.9209 6.16461 10.7926 7.29291L10.1425 7.94304C9.75195 8.33357 9.75194 8.96673 10.1425 9.35726C10.533 9.74778 11.1662 9.74778 11.5567 9.35726L12.2068 8.70712C14.1162 6.79778 14.1162 3.70211 12.2068 1.79276Z' fill='#076aff'/>
<path d='M3.85726 6.05638C4.24779 5.66586 4.24779 5.03269 3.85726 4.64217C3.46674 4.25165 2.83357 4.25165 2.44305 4.64217L1.79236 5.29286C-0.116985 7.2022 -0.116985 10.2979 1.79236 12.2072C3.70171 14.1166 6.79738 14.1166 8.70672 12.2072L9.35713 11.5568C9.74765 11.1663 9.74765 10.5331 9.35713 10.1426C8.9666 9.75207 8.33344 9.75207 7.94291 10.1426L7.29251 10.793C6.16421 11.9213 4.33488 11.9213 3.20658 10.793C2.07828 9.6647 2.07828 7.83537 3.20658 6.70707L3.85726 6.05638Z' fill='#076aff'/>
<path d='M8.20674 7.2071C8.59727 6.81658 8.59727 6.18341 8.20674 5.79289C7.81622 5.40237 7.18305 5.40237 6.79253 5.79289L5.73187 6.85355C5.34134 7.24408 5.34134 7.87724 5.73187 8.26776C6.12239 8.65829 6.75556 8.65829 7.14608 8.26776L8.20674 7.2071Z' fill='#076aff'/>
</svg>
</a>
The problem is the svg icon is a little bit higher than I expected, so I want to downward the svg downward 2 to 3 px without changing its size but change the svg`s position. How could I achieve it?

Answer 1

Try using flex. In this case you can omit using position: absolute; but can align your elements in this block.
.custom-link {
display: inline-flex;
align-items: center; /* align content vertically */
column-gap: 0.25rem; /* add gap between content items */
}
<p>Before using flex:</p>
<a href="#">Here is a link icon.
<svg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M12.2068 1.79276C10.2975 -0.116585 7.2018 -0.116585 5.29246 1.79276L4.64288 2.44234C4.25236 2.83286 4.25236 3.46603 4.64288 3.85655C5.03341 4.24707 5.66657 4.24707 6.0571 3.85655L6.70667 3.20698C7.83497 2.07868 9.6643 2.07868 10.7926 3.20698C11.9209 4.33528 11.9209 6.16461 10.7926 7.29291L10.1425 7.94304C9.75195 8.33357 9.75194 8.96673 10.1425 9.35726C10.533 9.74778 11.1662 9.74778 11.5567 9.35726L12.2068 8.70712C14.1162 6.79778 14.1162 3.70211 12.2068 1.79276Z' fill='#076aff'/>
<path d='M3.85726 6.05638C4.24779 5.66586 4.24779 5.03269 3.85726 4.64217C3.46674 4.25165 2.83357 4.25165 2.44305 4.64217L1.79236 5.29286C-0.116985 7.2022 -0.116985 10.2979 1.79236 12.2072C3.70171 14.1166 6.79738 14.1166 8.70672 12.2072L9.35713 11.5568C9.74765 11.1663 9.74765 10.5331 9.35713 10.1426C8.9666 9.75207 8.33344 9.75207 7.94291 10.1426L7.29251 10.793C6.16421 11.9213 4.33488 11.9213 3.20658 10.793C2.07828 9.6647 2.07828 7.83537 3.20658 6.70707L3.85726 6.05638Z' fill='#076aff'/>
<path d='M8.20674 7.2071C8.59727 6.81658 8.59727 6.18341 8.20674 5.79289C7.81622 5.40237 7.18305 5.40237 6.79253 5.79289L5.73187 6.85355C5.34134 7.24408 5.34134 7.87724 5.73187 8.26776C6.12239 8.65829 6.75556 8.65829 7.14608 8.26776L8.20674 7.2071Z' fill='#076aff'/>
</svg>
</a>
<p>With using flex:</p>
<a class="custom-link" href="#">Here is a link icon.
<svg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M12.2068 1.79276C10.2975 -0.116585 7.2018 -0.116585 5.29246 1.79276L4.64288 2.44234C4.25236 2.83286 4.25236 3.46603 4.64288 3.85655C5.03341 4.24707 5.66657 4.24707 6.0571 3.85655L6.70667 3.20698C7.83497 2.07868 9.6643 2.07868 10.7926 3.20698C11.9209 4.33528 11.9209 6.16461 10.7926 7.29291L10.1425 7.94304C9.75195 8.33357 9.75194 8.96673 10.1425 9.35726C10.533 9.74778 11.1662 9.74778 11.5567 9.35726L12.2068 8.70712C14.1162 6.79778 14.1162 3.70211 12.2068 1.79276Z' fill='#076aff'/>
<path d='M3.85726 6.05638C4.24779 5.66586 4.24779 5.03269 3.85726 4.64217C3.46674 4.25165 2.83357 4.25165 2.44305 4.64217L1.79236 5.29286C-0.116985 7.2022 -0.116985 10.2979 1.79236 12.2072C3.70171 14.1166 6.79738 14.1166 8.70672 12.2072L9.35713 11.5568C9.74765 11.1663 9.74765 10.5331 9.35713 10.1426C8.9666 9.75207 8.33344 9.75207 7.94291 10.1426L7.29251 10.793C6.16421 11.9213 4.33488 11.9213 3.20658 10.793C2.07828 9.6647 2.07828 7.83537 3.20658 6.70707L3.85726 6.05638Z' fill='#076aff'/>
<path d='M8.20674 7.2071C8.59727 6.81658 8.59727 6.18341 8.20674 5.79289C7.81622 5.40237 7.18305 5.40237 6.79253 5.79289L5.73187 6.85355C5.34134 7.24408 5.34134 7.87724 5.73187 8.26776C6.12239 8.65829 6.75556 8.65829 7.14608 8.26776L8.20674 7.2071Z' fill='#076aff'/>
</svg>
</a>

Answer 2

use the svg code for downward arrow , if you want to color change svg code path , using atter (fill) and (width).
<div class="down-arrow">
<svg xmlns="http://www.w3.org/2000/svg" fill="#000" width="30" viewBox="0 0 384 512"><path d="M374.6 310.6l-160 160C208.4 476.9 200.2 480 192 480s-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 370.8V64c0-17.69 14.33-31.1 31.1-31.1S224 46.31 224 64v306.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0S387.1 298.1 374.6 310.6z"/></svg>
</div>
other arrow down ::
<svg xmlns="http://www.w3.org/2000/svg" fill="#000" width="25" viewBox="0 0 384 512"><path d="M192 384c-8.188 0-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L192 306.8l137.4-137.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-160 160C208.4 380.9 200.2 384 192 384z"/></svg>

Answer 3

position:relative and a negative y-offset via bottom:-0.1em should work just fine.
.svg-inline{
display:inline-block;
position:relative;
/* add a baseline y offset */
bottom:-0.1em;
/* adjust size if needed */
font-size:0.85em;
/* icon will scale along with the parent's font-size */
height: 1em;
margin-left:0.2em;
}
In contrast to vertical-align:-0.1em bottom:-0.1emyou won't introduce any additional bottom margins, since it#s relatively positioned.
Since you want your svg icon to behave similar to an icon-font character/glyph I also recommend these optimizations:
remove width and height attributes but keep your viewBox you can instead scale you icon relative to your link's font-size
wrap your icon in a symbol element
remove path related fill attributes and add fill="currentColor" to your symbol – this way you can easily style your icons color via css
<svg class="iconAsset" style="display:none" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" >
<symbol id="icon-link" viewBox="0 0 14 14" fill="currentColor">
<path d="M12.2 1.8c-1.9-1.9-5-1.9-6.9 0l-0.7 0.6c-0.4 0.4-0.4 1.1 0 1.5c0.4 0.4 1.1 0.4 1.5 0l0.6-0.7c1.1-1.1 3-1.1 4.1 0c1.1 1.1 1.1 3 0 4.1l-0.7 0.7c-0.4 0.3-0.4 1 0 1.4c0.4 0.4 1.1 0.4 1.4 0l0.7-0.7c1.9-1.9 1.9-5 0-6.9z M3.9 6.1c0.4-0.4 0.4-1 0-1.4c-0.4-0.4-1-0.4-1.4 0l-0.7 0.6c-1.9 1.9-1.9 5 0 7c1.9 1.9 5 1.9 6.9 0l0.7-0.7c0.4-0.4 0.4-1 0-1.4c-0.4-0.4-1-0.4-1.4 0l-0.7 0.6c-1.1 1.2-2.9 1.2-4.1 0c-1.1-1.1-1.1-2.9 0-4l0.7-0.7z M8.2 7.2c0.4-0.4 0.4-1 0-1.4c-0.4-0.4-1-0.4-1.4 0l-1.1 1c-0.4 0.4-0.4 1.1 0 1.5c0.4 0.4 1 0.4 1.4 0l1.1-1.1z" />
</symbol>
</svg>
Example 1: responsive inlined Icon
a{
word-break: break-all;
}
.custom-link{
display:inline-block;
}
.svg-inline{
display:inline-block;
position:relative;
/* add a baseline y offset */
bottom:-0.1em;
/* adjust size if needed */
font-size:0.85em;
/* icon will scale along with the parent's font-size */
height: 1em;
color: #076aff;
margin-left:0.2em;
}
/** not recommended: will introduce bottom margins **/
.svg-inline-vertical-align{
position:static;
vertical-align:-0.75em;
}
/** if icon have a square 1/1 aspect ratio **/
.svg-inline-square{
width: 1em;
}
<style>
body{
font-size:2vw;
font-family: 'Segoe UI', sans-serif;
transition:0.3s;
}
a{
text-decoration-color: #076aff;
text-decoration-color: #ccc;
color:inherit;
font-weight:bold;
}
.layout{
width:50vw;
border:1px solid #ccc;
position:relative;
margin: 0 auto;
overflow:auto;
resize: both;
}
</style>
<svg class="iconAsset" style="display:none" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" >
<symbol id="icon-link" viewBox="0 0 14 14" fill="currentColor">
<path d="M12.2 1.8c-1.9-1.9-5-1.9-6.9 0l-0.7 0.6c-0.4 0.4-0.4 1.1 0 1.5c0.4 0.4 1.1 0.4 1.5 0l0.6-0.7c1.1-1.1 3-1.1 4.1 0c1.1 1.1 1.1 3 0 4.1l-0.7 0.7c-0.4 0.3-0.4 1 0 1.4c0.4 0.4 1.1 0.4 1.4 0l0.7-0.7c1.9-1.9 1.9-5 0-6.9z M3.9 6.1c0.4-0.4 0.4-1 0-1.4c-0.4-0.4-1-0.4-1.4 0l-0.7 0.6c-1.9 1.9-1.9 5 0 7c1.9 1.9 5 1.9 6.9 0l0.7-0.7c0.4-0.4 0.4-1 0-1.4c-0.4-0.4-1-0.4-1.4 0l-0.7 0.6c-1.1 1.2-2.9 1.2-4.1 0c-1.1-1.1-1.1-2.9 0-4l0.7-0.7z M8.2 7.2c0.4-0.4 0.4-1 0-1.4c-0.4-0.4-1-0.4-1.4 0l-1.1 1c-0.4 0.4-0.4 1.1 0 1.5c0.4 0.4 1 0.4 1.4 0l1.1-1.1z" />
</symbol>
</svg>
<div class="layout">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
<a class="custom-link" href="#">
link icon (position:relative)<svg class="svg-inline svg-inline-square" >
<use href="#icon-link" />
</svg>
</a>
Aenean massa. Cum sociis natoque penatibus et
<a class="custom-link" href="#">
link icon (vertical-align)<svg class="svg-inline svg-inline-square svg-inline-vertical-align" >
<use href="#icon-link" />
</svg>
</a>
magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
</p>
</div>
Example 2: multiple icons with different sizes
let range = document.querySelector("#range");
range.addEventListener("change", function (e) {
let val = e.currentTarget.value;
document.body.style.fontSize = 1*val+'vw'
});
body{
font-size:2vw;
font-family: 'Segoe UI', sans-serif;
transition:0.3s;
}
a{
text-decoration-color: #076aff;
text-decoration-color: #ccc;
color:inherit;
font-weight:bold;
}
.layout{
width:50vw;
border:1px solid #ccc;
position:relative;
margin: 0 auto;
overflow:auto;
resize: both;
}
.custom-link{
display:inline-block;
}
.svg-inline{
display:inline-block;
font-size:0.85em;
height: 1em;
position:relative;
bottom:-0.1em;
color: #076aff;
margin-left:0.2em;
}
.svg-inline-square{
width: 1em;
}
<p style="text-align:center; font-size:12px;">Font size:<input type="range" value="2" id="range" min="1" max="2" step="0.1"></p>
<svg class="iconAsset" style="display:none" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" >
<symbol id="icon-link" viewBox="0 0 14 14" fill="currentColor">
<path d="M12.2 1.8c-1.9-1.9-5-1.9-6.9 0l-0.7 0.6c-0.4 0.4-0.4 1.1 0 1.5c0.4 0.4 1.1 0.4 1.5 0l0.6-0.7c1.1-1.1 3-1.1 4.1 0c1.1 1.1 1.1 3 0 4.1l-0.7 0.7c-0.4 0.3-0.4 1 0 1.4c0.4 0.4 1.1 0.4 1.4 0l0.7-0.7c1.9-1.9 1.9-5 0-6.9z M3.9 6.1c0.4-0.4 0.4-1 0-1.4c-0.4-0.4-1-0.4-1.4 0l-0.7 0.6c-1.9 1.9-1.9 5 0 7c1.9 1.9 5 1.9 6.9 0l0.7-0.7c0.4-0.4 0.4-1 0-1.4c-0.4-0.4-1-0.4-1.4 0l-0.7 0.6c-1.1 1.2-2.9 1.2-4.1 0c-1.1-1.1-1.1-2.9 0-4l0.7-0.7z M8.2 7.2c0.4-0.4 0.4-1 0-1.4c-0.4-0.4-1-0.4-1.4 0l-1.1 1c-0.4 0.4-0.4 1.1 0 1.5c0.4 0.4 1 0.4 1.4 0l1.1-1.1z" />
</symbol>
<symbol id="icon-comments" viewBox="0 0 640 512" fill="currentColor">
<path d="M208 0C322.9 0 416 78.8 416 176C416 273.2 322.9 352 208 352C189.3 352 171.2 349.7 153.9 345.8C123.3 364.8 79.13 384 24.95 384C14.97 384 5.93 378.1 2.018 368.9C-1.896 359.7-.0074 349.1 6.739 341.9C7.26 341.5 29.38 317.4 45.73 285.9C17.18 255.8 0 217.6 0 176C0 78.8 93.13 0 208 0zM164.6 298.1C179.2 302.3 193.8 304 208 304C296.2 304 368 246.6 368 176C368 105.4 296.2 48 208 48C119.8 48 48 105.4 48 176C48 211.2 65.71 237.2 80.57 252.9L104.1 277.8L88.31 308.1C84.74 314.1 80.73 321.9 76.55 328.5C94.26 323.4 111.7 315.5 128.7 304.1L145.4 294.6L164.6 298.1zM441.6 128.2C552 132.4 640 209.5 640 304C640 345.6 622.8 383.8 594.3 413.9C610.6 445.4 632.7 469.5 633.3 469.9C640 477.1 641.9 487.7 637.1 496.9C634.1 506.1 625 512 615 512C560.9 512 516.7 492.8 486.1 473.8C468.8 477.7 450.7 480 432 480C350 480 279.1 439.8 245.2 381.5C262.5 379.2 279.1 375.3 294.9 369.9C322.9 407.1 373.9 432 432 432C446.2 432 460.8 430.3 475.4 426.1L494.6 422.6L511.3 432.1C528.3 443.5 545.7 451.4 563.5 456.5C559.3 449.9 555.3 442.1 551.7 436.1L535.9 405.8L559.4 380.9C574.3 365.3 592 339.2 592 304C592 237.7 528.7 183.1 447.1 176.6L448 176C448 159.5 445.8 143.5 441.6 128.2H441.6z" />
</symbol>
</svg>
<div class="layout">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
<a class="custom-link" href="#">
link icon<svg class="svg-inline svg-inline-square" >
<use href="#icon-link" />
</svg>
</a>
Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
<a class="custom-link" href="#">link icon<svg class="svg-inline" viewBox="0 0 640 512" style="font-size:0.95em">
<use href="#icon-comments" />
</svg>
</a>
ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate</p>
</div>
<p style="text-align:center; font-size:12px;">resize</p>