如何调整SVG大小？解决缩小后内容被截断的问题

你的问题出在SVG缺少viewBox属性——直接修改width和height时，浏览器只会裁剪SVG到指定尺寸，不会缩放内部内容。添加viewBox后，就能让SVG按比例缩放内容，避免截断。

针对你提供的SVG的具体修改步骤 #

1. 给SVG标签添加viewBox属性，值为"2 4 20 16"（这个值是通过分析path坐标的极值得出的：内容最小x为2，最小y为4，内容宽度20，高度16）。
2. 修改后的代码如下：

<svg viewBox="2 4 20 16" height="15" width="28" fill="#D0D4D9" fill-rule="evenodd">
  <path d="M12 18c-4.536 0-7.999-4.26-7.999-6 0-2.001 3.459-6 8-6 4.376 0 7.998 3.973 7.998 6 0 1.74-3.462 6-7.998 6m0-14C6.48 4 2 8.841 2 12c0 3.086 4.576 8 10 8 5.423 0 10-4.914 10-8 0-3.159-4.48-8-10-8"></path>
  <path d="M11.977 13.984c-1.103 0-2-.897-2-2s.897-2 2-2c1.104 0 2 .897 2 2s-.896 2-2 2m0-6c-2.206 0-4 1.794-4 4s1.794 4 4 4c2.207 0 4-1.794 4-4s-1.793-4-4-4"></path>
</svg>

3. 现在你可以随意调整width和height，比如改成width="14" height="7.5"，内容会按比例缩小；如果要保持比例，只设置一个维度，另一个设为auto（比如width="14" height="auto"）。

通用规则 #

• 必须添加viewBox：它定义了SVG内部内容的坐标范围，格式为viewBox="min-x min-y width height"，其中：
  • min-x/min-y：内容的最小x、y坐标
  • width/height：内容本身的宽高
• 缩放逻辑：修改width和height时，浏览器会把viewBox定义的区域缩放到指定尺寸，不会裁剪内容。
• 保持比例：确保width/height的比例和viewBox中width/height的比例一致，或者只设置一个维度，另一个用auto。

手动确定viewBox的方法 #

1. 查看SVG中所有path、图形的坐标，找出最小的x（min-x）、最小的y（min-y）、最大的x（max-x）、最大的y（max-y）。
2. 计算内容宽度：max-x - min-x，内容高度：max-y - min-y。
3. 组合成viewBox="min-x min-y 内容宽度 内容高度"。

你也可以用矢量图形编辑器（比如Inkscape、Figma）打开SVG，调整大小后导出，工具会自动处理viewBox和缩放逻辑。

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