用SVG替换您的动画GIF

No one loves dancing hamster GIFs more than I do. But all those animated frames can add up to files so large you don’t even see the dancing hamster. Your other tab has already loaded and you’ve followed the dopamine hits down another social media rabbit hole.

没有人比我更喜欢跳舞的仓鼠GIF。但所有那些动画帧可能会导致文件变得如此庞大，以至于你甚至看不到跳舞的仓鼠。你的另一个标签已经加载，而你已经跟随多巴胺的刺激进入了另一个社交媒体的兔子洞。

There’s an alternative for those giant animated GIFs: animated SVGs.

对于那些巨大的动画GIF，有一个替代方案：动画SVG。

Along with much smaller file size you also get infinite scalability and the use of some — though, sadly, not all — media queries. Let’s take a look.

除了文件大小更小外，你还可以获得无限的可缩放性以及一些——虽然遗憾的是，并非所有——媒体查询的使用。让我们来看看。

Warning: some of the animations in this article do not use a prefers-reduced-motion media query. We’ll discuss why that is later in the article.

警告： 本文中的某些动画不使用 prefers-reduced-motion 媒体查询。我们将在文章后面讨论原因。

First let’s create a simple rhombus in SVG. You could do a square, but rhombus is more fun to say.

首先，让我们在 SVG 中创建一个简单的菱形。你可以做一个正方形，但菱形说起来更有趣。

<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" clip-rule="evenodd" viewBox="0 0 500 500"> <path id="rhombus" fill="#fc0000" d="m454 80-68 340H46l68-340h340Z"/> </svg>Code language: HTML, XML (xml)

<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" clip-rule="evenodd" viewBox="0 0 500 500"> <path id="rhombus" fill="#fc0000" d="m454 80-68 340H46l68-340h340Z"/> </svg>代码语言：HTML, XML (xml)

Next let’s do a quick spinning motion that we’ll run infinitely.

接下来，让我们做一个快速的旋转动作，我们将无限运行它。

#rhombus { transform-origin: center; rotate: 0deg; animation: spinny-spin 3.5s forwards infinite ease-in-out; } @keyframes spinny-spin { 0% { rotate: 0deg; } 90%, 100% { rotate: 720deg; } }Code language: CSS (css)

#rhombus { transform-origin: center; rotate: 0deg; animation: spinny-spin 3.5s forwards infinite ease-in-out; } @keyframes spinny-spin { 0% { rotate: 0deg; } 90%, 100% { rotate: 720deg; } }代码语言：...