苹果系统使用svg 动画_为什么要使用SVG图像：如何为SVG设置动画并使其快速闪电化

苹果系统使用svg 动画

我们为什么要使用SVG？ (Why Are We Using SVG?)

The web development sector is growing at a rapid pace, and SVG (scalable vector graphics) images are becoming more popular. As vector images, SVGs are composed of mathematical equations that define the positioning and color of lines and curves which make up graphic shapes and text in XML format. SVGs are used for icons, logos, graphic designs, and fonts.

Web开发部门正在快速发展，SVG(可缩放矢量图形)图像正变得越来越流行。 SVG作为矢量图像由数学方程式组成，这些数学方程式定义了以XML格式构成图形和文字的直线和曲线的位置和颜色。 SVG用于图标，徽标，图形设计和字体。

Using SVGs is an easy choice once you consider the advantages they offer. For a client, you get superb quality on any device. For us as developers, there are even more reasons to use SVG.

一旦考虑了SVG的优势，使用SVG就是一个容易的选择。对于客户而言，您可以在任何设备上获得一流的质量。对于作为开发人员的我们来说，还有更多使用SVG的理由。

Let's discuss some of the benefits of SVG now.

现在让我们讨论SVG的一些好处。

1.基于文本的格式 (1. Text-based format)

SVG elements contain text, which greatly improves the accessibility of a website. But the main advantage is that this text is indexed by search engines. And a user can find an SVG file via Google.

SVG元素包含文本，这大大改善了网站的可访问性。但是主要优点是该文本由搜索引擎索引。用户可以通过Google查找SVG文件。

2.可扩展性 (2. Scalability)

The quality of SVG images does not depend on the resolution. Unlike images of other formats or icon fonts, SVGs look perfectly sharp on any device with any screen size. Scalability also means that if you use the same image throughout the website but in different sizes, you use a single SVG. You do not have to create multiple copies of it as in the case of PNG. Instead, you embed the same image and define the size of it directly in SVG code.

SVG图像的质量不取决于分辨率。与其他格式或图标字体的图像不同，SVG在任何屏幕尺寸的任何设备上看起来都非常清晰。可伸缩性还意味着，如果您在整个网站上使用相同的图像，但尺寸不同，则将使用一个SVG。您不必像PNG一样创建多个副本。相反，您可以嵌入同一图像，并直接在SVG代码中定义其大小。

3.高性能 (3. High performance)

If you prioritize performance, you should use SVG. With SVG, there is no need for an HTTP request to load in an image file. The page loads faster as it has no files to download. Faster loading time translates into better webpage performance and higher search engine ranking. In turn, it improves user experience.

如果您优先考虑性能，则应使用SVG。使用SVG，无需将HTTP请求加载到图像文件中。由于没有文件可下载，因此页面加载速度更快。更快的加载时间可以转化为更好的网页性能和更高的搜索引擎排名。反过来，它可以改善用户体验。

4.小文件 (4. Small file size)

The size of simple SVG files is defined by the colors, layers, gradients, effects, and masks that it contains. The size of a PNG or any other raster graphics file is defined by the number of pixels that it consists of. The larger a PNG image is, the heavier it gets in size. This is not the case for SVG icons, though. Also, SVGs can be optimized, and I will tell how later in this article.

简单SVG文件的大小由其包含的颜色，层，渐变，效果和蒙版定义。 PNG或任何其他栅格图形文件的大小由其组成的像素数定义。 PNG图像越大，其尺寸越大。但是，SVG图标不是这种情况。另外，可以优化SVG，我将在本文后面介绍如何进行优化。

5.大量的编辑和动画制作机会 (5. Numerous editing and animating opportunities)

Unlike raster images, vector images can be edited both in special vector drawing programs and directly in a text editor. You can also edit colors or sizes of SVG icons directly via CSS. As for animating SVGs, it can be done with the help of SMIL, Web Animations API, WebGL, or CSS animation. Scroll down to learn more about CSS animation of SVG images.

与光栅图像不同，可以在特殊的矢量绘图程序中直接在文本编辑器中编辑矢量图像。您还可以直接通过CSS编辑SVG图标的颜色或大小。对于SVG动画，可以借助SMIL，Web Animations API，WebGL或CSS动画来完成。向下滚动以了解有关SVG图像CSS动画的更多信息。

6.与HTML，XHTML和CSS集成 (6. Integration with HTML, XHTML, and CSS)

SVG was designed “to integrate with and extend other prominent open Web platform technologies, such as X/HTML, CSS, and Javascript”, according to W3C. So, unlike different image formats, this format can be easily integrated with other documents and technologies.

据W3C称，SVG被设计为“与其他杰出的开放Web平台技术集成和扩展，例如X / HTML，CSS和Javascript”。因此，与不同的图像格式不同，此格式可以轻松地与其他文档和技术集成。

7. W3C文档对象模型支持 (7. W3C Document Object Model support)

There is growing community support for SVG. The World Wide Web Consortium (W3C) has always claimed that the Internet cannot do without vector images. This organization basically created the SVG format, and they actively support it nowadays.

社区对SVG的支持越来越多。万维网联盟 (W3C)一直声称，互联网离不开矢量图像。该组织基本上创建了SVG格式，如今他们积极支持它。

SVG的不便之处是什么？ (What Are the Inconveniences of SVG?)

The large number of small parts makes the use of the SVG format irrational. The more parts an image consists of, the heavier it grows in size.

大量的小部件使SVG格式的使用不合理。图像组成的部分越多，其尺寸越大。

For example, here are two SVG maps of the United States. The second one is slightly more detailed than the first one. But the higher level of detail cost almost a fivefold increase in file size – 33 KB compared to 147 KB. If this map was not monochromatic, the increase would be much greater.

例如，这是美国的两个SVG地图。第二个比第一个稍微详细一些。但是更高级别的细节使文件大小几乎增加了五倍，从147 KB增长到33 KB。如果该图不是单色的，则增加的幅度将更大。

If the picture is linear and contains a few colors – SVG is a solution. However, if the details matter and there are a lot of them, PNG or JPEG may be more suitable.

如果图片是线性的并且包含几种颜色– SVG是一种解决方案。但是，如果细节很重要，并且细节很多，则PNG或JPEG可能更合适。

Also note that SVG cannot be used for photographs. If you use a photograph on your website, SVG is not the best option. You definitely should go with a raster image format.

另请注意，SVG不能用于照片。如果您在网站上使用照片，则SVG并非最佳选择。您绝对应该使用光栅图像格式。

如何优化SVG图像 (How to Optimize SVG Images)

When rendering a vector format, we have to write some extra SVG code. The end result should be optimized using different services. Most often, for optimizing SVG, I use a Node.js tool SVGO. It is quite easy to use, and there is no need to upload the images to other websites.

呈现矢量格式时，我们必须编写一些额外的SVG代码。最终结果应使用不同的服务进行优化。通常，为了优化SVG，我使用Node.js工具SVGO 。它非常易于使用，不需要将图像上传到其他网站。

如何制作SVG动画 (How to Animate SVG)

SVG graphics on the web can be animated in a number of ways:

网络上的SVG图形可以通过多种方式进行动画处理：

SMIL, which is the native SVG animation specification
SMIL，这是本地SVG动画规范
Web Animations API, which is a native JavaScript API allowing you to create more complex sequential animations without loading any external scripts
Web动画API，这是一种本地JavaScript API，可让您创建更复杂的顺序动画而无需加载任何外部脚本
WebGL
WebGL
CSS animation
CSS动画

Let’s consider the last one.

让我们考虑最后一个。

CSS animation is used in order to avoid overloading your service with big libraries for animating icons and loaders.

使用CSS动画是为了避免使用大型库来使图标和加载器动画化，从而使服务过载。

To see the example of SVG check the animated yolk, the graphic design of which was initially drawn in Sketch.

要查看SVG的示例，请检查动画的蛋黄，该蛋黄的图形设计最初是在Sketch中绘制的。

As you can see here, I use Keyframe Animation Syntax for animation. It is implemented by setting the initial position of an element by id (0%), transition (50%) and final position (100%). To achieve smooth animation, initial and final values are equal.

如您所见，我将关键帧动画语法用于动画。通过将元素的初始位置设置为id(0％)，过渡(50％)和最终位置(100％)来实现。为了获得流畅的动画效果，初始值和最终值必须相等。

Here are some benefits of using the CSS approach to SVG animation:

使用CSS方法处理SVG动画有以下好处：

You do not need an external library.
您不需要外部库。
Preprocessors (like Sass or Less) allow you to create variables.
预处理程序(如Sass或Less)可以创建变量。
You can use onAnimationEnd and some other animation hooks with native JavaScript.
您可以将onAnimationEnd和其他一些动画挂钩与本机JavaScript结合使用。
This approach is easy to use for responsive web design development because you can modify your animation with media queries.
这种方法易于用于响应式Web设计开发，因为您可以使用媒体查询来修改动画。

The downsides of using CSS animation are the following:

使用CSS动画的缺点如下：

You cannot produce some complex physics effects, which would make the animation more realistic.
您无法产生一些复杂的物理效果，这会使动画更加逼真。
A lot of recalculation needs to be done if you adjust timing.
如果您调整时间，则需要进行很多重新计算。
CSS and SVG graphics on mobile sometimes require strange hacks.
移动设备上CSS和SVG图形有时需要奇怪的技巧。

例如 (For Example)

Still, we can make some interesting projects with the help of simple and trivial CSS animation. For example, I have made a simple game-video using HTML, CSS, and a little bit of JavaScript. All the SVGs were drawn in Sketch. The objective of this game is to save the princess. In any situation, just click. You can find the project at my GitHub.

尽管如此，我们仍可以借助简单而琐碎CSS动画制作一些有趣的项目。例如，我使用HTML，CSS和一些JavaScript制作了一个简单的游戏视频。所有SVG均以Sketch绘制。这个游戏的目的是拯救公主。在任何情况下，只需单击。您可以在我的GitHub上找到该项目。

总结 (To Wrap Up)

SVGs are a great image format to go with. They are scalable, lightweight, text-based, and efficient. They are easy to edit, animate, and integrate. Importantly, they are supported by almost any browser except Internet Explorer 8 and Android 2.3.

SVG是一种很棒的图像格式。它们是可伸缩的，轻量级的，基于文本的，高效的。它们易于编辑，制作动画和集成。重要的是，除Internet Explorer 8和Android 2.3外，几乎所有浏览器都支持它们。

While learning to work with scalable vector graphics images may take you some time, it is an investment that will pay off considering the benefits of SVG.

虽然学习使用可伸缩矢量图形图像可能需要一些时间，但考虑到SVG的优势，这是一笔可观的回报。

您对软件项目有想法吗？ (Do you have an idea for a software project?)

My company KeenEthics is a team of experienced web application developers. In case you need a free estimate of a similar project, feel free to get in touch.

我的公司KeenEthics是一个由经验丰富的Web应用程序开发人员组成的团队。如果您需要对类似项目的免费估算，请随时与我们联系。

You can read more of similar articles on my Keen Blog. Allow me to suggest you read The Value of User Testing or 7 Cases When You Should Not Use Docker.

您可以在我的Keen博客上类似的文章。请允许我建议您阅读《用户测试的价值或不应该使用Docker的7种情况》。