Smashing Animations Part 4: Optimising SVGs

SVG动画让我回想起小时候看的汉纳-巴伯拉卡通片，比如《疯狂赛车》、《佩内洛普·皮特斯托普的冒险》当然还有《瑜伽熊》。这些动画激发我使用CSS、SVG和SMIL动画精心重现一些经典卡通标题。

但要让动画快速加载并流畅运行，仅靠怀旧是不够的。需要简洁的设计、精简的代码以及使复杂SVG更易于动画化的流程。以下是我的方法。

现在有一个网站可以查看我所有的卡通标题。（大预览）

Smashing Animations Part 1: How Classic Cartoons Inspire Modern CSS
Smashing Animations Part 2: How CSS Masking Can Add An Extra Dimension
Smashing Animations Part 3: SMIL’s Not Dead Baby, SMIL’s Not Dead

无论是个人项目还是商业工作，妥善准备SVG可确保其可访问性。优化它们可确保快速加载，尤其在移动设备上，仔细考虑其结构使维护更容易。我开发了一个平衡视觉效果、可访问性和性能的流程，并使复杂SVG更易于处理。

为解释我的流程，我选择了1960年1月首播的《瑜伽熊秀》中的一集“Bewitched Bear”。在这个故事中，瑜伽熊偷了女巫的扫帚来帮他拿“野餐”篮子。

“嘿，嘿，嘿！”

《瑜伽熊秀》©华纳兄弟娱乐公司。（大预览）

了解Smashing Workshops关于前端、设计和UX的实践课程，包含实用要点、实时会话、视频录制和友好问答。与Brad Frost、Stéph Walter等众多专家一起。

跳转到工作坊↬

开始清洁并设计时考虑优化

保持简单是制作优化并准备动画的SVG的关键。像Adobe Illustrator这样的工具将位图图像转换为矢量，但输出通常包含太多无关的组、图层和蒙版。相反，我在Sketch中开始清理，使用参考图像，并使用钢笔工具创建路径。

提示：Affinity Designer（英国）和Sketch（荷兰）是Adobe Illustrator和Figma的替代品。两者都是独立的，总部位于欧洲。自Adobe停止Fireworks以来，Sketch一直是我的默认设计应用。

从轮廓开始

对于这些卡通标题插图，我首先使用钢笔工具绘制黑色轮廓，尽可能少用锚点。形状的点越多，文件就越大，因此简化路径和减少点数可以使SVG小得多，通常没有明显的视觉差异。

左：160个锚点。右：80个点。（大预览）

考虑到这个瑜伽熊插图的部分最终将被动画化，我将这个“Bewitched Bear”的身体、头部、衣领和领带的轮廓分开，以便可以独立移动它们。头部可能点头，领带可能飘动，就像那些经典卡通一样，瑜伽熊的衣领将隐藏它们之间的连接。

身体、头部、衣领和领带以及扫帚的单独轮廓。（大预览）

绘制简单的背景形状

轮廓就位后，我再次使用钢笔工具绘制新形状，用颜色填充区域。这些颜色位于轮廓后面，因此不需要完全匹配。锚点越少，文件大小越小。

左：原始矢量 artwork，8 KB。右：使用Adobe Illustrator简化，2 KB。（大预览）

遗憾的是，Affinity Designer和Sketch都没有可以简化路径的工具，但如果你有，使用Adobe Illustrator可以从这些背景形状中再削减几千字节。

Adobe Illustrator：对象→路径→简化。（大预览）

优化代码

不仅仅是元数据使SVG更臃肿。从设计应用导出的方式也会影响文件大小。

准备优化的矢量 artwork。（大预览）

从Adobe Illustrator导出这些简单的背景形状默认包括不必要的组、蒙版和臃肿的路径数据。Sketch的代码也好不了多少，即使在其SVGO Compressor代码中也有很大的改进空间。我依赖Jake Archibald的SVGOMG，它使用SVGO v3，并始终提供最佳优化的SVG。

Jake Archibald的SVGOMG在线优化工具。（大预览）

分层SVG元素

我为动画准备SVG的流程远不止绘制矢量和优化路径——还包括如何构建代码本身。当每个视觉元素都塞进一个SVG文件时，即使优化后的代码也可能难以导航。定位特定路径或组通常感觉像大海捞针。

瑜伽熊标题卡设计由Lawrence Goble（1958）。卡通标题重现。（大预览）

这就是为什么我分层开发SVG，一次导出和优化一组元素——始终按照它们在最终文件中出现的顺序。这让我通过粘贴每个清理过的部分来逐步构建主SVG。例如，我从像这样的渐变和标题图形背景开始。

渐变背景和标题图形。（大预览）

现在，我可以轻松识别背景渐变的路径及其相关的linearGradient，并查看包含标题图形的组，而不是面对一堵SVG代码墙。我借此机会向代码添加注释，这将使将来编辑和添加动画更容易：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<svg ...>
  <defs>
    <!-- ... -->
  </defs>
  <path fill="url(#grad)" d="…"/>
  <!-- TITLE GRAPHIC -->
  <g>
    <path … />
    <!-- ... --> 
  </g>
</svg>

复制

高斯模糊的轨迹。（大预览）

接下来，我添加瑜伽熊空中扫帚的模糊轨迹。这包括定义高斯模糊过滤器并将其路径放置在背景和标题层之间：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<svg ...>
  <defs>
    <linearGradient id="grad" …>…</linearGradient>
    <filter id="trail" …>…</filter>
  </defs>
  <!-- GRADIENT -->
  <!-- TRAIL -->
  <path filter="url(#trail)" …/>
  <!-- TITLE GRAPHIC -->
</svg>

复制

瑜伽熊的魔法星星。（大预览）

然后是魔法星星，以相同的顺序方式添加：

1
2
3
4
5
6

<svg ...>
  <!-- GRADIENT -->
  <!-- TRAIL -->
  <!-- STARS -->
  <!-- TITLE GRAPHIC -->
</svg>

复制

为保持一切有序并准备动画，我创建一个空组来容纳瑜伽熊的所有部分：

1

<g id="yogi">...</g>

复制

顺序添加瑜伽熊的组成部分。（大预览）

然后我从地面开始构建瑜伽熊——从背景道具开始，比如他的扫帚：

1

<g id="broom">...</g>

复制

接着是他的身体、头部、衣领和领带的分组元素：

1
2
3
4
5
6
7

<g id="yogi">
  <g id="broom">…</g>
  <g id="body">…</g>
  <g id="head">…</g>
  <g id="collar">…</g>
  <g id="tie">…</g>
</g>

复制

瑜伽熊标题卡设计由Lawrence Goble（1958）。卡通标题重现。（大预览）

由于我从相同大小的画板导出每个层，我不需要担心以后的对齐或定位问题——它们都会自动就位。通过这种方式分层元素，我保持代码清洁、可读且逻辑有序。这也使动画更流畅，因为每个组件更容易识别。

使用重用元素

当重复形状被反复重用时，SVG文件可能迅速变得臃肿。我对“Bewitched Bear”标题卡的重现包含80颗三种大小的星星。将所有形状合并为一个优化路径会将文件大小减少到3KB。但我想动画单个星星，这几乎会将其增加到5KB：

1
2
3
4
5
6

<g id="stars">
 <path class="star-small" fill="#eae3da" d="..."/>
 <path class="star-medium" fill="#eae3da" d="..."/>
 <path class="star-large" fill="#eae3da" d="..."/>
 <!-- ... -->
</g>

复制

将星星的填充属性值移动到它们的父组稍微减少总重量：

1
2
3
4
5
6

<g id="stars" fill="#eae3da">
 <path class="star-small" d="…"/>
 <path class="star-medium" d="…"/>
 <path class="star-large" d="…"/>
 <!-- ... -->
</g>

复制

瑜伽熊的闪烁星星。（大预览）

但更高效和可管理的选项是将每个星星大小定义为可重用模板：

1
2
3
4
5

<defs>
  <path id="star-large" fill="#eae3da" fill-rule="evenodd" d="…"/>
  <path id="star-medium" fill="#eae3da" fill-rule="evenodd" d="…"/>
  <path id="star-small" fill="#eae3da" fill-rule="evenodd" d="…"/>
</defs>

复制

通过这种设置，更改星星设计只需更新其模板一次，每个实例自动更新。然后，我使用引用每个，并使用x和y属性定位它们：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<g id="stars">
  <!-- Large stars -->
  <use href="#star-large" x="1575" y="495"/>
  <!-- ... -->
  <!-- Medium stars -->
  <use href="#star-medium" x="1453" y="696"/>
  <!-- ... -->
  <!-- Small stars -->
  <use href="#star-small" x="1287" y="741"/>
  <!-- ... -->
</g>

复制

这种方法使SVG更易于管理、加载更轻、迭代更快，尤其是在处理数十个重复元素时。最重要的是，它保持标记清洁而不牺牲灵活性或性能。

添加动画

星星跟随瑜伽熊偷来的扫帚为动画带来许多个性。我希望它们在深蓝色背景上以看似随机的模式闪烁，因此我首先定义一个关键帧动画，循环不同的不透明度级别：

1
2
3
4

@keyframes sparkle {
  0%, 100% { opacity: .1; }
  50% { opacity: 1; }
}

复制

接下来，我将这个循环动画应用到我星星组中的每个use元素：

1
2
3

#stars use {
  animation: sparkle 10s ease-in-out infinite;
}

复制

创建令人信服的闪烁秘密在于变化。我使用nth-child选择器在星星之间错开动画延迟和持续时间，从最快和最频繁的闪烁效果开始：

1
2
3
4
5

/* Fast, frequent */
#stars use:nth-child(n + 1):nth-child(-n + 10) {
  animation-delay: .1s;
  animation-duration: 2s;
}

复制

从那里，我分层添加额外的时间来混合事物。一些星星缓慢而戏剧性地闪烁，其他更随机，有各种节奏和暂停：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

/* Medium */
#stars use:nth-child(n + 11):nth-child(-n + 20) { ... }

/* Slow, dramatic */
#stars use:nth-child(n + 21):nth-child(-n + 30) { ... }

/* Random */
#stars use:nth-child(3n + 2) { ... }

/* Alternating */
#stars use:nth-child(4n + 1) { ... }

/* Scattered */
#stars use:nth-child(n + 31) { ... }

复制

通过深思熟虑地构建SVG和重用元素，我可以构建看起来复杂的动画而没有臃肿的代码，使即使像改变不透明度这样的简单效果也能闪烁。

细微的动作使瑜伽熊栩栩如生。（大预览）

然后，为增加真实感，我让瑜伽熊的头部摇摆：

1
2
3
4
5
6
7
8

@keyframes headWobble {
  0% { transform: rotate(-0.8deg) translateY(-0.5px); }
  100% { transform: rotate(0.9deg) translateY(0.3px); }
}

#head {
  animation: headWobble 0.8s cubic-bezier(0.5, 0.15, 0.5, 0.85) infinite alternate;
}

复制

他的领带飘动：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

@keyframes tieWave {
  0%, 100% { transform: rotateZ(-4deg) rotateY(15deg) scaleX(0.96); }
  33% { transform: rotateZ(5deg) rotateY(-10deg) scaleX(1.05); }
  66% { transform: rotateZ(-2deg) rotateY(5deg) scaleX(0.98); }
}

#tie {
  transform-style: preserve-3d;
  animation: tieWave 10s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
}

复制

他的扫帚摆动：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

@keyframes broomSwing {
  0%, 20% { transform: rotate(-5deg); }
  30% { transform: rotate(-4deg); }
  50%, 70% { transform: rotate(5deg); }
  80% { transform: rotate(4deg); }
  100% { transform: rotate(-5deg); }
}

#broom {
  animation: broomSwing 4s cubic-bezier(0.5, 0.05, 0.5, 0.95) infinite;
}

复制

最后，瑜伽熊本人在他的魔法扫帚上飞行时轻轻旋转：

1
2
3
4
5
6
7
8
9

@keyframes yogiWobble {
  0% { transform: rotate(-2.8deg) translateY(-0.8px) scale(0.998); }
  30% { transform: rotate(1.5deg) translateY(0.3px); }
  100% { transform: rotate(3.2deg) translateY(1.2px) scale(1.002); }
}

#yogi {
  animation: yogiWobble 3.5s cubic-bezier(.37, .14, .3, .86) infinite alternate;
}

复制

所有这些细微的动作使瑜伽熊栩栩如生。通过开发结构化的SVG，我可以创建充满个性的动画而不写一行JavaScript。

自己尝试：
See the Pen Bewitched Bear CSS/SVG animation [forked] by Andy Clarke.

结论

无论你是重现经典标题卡还是为界面动画图标，原则是相同的：

• 开始清洁，
• 早期优化，以及
• 一切结构时考虑动画。

SVG提供令人难以置信的创作自由，但只有在保持精简和可管理的情况下。当你像生产单元一样计划流程——逐层、逐元素——你将花更少时间解缠代码，更多时间使作品生动。

(gg, yk)

探索更多关于
SVG动画设计CSS

Smashing Newsletter
前端和UX提示，每周发送到你的收件箱。只是你可以实际使用的东西。

前端和UX工作坊，在线
带有实用要点、实时会话、视频录制和友好问答。

TypeScript in 50 Lessons
一切TypeScript，带有代码演练和示例。和其他印刷书籍。

— 评论 2
Fabio 写道 — 2025年6月4日 15:00 #
这篇文章真让人大开眼界！我一直认为优化SVG只是关于减少文件大小，但Andy Clarke显示它远不止如此。他清理SVG并为动画准备的方法很有道理。我特别欣赏使用Sketch和Affinity Designer等工具简化流程的提示。对瑜伽熊的怀旧引用也增添了趣味！肯定会将这些技术应用到我下一个项目。

回复
ss siri 写道 — 2025年6月5日 9:12 #
这是一个聪明且鼓舞人心的结论！清晰的结构和早期优化真正释放了SVG动画的全部潜力。

回复
发表评论
评论经过审核。只有当它们以建设性方式添加到讨论时才会发布。如果你不同意，请礼貌。我们都想在这里互相学习。我们使用GitHub Flavored Markdown进行评论。在句子中用单反引号（command）调用代码。对于不同的块，使用三反引号（code block）。拼写错误？请告诉我们。

你的消息
你的（真实）姓名
你的Twitter（例如’smashingmag’）
发表评论
我们使用cookie进行登录、结账和统计。在我们的隐私设置中了解更多。

不，谢谢。
没关系。

浏览所有Smashing Magazine主题 #
可访问性最佳实践商业职业清单CSS数据可视化设计设计模式设计系统电子商务Figma免费资源HTMLIllustrator灵感JavaScript移动性能隐私React响应式设计综述SEO排版工具UI可用性UXVue壁纸网页设计工作流程

致力于为设计社区提供高质量内容。
由Vitaly Friedman和Sven Lennartz创立。2006–2025。
Smashing自豪地运行在Netlify、TinaCMS和Swell上。
字体由Latinotype提供。
✎ 为我们写作联系我们关于我们（Impressum）隐私政策会员登录交付时间广告回到顶部