苹果系统使用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请求加载到图像文件中。 由于没有文件可下载,因此页面加载速度更快。 更快的加载时间可以转化为更好的网页性能和更高的搜索引擎排名。 反过来,它可以改善用户体验。