5月27日 14:35

如何在响应式设计中正确使用 SVG？

页面在手机上变形、图标在平板上模糊、Logo 在宽屏上被拉伸——这些问题多半和 SVG 的响应式处理有关。SVG 本身是矢量格式，理论上怎么缩放都不会失真，但如果 viewBox、preserveAspectRatio 和 CSS 尺寸没有配合好，结果反而比位图更糟糕。下面逐个拆解这些关键点。

viewBox：SVG 响应式的基石

viewBox 定义了 SVG 内部的坐标系统和可视区域，格式是 viewBox="min-x min-y width height"。它不决定 SVG 的实际渲染尺寸，而是告诉浏览器"这批图形画在一个多大的虚拟画布上"。

html
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <rect width="200" height="100" fill="#3B82F6" rx="8" />
</svg>

这个 SVG 的虚拟画布是 200×100，宽高比 2:1。当容器宽度变化时，只要设置了合适的 CSS，图形就会按这个比例等比缩放。

关键操作：要实现响应式，必须同时做两件事——设置 viewBox，然后移除 SVG 标签上的固定 width/height 属性，改由 CSS 控制尺寸。

css
.responsive-svg {
  width: 100%;
  height: auto;
}

如果只移除 width/height 而不设 viewBox，SVG 会按默认 300×150 渲染，图形变形不可避免。

preserveAspectRatio：控制缩放时的对齐与裁切

当 SVG 容器的宽高比和 viewBox 的宽高比不一致时，preserveAspectRatio 决定了图形怎么适配。

默认值是 xMidYMid meet，意思是居中显示、等比缩小到完全可见、留白均匀分布。这适合大多数场景，但有些设计需要不同行为：

xMinYMin slice：从左上角对齐，等比放大填满容器，超出部分裁切。适合全屏背景图。
none：不保持比例，拉伸填满。只在需要铺满且接受变形时使用。
xMidYMid meet：居中完整显示，两侧或上下留白。适合 Logo 和图标。

html
<!-- 全屏英雄区背景，裁切不留白 -->
<svg viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid slice"
     style="width:100%;height:100vh;">
  ...
</svg>

<!-- Logo 始终完整居中 -->
<svg viewBox="0 0 120 40" preserveAspectRatio="xMidYMid meet"
     style="width:100%;max-width:200px;height:auto;">
  ...
</svg>

一个常见错误：在 preserveAspectRatio 设置了 meet 的情况下，用 CSS 强制设定与 viewBox 比例不同的固定宽高，结果出现大面积空白。正确做法是只约束一个维度（通常是宽度），让另一个维度自动计算。

SVG 宽度自适应的几种写法

内联 SVG 有三种方式让宽度自适应容器：

1. 百分比宽度 + auto 高度

css
.svg-container {
  width: 100%;
  height: auto;
}

最简单直接，前提是有 viewBox。

2. max-width 限制最大宽度

css
.svg-container {
  width: 100%;
  max-width: 600px;
  height: auto;
}

在大屏上不会无限撑开，适合内容区的图表和插画。

3. 容器查询（Container Queries）

css
.card {
  container-type: inline-size;
}
@container (min-width: 400px) {
  .card svg {
    width: 50%;
  }
}
@container (max-width: 399px) {
  .card svg {
    width: 100%;
  }
}

容器查询让 SVG 根据父容器而非视口调整尺寸，在组件化开发中比媒体查询更精准。

用媒体查询控制 SVG 内部样式

SVG 内部可以写 <style> 标签，里面的媒体查询在不同条件下生效。但要注意一个容易踩的坑：当 SVG 通过 <img> 引入时，媒体查询的视口是 <img> 元素的 CSS 尺寸，不是页面视口。只有内联 SVG 的媒体查询才跟随页面视口。

html
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <style>
    .label { font-size: 14px; fill: #333; }
    @media (max-width: 400px) {
      .label { font-size: 10px; fill: #666; }
    }
  </style>
  <text class="label" x="100" y="55" text-anchor="middle">数据标签</text>
</svg>

这种技术在响应式图标上特别有用：大屏显示图标+文字，小屏只显示图标，通过媒体查询切换 display 即可。

响应式图标策略

图标系统是 SVG 响应式的高频场景，有三种主流方案：

内联 SVG + CSS 控制 直接把 SVG 写进 HTML，用 CSS 控制尺寸和颜色。优点是样式灵活、可交互、可做动画；缺点是 HTML 体积增大，大量图标时不适合。

html
<button class="icon-btn">
  <svg class="icon" viewBox="0 0 24 24" width="20" height="20">
    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.27 5.82 22 7 14.14l-5-4.87 6.91-1.01z"/>
  </svg>
  <span class="label">收藏</span>
</button>

CSS background-image + mask-image 用 SVG 做 mask，背景色即图标色，换色只需改 CSS 变量。

css
.icon-star {
  width: 20px;
  height: 20px;
  background-color: var(--icon-color, #333);
  -webkit-mask-image: url("data:image/svg+xml,...");
  mask-image: url("data:image/svg+xml,...");
  -webkit-mask-size: contain;
  mask-size: contain;
}

SVG Sprite + use 引用 把所有图标整合到一个 SVG 文件中，用 <use href="#icon-name"> 引用。适合图标数量多的项目。

html
<!-- 隐藏的 sprite -->
<svg style="display:none">
  <symbol id="icon-menu" viewBox="0 0 24 24">
    <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
  </symbol>
</svg>

<!-- 使用 -->
<svg class="icon" width="24" height="24">
  <use href="#icon-menu"/>
</svg>

SVG 作为背景图片的响应式适配

SVG 做背景图片时，需要同时处理 SVG 文件内部的 viewBox 和 CSS 的 background-size：

css
.hero {
  background-image: url('hero-pattern.svg');
  background-size: cover;
  background-position: center;
  min-height: 400px;
}

background-size: cover 配合 SVG 的 preserveAspectRatio="xMidYMid slice"，能保证背景始终填满容器且不变形。如果用 contain，则可能出现留白。

对于平铺纹理，用 background-repeat: repeat 配合 background-size 控制单元大小：

css
.pattern-bg {
  background-image: url('pattern.svg');
  background-repeat: repeat;
  background-size: 60px 60px;
}

在小屏上可以缩小 background-size 让纹理更密集，大屏上放大让纹理更稀疏，通过媒体查询切换即可。

srcset 与 picture 元素配合 SVG

SVG 本身是矢量的，不需要多分辨率版本，但 <picture> 元素在两个场景下仍然有用：

格式回退

html
<picture>
  <source type="image/svg+xml" srcset="logo.svg">
  <img src="logo.png" srcset="logo-2x.png 2x" alt="Logo">
</picture>

不支持 SVG 的浏览器（极少数旧浏览器）自动回退到 PNG。

艺术指导（Art Direction） 用 SVG 的 fragment 标识符在不同断点切换 viewBox，实现不同裁切：

html
<picture>
  <source media="(min-width: 768px)"
          srcset="chart.svg#svgView(viewBox(0,0,800,400))">
  <img src="chart.svg#svgView(viewBox(200,0,400,400))"
       alt="数据图表">
</picture>

大屏显示完整图表，小屏聚焦核心区域，不需要准备多个文件。svgView() 片段可以直接在 URL 中覆盖 viewBox 值。

常见布局问题与排查

SVG 高度塌陷 移除固定 height 后，某些浏览器无法从 viewBox 计算出正确高度。解决方案是给外层容器设 aspect-ratio：

css
.svg-wrapper {
  aspect-ratio: 2 / 1;  /* 匹配 viewBox 的宽高比 */
  width: 100%;
}
.svg-wrapper svg {
  width: 100%;
  height: 100%;
}

Flex/Grid 布局中 SVG 被拉伸 Flex 容器的 align-items: stretch 会让 SVG 高度撑满容器。加 align-self: start 或 align-items: flex-start 可以恢复等比缩放。

内联 SVG 与 <img> 的媒体查询不一致 内联 SVG 的媒体查询参考视口宽度，<img> 引入的 SVG 媒体查询参考元素自身宽度。如果需要在 <img> 中根据视口变化，改用 <picture> 的 media 属性在 HTML 层切换。

iOS Safari 下 viewBox 缩放异常 给 SVG 显式设置 overflow: visible，并确保没有 width/height 属性和 CSS 尺寸冲突。

SVG 的响应式并不复杂，核心就是三件事：viewBox 定坐标系、preserveAspectRatio 定适配规则、CSS 定实际尺寸。三者配合好，矢量图形在任何屏幕上都能正确显示。遇到变形先查 viewBox 有没有设，遇到留白先查 preserveAspectRatio 的值，遇到尺寸失控先查 CSS 和 HTML 属性是否冲突——按这个顺序排查，绝大多数问题都能定位。

标签：SVG