Smashing Animations Part 4: Optimising SVGs

SVG动画让我回想起童年观看的Hanna-Barbera卡通片，如《Wacky Races》《The Perils of Penelope Pitstop》和《Yogi Bear》。这些动画激发我使用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月首播的《Yogi Bear Show》的一集“Bewitched Bear”。在这个故事中，Yogi偷了女巫的扫帚来帮助他抓“pic-a-nic”篮子。

“嘿，嘿，嘿！”

The Yogi Bear Show © Warner Bros. Entertainment Inc.（大预览）

参加Smashing Workshops，学习前端、设计和UX，带有实用要点、实时会话、视频录制和友好问答。与Brad Frost、Stéph Walter等众多专家一起。

跳转到工作坊↬

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

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

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

从轮廓开始

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

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

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

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

绘制简单的背景形状

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

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

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

Adobe Illustrator: Object → Path → Simplify。（大预览）

优化代码

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

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

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

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

分层SVG元素

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

Yogi Bear标题卡设计 by Lawrence Goble (1958)。Toon Titles重现。（大预览）

这就是为什么我分层开发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>

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

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

 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>

Yogi Bear的魔法星星。（大预览）

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

1
2
3
4
5
6

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

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

1

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

顺序添加Yogi Bear的组件部分。（大预览）

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

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>

Yogi Bear标题卡设计 by Lawrence Goble (1958)。Toon Titles重现。（大预览）

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

使用重用元素

当重复形状被反复重用时，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>

Yogi Bear的闪烁星星。（大预览）

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

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更易于管理、加载更轻、迭代更快，尤其是在处理数十个重复元素时。最重要的是，它保持标记清洁而不牺牲灵活性或性能。

添加动画

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

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和重用元素，我可以构建看起来复杂的动画而没有臃肿的代码，使即使是像改变不透明度这样的简单效果也能闪烁。

细微的动作使Yogi Bear栩栩如生。（大预览）

然后，为增加真实感，我让Yogi的头部摇晃：

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;
}

最后，Yogi自己在魔法扫帚上飞行时轻轻旋转：

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;
}

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

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

结论

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

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

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

(gg, yk)

探索更多关于
SVG
Animation
Design
CSS

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

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

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

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

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

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

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

不，谢谢。
没关系。

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

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