如何调整SVG背景宽高且不影响内部logo的显示效果

完全不需要修改rect元素的任何参数，也不会影响内部logo的显示效果，仅调整SVG根节点的属性即可实现需求。

实现原理 #

你的rect设置了width="100%" height="100%"，会自动铺满SVG的整个可视区域，我们只需要扩展SVG的可视区域，同时保持原有logo的绘制坐标范围不变，就能实现“背景尺寸调整、logo显示完全不变”的效果。

示例代码 #

比如你想要最终输出32*32尺寸的图标，logo居中、四周各留4px的蓝色背景边距，修改后的代码如下：

<svg width="32" height="32" viewBox="-4 -4 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" fill="#4267b2" />
<path d="M11.9756 0.0498047C5.36171 0.0498047 0 5.41152 0 12.0254C0 17.9572 4.31743 22.8698 9.97829 23.8211V14.5238H7.08943V11.1781H9.97829V8.71109C9.97829 5.84866 11.7266 4.28881 14.2804 4.28881C15.5036 4.28881 16.5547 4.37995 16.8599 4.42009V7.41209L15.0886 7.41295C13.7 7.41295 13.4323 8.07266 13.4323 9.04109V11.1764H16.7456L16.3134 14.5221H13.4323V23.9011C19.3574 23.1799 23.951 18.1422 23.951 12.0219C23.951 5.41152 18.5893 0.0498047 11.9756 0.0498047Z" fill="white"/>
</svg>

自定义参数规则 #

如果你需要自定义背景尺寸和边距，按以下规则调整即可，无需改动其他任何代码：

• 设最终SVG的总宽度为W，总高度为H，左右侧边距为x，上下侧边距为y
• 将svg根标签的width属性改为W，height属性改为H
• 将viewBox属性值改为-x -y W H

该方案下logo的所有绘制坐标没有发生任何变化，不会出现拉伸、变形、偏移的问题。

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