用<symbol>重构响应式SVG：Smashing Magazine提出的“自适应插画”范式

前端

发布日期: 2025-10-10

文章背景：从经典动画到现代Web组件

Smashing Magazine “Smashing Animations”系列第五篇文章，以《Quick Draw McGraw》1959年动画海报为例，探讨如何让一幅复杂的SVG插画在桌面与移动端自适应布局。作者Andy Clarke指出，传统的viewBox缩放虽然能保持矢量清晰度，却难以根据屏幕尺寸重排内部元素。为此，他提出利用<symbol>与<use>构建可复用的SVG组件库，再通过CSS媒体查询切换布局，实现“写一次，多端适配”的插画体验。

核心思路：把SVG拆成模块，再在不同画布重新组合

隐藏的符号库：将角色、背景、装饰等元素拆分为独立的<symbol>，统一存放在一个隐藏的<svg>中。
两个可见画布：准备两幅可见的SVG——如1080×1440的纵向和1920×1080的横向布局——分别通过<use>引用同一批<symbol>。
CSS控制显示：默认显示移动端SVG，在@media (min-width: 64rem)等断点切换至桌面版本，从而保持响应式布局。
复用与动画：借助transform调整每个<use>元素的位置和大小；通过属性选择器（如use[href="#quick-draw-hat"]）给特定符号添加CSS动画。

步骤拆解：从导出到上线的操作路径

导出元素并定义viewBox
在矢量工具中将插画拆成多个层，逐一导出为单独的SVG片段，记录各自的viewBox尺寸。

构建符号库
将导出的SVG结构替换为<symbol>，统一写入隐藏的<svg>中：

<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
  <symbol id="quick-draw-hat" viewBox="0 0 294 182">
    <g class="quick-draw-hat">…</g>
  </symbol>
  
</svg>

创建多版画布

<svg class="svg-small" viewBox="0 0 1080 1440">
  <use href="#quick-draw-hat" width="294" height="182" transform="translate(-30,610)"/>
</svg>
<svg class="svg-large" viewBox="0 0 1920 1080">
  <use href="#quick-draw-hat" width="294" height="182" transform="translate(350,270)"/>
</svg>

CSS媒体查询切换

.svg-small { display: block; }
.svg-large { display: none; }
@media (min-width: 64rem) {
  .svg-small { display: none; }
  .svg-large { display: block; }
}

动画与交互
定位到特定符号的<use>元素，通过属性选择器添加动画：

use[href="#quick-draw-hat"] {
  animation: hat-rock 1s ease-in-out infinite alternate;
  transform-origin: center bottom;
}
@keyframes hat-rock {
  from { transform: rotate(-2deg); }
  to   { transform: rotate(2deg); }
}