如何在CSS中缩放SVG？viewport与viewBox使用遇阻求助

嘿，我之前也踩过用::before伪元素通过content: url()加载SVG没法缩放的坑，给你几个实用的解决方案，按优先级推荐：

方案1：改用背景图加载（最灵活） #

content: url()加载的SVG属于替换元素，它的尺寸默认由自身的固有尺寸决定，很难直接通过CSS调整。换成background-image就能轻松控制大小，还能保持比例：

.navbar__logo::before {
  content: ""; /* 清空content的URL */
  display: inline-block; /* 让伪元素能设置宽高 */
  width: 40px; /* 你想要的目标宽度 */
  height: 40px;
  background-image: url("../images/logo/logo.svg");
  background-size: contain; /* 保持SVG比例，完整显示在容器内 */
  background-repeat: no-repeat;
  vertical-align: middle; /* 可选：对齐周围文本 */
}

这个方法不用修改SVG文件本身，完全靠CSS控制缩放，适用性最强。

方案2：修正SVG的viewBox并设置伪元素尺寸 #

如果你一定要用content: url()，那得先确保你的SVG文件里有正确的viewBox属性——这是SVG能被正确缩放的核心。

打开你的logo.svg，检查根<svg>标签是否包含viewBox，比如：

<svg viewBox="0 0 200 100" width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <!-- 你的SVG图形内容 -->
</svg>

viewBox="0 0 200 100"定义了SVG的坐标系范围（x起点、y起点、宽度、高度），有了它，SVG就能根据外部容器的尺寸自动缩放。

然后在CSS里给伪元素设置宽高：

.navbar__logo::before {
  content: url("../images/logo/logo.svg");
  display: inline-block;
  width: 40px; /* 目标宽度 */
  height: auto; /* 自动计算高度，保持比例 */
}

如果你的SVG原来没有viewBox，一定要加上，否则缩放会导致图形变形或者无法缩小。

方案3：用transform缩放（应急方案） #

如果以上两种方法都没法用，可以试试CSS的transform: scale()，但这个方法有个小缺点：缩放后伪元素的占位空间还是原来的大小，可能需要调整定位：

.navbar__logo::before {
  content: url("../images/logo/logo.svg");
  display: inline-block;
  transform: scale(0.4); /* 缩放到原尺寸的40% */
  transform-origin: top left; /* 从左上角开始缩放，避免位置偏移 */
  margin-right: -24px; /* 可选：抵消缩放后的多余占位空间 */
}

这个方案属于应急用，不如前两个优雅，所以优先推荐前两种。

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