设置宽高后SVG图标仍无法统一为50px×50px，求解决方法

核心原因 #

你的SVG图标未按设置的50px尺寸显示，是因为部分SVG的viewBox属性与内部图形的实际坐标范围不匹配：

• GitHub和LinkedIn图标的viewBox="0 0 24 24"与内部path的坐标范围一致，显示正常；
• 邮箱图标的viewBox="0 0 24 24"，但内部path的坐标最大到了75.294和63.205，导致图形被强制缩小到24x24的容器内，即使外层设置50px宽高，内部图形也只会占极小比例。

解决方案 #

1. 修正邮箱图标的viewBox

将邮箱SVG的viewBox改为匹配内部图形的实际范围：

<svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 75.3 63.2" 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>

2. 优化CSS确保图形填充容器

为.svg-icon添加display: block消除行内元素间隙，object-fit: contain确保图形自适应容器且不失真：

.svg-icon {
    width: 50px;
    height: 50px;
    margin-right: 20px;
    transition: ease-in;
    fill: rgb(255, 98, 0);
    display: block; /* 去除默认行内间隙 */
    object-fit: contain; /* 自适应容器尺寸 */
}

3. 可选：统一视觉大小（进阶）

如果希望三个图标视觉大小完全一致，可以将GitHub和LinkedIn图标的viewBox调整为与邮箱图标相同的比例，或使用transform: scale()微调，但优先推荐修改viewBox的方式，更符合SVG规范。

内容的提问来源于stack exchange，提问作者Jake Matthews