如何制作响应式 SVG

SVG (Scalable Vector Graphics) 是一种基于 XML 的图形格式，支持对图形进行缩放而不失真。而响应式设计则是一种让网页自适应不同屏幕尺寸的设计方式。本文将介绍如何制作响应式的 SVG 图形。

1. 使用 ViewBox 属性

ViewBox 属性指定了可视区域的位置和大小，可以让 SVG 图形缩放以适应不同的屏幕尺寸。例如：

<svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="50" />
</svg>

上面的代码创建了一个以 (50, 50) 为圆心，半径为 50 的圆形。ViewBox 属性值 "0 0 100 100" 分别代表了左上角 x 坐标、左上角 y 坐标、可视区域宽度和可视区域高度。当 SVG 嵌入到网页中时，浏览器会根据父容器大小自动缩放。

2. 使用百分比单位

在 SVG 中可以使用百分比单位来指定宽度和高度。如：

<svg width="100%" height="100%">
  <circle cx="50%" cy="50%" r="50%" />
</svg>

上面的代码创建了一个占据整个父容器的圆形。而 "50%" 则代表了父容器宽度和高度的一半。当父容器大小改变时，SVG 图形也会相应地自适应。

3. 使用 media queries

可以使用 CSS media queries 来根据屏幕分辨率变化调整 SVG 图形大小。如：

@media (max-width: 600px) {
  svg {
    width: 50%;
    height: 50%;
  }
}

上面的代码在屏幕分辨率小于等于 600px 时，将 SVG 图形宽度和高度设置为父容器的一半。这样可以使得在小屏幕设备上也可以完美的显示 SVG 图形。

4. 使用 symbol 和 use 标签

可以将 SVG 图形定义为 symbol，在需要使用它时再引用它。如：

<svg>
  <symbol id="example">
    <rect x="0" y="0" width="100" height="50" />
  </symbol>
</svg>

<svg>
  <use xlink:href="#example" />
</svg>

上面的代码定义了一个 id 为 "example" 的 symbol，其中包含一个 100x50 的矩形。在下面的代码中，通过 use 标签将 symbol 引用，从而展示出定义好的矩形。这种方式可以减少代码的冗余，也更容易使 SVG 图形适应屏幕大小。

以上就是制作响应式 SVG 的几种方式。使用这些技巧可以让 SVG 图形自适应不同的屏幕尺寸，提供更好的用户体验。

参考资料

• SVG Viewport and viewBox
• Scalable Vector Graphics