'Space between the border of my rotated svg icon and the svg canvas
I'm creating a rudimental web icon system (a kind of sprite) with svg. However in my code around one icon (between the smash magazine icon and the red border) there is some room. I would know how it is possible to remove it. The icon is rotated and with the viewBox I'm not able to do the job. May be I have to make some transformation. How could I do?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Svg Icon System</title>
<style>
.icon {
/* width: 3em;
height: 3em; */
fill: currentColor;
stroke: black;
stroke-width: 2px;
background-color: yellow;
}
</style>
</head>
<body>
<svg width="0" height="0">
<defs>
<g id="icon-linkedin">
<path
d="M80.667,14H19.315C16.381,14,14,16.325,14,19.188v61.617C14,83.672,16.381,86,19.315,86h61.352
C83.603,86,86,83.672,86,80.805V19.188C86,16.325,83.603,14,80.667,14z M35.354,75.354H24.67V40.995h10.684V75.354z M30.012,36.297
c-3.423,0-6.19-2.774-6.19-6.194c0-3.415,2.767-6.189,6.19-6.189c3.415,0,6.189,2.774,6.189,6.189
C36.201,33.523,33.427,36.297,30.012,36.297z M75.35,75.354H64.683V58.646c0-3.986-0.078-9.111-5.551-9.111
c-5.558,0-6.405,4.341-6.405,8.822v16.998H42.052V40.995h10.245v4.692h0.146c1.426-2.7,4.91-5.549,10.106-5.549
c10.806,0,12.802,7.114,12.802,16.369V75.354z"
/>
</g>
<g id="icon-smash-mag">
<path
fill="#231F20"
d="M45.718,55.325c-3.727-1.408-7.229-3.226-10.202-5.401c-0.077-0.056-0.157-0.111-0.233-0.168
c-0.433-0.322-0.851-0.654-1.259-0.991c-0.107-0.088-0.211-0.178-0.316-0.267c-0.353-0.301-0.697-0.606-1.03-0.919
c-0.062-0.058-0.127-0.115-0.188-0.173c-0.373-0.357-0.73-0.724-1.074-1.096c-0.091-0.098-0.179-0.197-0.268-0.296
c-0.305-0.34-0.598-0.685-0.877-1.037c-0.041-0.052-0.085-0.102-0.125-0.154c-0.306-0.393-0.591-0.796-0.862-1.204
c-0.07-0.104-0.137-0.21-0.204-0.315c-0.246-0.385-0.479-0.774-0.693-1.171c-0.021-0.039-0.045-0.077-0.066-0.117
c-0.227-0.429-0.428-0.867-0.615-1.309c-0.047-0.11-0.091-0.221-0.135-0.333c-0.172-0.434-0.331-0.872-0.463-1.318
c-0.006-0.02-0.014-0.04-0.02-0.06c-0.135-0.463-0.241-0.934-0.331-1.41c-0.022-0.117-0.043-0.234-0.062-0.352
c-0.08-0.482-0.144-0.968-0.176-1.464c-0.042-0.665-0.055-1.318-0.047-1.963c0.002-0.199,0.018-0.392,0.025-0.589
c0.016-0.447,0.039-0.892,0.081-1.329c0.021-0.219,0.051-0.435,0.078-0.652c0.052-0.412,0.113-0.821,0.189-1.225
c0.039-0.211,0.083-0.42,0.129-0.629c0.091-0.413,0.198-0.82,0.315-1.224c0.053-0.183,0.104-0.366,0.163-0.547
c0.148-0.454,0.316-0.9,0.499-1.341c0.049-0.12,0.092-0.242,0.144-0.361c0.77-1.752,1.821-3.401,3.185-4.943L16.21,24.575
c-3.027,0.724-4.895,3.765-4.171,6.793l12.535,52.421c0.725,3.027,3.766,4.896,6.793,4.171l6.451-1.543
c-2.504-0.829-6.833-2.409-10.982-4.623l6.015-13.644c0,0,7.079,6.304,17.242,6.304C60.258,74.454,64.775,62.524,45.718,55.325z"
/>
<path
fill="#231F20"
d="M87.961,68.632L75.425,16.211c-0.723-3.028-3.765-4.895-6.793-4.171l-10.797,2.581
c0.86,0.136,1.984,0.346,3.307,0.667c0.313,0.076,0.641,0.16,0.975,0.249c0.117,0.031,0.237,0.064,0.357,0.097
c0.241,0.066,0.488,0.136,0.738,0.209c0.131,0.038,0.261,0.075,0.394,0.115c0.353,0.106,0.714,0.218,1.083,0.339
c0.116,0.038,0.237,0.081,0.355,0.12c0.276,0.093,0.556,0.189,0.84,0.29c0.159,0.057,0.319,0.115,0.481,0.174
c0.285,0.105,0.575,0.215,0.867,0.329c0.133,0.052,0.263,0.1,0.397,0.154c0.406,0.162,0.818,0.335,1.235,0.515
c0.141,0.061,0.285,0.127,0.428,0.19c0.314,0.14,0.63,0.284,0.949,0.434c0.147,0.069,0.294,0.138,0.441,0.21
c0.452,0.219,0.906,0.444,1.365,0.685l-4.702,13.03c0,0-3.913-4.371-14.405-4.903c-9.974-0.504-15.522,10.285,3.931,16.647
c0.573,0.188,1.127,0.384,1.67,0.585c0.15,0.055,0.298,0.112,0.446,0.169c0.42,0.16,0.832,0.324,1.234,0.492
c0.123,0.051,0.248,0.101,0.369,0.153c0.508,0.218,1.004,0.441,1.484,0.671c0.062,0.029,0.12,0.06,0.181,0.09
c0.418,0.203,0.824,0.411,1.221,0.622c0.119,0.063,0.236,0.127,0.353,0.191c0.379,0.208,0.75,0.42,1.109,0.636
c0.064,0.038,0.131,0.076,0.194,0.115c0.424,0.259,0.833,0.523,1.229,0.792c0.069,0.047,0.134,0.094,0.202,0.141
c0.327,0.226,0.645,0.456,0.953,0.689c0.084,0.064,0.169,0.127,0.252,0.192c0.357,0.276,0.706,0.556,1.038,0.841c0,0,0,0,0,0
c5.631,4.835,7.638,10.851,7.476,16.562c-0.128,4.513-1.707,8.184-3.538,10.953l11.048-2.641
C86.817,74.702,88.684,71.659,87.961,68.632z"
/>
</g>
</defs>
</svg>
<!-- viewBox="0 0 100 100" -->
<!-- prettier-ignore -->
<svg class="icon" width="50" height="50" viewBox="16 16 68 68" style="border: 1px solid red">
<title>Icona di Linkedin</title>
<use xlink:href="#icon-linkedin"></use>
</svg>
<!-- prettier-ignore -->
<svg class="icon" width="50" height="50" viewBox="16 16 68 68" style="border: 1px solid red">
<title>Icona di Smah Magazine</title>
<use xlink:href="#icon-smash-mag"></use>
</svg>
<!-- <button style="color:green">
<svg class="icon" width="50" height="50" viewBox="0 0 100 100" style="border: 1px solid red">
<title>Icona di Linkedin</title>
<use xlink:href="#icon-linkedin"></use>
</svg>
</button> -->
</body>
</html>Solution 1:[1]
Your SVG's have default display:inline and there's a whitespace between them, which is rendered by browser like it was a whitespace between two words. Quick and dirty solution is to remove the whitespaces - all of them, including line breaks. But the better one is to use flexbox to turn your SVG's to flex elements.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Jared |