I am currently trying to make my svgs formatted to 50px x 50px, but for some reason they aren’t going to that.
What am I doing wrong or missed out? I currently have the width and height of the svg-icons set to 50px and I thought that would do it, but obviously not.
https://codepen.io/jake-matthews/pen/dyQYzXo
#page-hero-svgs {
height: 50px;
display: flex;
align-items: center;
margin-left: 20px;
margin-bottom: 33px;
}
.svg-icon {
width: 50px;
height: 50px;
margin-right: 20px;
transition: ease-in;
fill: rgb(255, 98, 0);
}
.svg-icon:hover {
fill: white;
cursor: pointer;
transition: ease-in 0.3s;
}<div id="page-hero-svgs">
<svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="github">
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
</svg>
<svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="linkedin">
<path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
</svg>
<svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="email">
<path d="M66.097 12.089L9.196999 12.089C 4.126 12.089 0 16.215 0 21.286L0 21.286L0 54.008C 0 59.079 4.126 63.204998 9.197 63.204998L9.197 63.204998L66.097 63.204998C 71.168 63.204998 75.294 59.079 75.294 54.008L75.294 54.008L75.294 21.287C 75.295 16.215 71.169 12.089 66.097 12.089zM61.603 18.089L37.647 33.523L13.691 18.089L61.603 18.089zM66.097 57.206L9.196999 57.206C 7.434 57.206 6 55.771 6 54.009L6 54.009L6 21.457L35.795998 40.617C 35.836 40.642002 35.878998 40.659 35.92 40.682C 35.962997 40.705997 36.007 40.729 36.051 40.751C 36.281998 40.87 36.52 40.966 36.763 41.029C 36.788002 41.036 36.813 41.038998 36.838 41.045C 37.105 41.107998 37.375 41.147 37.645 41.147C 37.646 41.147 37.647 41.147 37.647 41.147C 37.649 41.147 37.649998 41.147 37.651 41.147C 37.921 41.147 38.191 41.109 38.458 41.045C 38.483 41.038998 38.508 41.036 38.533 41.029C 38.776 40.966 39.013 40.87 39.245003 40.751C 39.289 40.729 39.333004 40.706 39.376003 40.682C 39.417004 40.659 39.460003 40.642 39.500004 40.617L39.500004 40.617L69.296005 21.457L69.296005 54.008C 69.295 55.771 67.86 57.206 66.097 57.206z"/>
</svg>
</div>If anyone has any suggestions or the right answer that would be much appreciated.
Thanks in advnace,
Jake
2
Answers
The viewBox attribute is an absolute nightmare to work with (I’ve abandoned it altogether) so you’re better off getting rid of it.
In its place you can wrap a standard container around the SVG and give that the CSS class like this…
NB: Additionally, you don’t need the xmlns attribute for inline SVGs.
As I’ve commented you need to change the viewBox for the email to viewBox="0 0 75.3 75.3"