我目前正在嘗試將我的SVG格式化為50px x 50px，但由于某些原因，他們不打算這樣做。

我做錯(cuò)了什么或者錯(cuò)過了什么？我目前將svg圖標(biāo)的寬度和高度設(shè)置為50px，我以為這樣就可以了，但顯然不是。

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>

使用viewBox屬性絕對是一場噩夢(我已經(jīng)完全放棄了它),所以你最好擺脫它。

取而代之的是，你可以在SVG周圍包裝一個(gè)標(biāo)準(zhǔn)容器，并像這樣給它一個(gè)CSS類...

<div class="svg-icon">

 <svg  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>

</div>

注意:另外，內(nèi)聯(lián)SVG不需要xmlns屬性。