蘋果系統使用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種情況》。