今天我们讨论 SVG 动画。矢量图像、和 CSS 如何协同工作以提供引人入胜的动态图形？为了找出答案，我采访了 SVG 专家 。她是一名前端开发人员和演讲者，拥有图形设计和动作设计背景。她早在 和 时代就开始编码，并肩负着让网络再次变得更加异想天开的使命。她目前在英国布莱顿的 工作，经常可以看到她在 上摆弄 SVG。我们知道她是一位熟练的开发人员和 SVG 专家，但您知道她连续三年获得全国青少年翼走冠军吗？我的出色朋友们，欢迎卡西·埃文斯。你好卡西。你好吗？ 卡西·埃文斯：我快崩溃了，谢谢 德鲁：今天我想和您谈谈您的兴趣之一，即 SVG，尤其是动画方面。我认为大多数收听此播客的人都会听说过某种形状或形式的可扩展矢量图形。我知道近年来我在徽标和图标等方面大量使用它们，但我们不要假设。那么对于那些不太熟悉 SVG 的人来说，它与向网页添加图形的其他方法有什么不同呢？ 卡西：当然，很多线索都在名字中。
代表可缩放矢量图形
因此，这些首先是可以是任意尺寸的图像。您可以将它们做得非常非常小或非常非常大，并且它们将保留图像质量并且不会像 JPEG 或 PNG 那样出现像素化。 卡西：您还可以使它们非常非常小，文件大小非常小。因此，每个人都在他们的网站上添加了一个 万兆字节的 ，并了解了它对页面加载的影响。因此，您可以向您的网站添加各种很酷的插图和内容，而不会严重影响性能，而且您还可以为它们添加动画，这是最令人兴奋的。对于 或 ，如果您想对它们进行动画处理或移动其中的一些部分，则必须将它们 塞浦路斯电话号码列表 切成小块或将它们分层，而对于 ，您可以在其中获得实际元素SVG。它有一个 结构，就像 一样。 德鲁：因此，我想在具有不同屏幕尺寸、不同像素密度和某种受限数据连接的移动设备世界中，SVG 确实是一种比旧图形样式更适合现代网络的格式。这公平吗？ 卡西：当然是。 德鲁：当然，大多数图像都是基于二进制的，但 SVG 完全是可查看的，不是吗？ 卡西：是的。所以，这真的很令人兴奋，因为您实际上可以右键单击并查看 SVG 上的源代码，并且可以遍历 DOM 并查看您所拥有的内容并以这种方式学习它，我觉得这真的很棒。
这感觉很像旧的网络
就像能够访问一个网站并查看其源代码并了解它是如何组合在一起的。 德鲁：感觉比 甚至 之类的东西更原生并集成到网络中，当然 是可扩展矢量图形，不是吗？以它自己的方式。这些技术感觉非常像一个黑匣子，装在页面上，你无法进出。更加集成，不是吗？ 卡西：是的。你这么说很有趣，因为当人们问他们是否应该使用 还是 来做某事时，我总是将 称为黑匣子。我认为很多时候，显然这取决于用例，但 的一个问题是，如果您由于 AO 列表 某种原因没有 ，如果您的代码失败，您最终会得到一个没有任何内容的小黑盒在里面。所以你可以创建这个疯狂的信息图表，在这个 元素中发生各种各样的事情，然后你就失去了一切。而 则更符合渐进增强，因此您可以拥有动画 ，也许使用 进行动画处理，但如果没有 ，您仍然可以获得插图。您仍然会在那里拥有 。 德鲁：对于网络来说并不陌生，不是吗？它已经存在很长一段时间了。 卡西：有，是的。它存在的时间比我在网络上做事的时间还要长。 德鲁：正如您所说，它确实似乎在动画等方面发挥了更大的作用，而且正如我们所提到的，它的扩展方式使其非常适合我们设计可能的网站。
