SVG 的优势

背景

好处

可扩展性：像素完美

风格化

表现

不仅仅是一张图片

概括

编码愉快🚀

背景

什么是 SVG？SVG 是可缩放矢量图形 (Scalable Vector Graphics) 的缩写，它们以 XML 格式渲染。这种矢量图像格式意味着其文件大小比 JPEG、PNG 和 GIF 等其他图像类型要小得多。这种基于矢量的渲染方式也意味着 SVG 可以在不损失任何质量的情况下进行缩放，这对于响应式网页设计来说非常有利。那么，我们为什么要使用 SVG 呢？

好处

更小的文件大小

由于 SVG 以 XML 格式渲染，因此与 PNG 和 JPEG 相比，其文件大小较小。矢量图形中，决定和处理图像渲染的数据是 XML 标签，其中包含用于指定元素显示方式的属性。相比之下，PNG 或 JPEG 的构成方式就更复杂、成本更高，因此文件大小也更大。由于 SVG 的占用空间比 PNG 和 JPEG 更小，这意味着需要通过网络传输的字节数更少。这将有助于提升加载时间和性能。

可扩展性：像素完美

SVG 与分辨率无关，这意味着无论在何种屏幕尺寸上渲染，它们都能保持相同的像素级完美画质。与 JPG 或 PNG 不同，如果尝试缩放，如果图像尺寸不够大，SVG 就会开始出现像素化和模糊。JPG 和 PNG 可以有不同的文件大小类型，但这需要额外的工作，并且意味着需要通过网络传输更多数据。总而言之：无论缩放多少，SVG 都具有响应式设计，并且看起来质量很高。

风格化

由于 SVG 只是代码，您可以使用 CSS 和 JavaScript 对其进行自定义和操作。这种能力开启了无限可能。开发人员可以通过添加 CSS 类或更改 SVG 属性来轻松更改颜色，从而动态渲染不同的 SVG。您还可以使用 JavaScript 为 SVG 元素添加动画效果。下面我添加了几个动画 SVG 的链接，让您大致了解其可能性。

SVG 示例：

• 动画 SVG 场景
• 动画SVG机器人
• 动画 SVG 书签按钮
• 使用 React Spring 制作动画 SVG

表现

使用内联 SVG 可以提升应用的性能，因为它无需通过 HTTP 请求加载图像文件。由于内联 SVG 无需下载文件，因此可以减少页面的加载时间。这将有助于提升用户体验，因为它可以加快页面加载速度。

不仅仅是一张图片

虽然 SVG 可以实现与像素图形相同的目的，但它们可以提供丰富的交互式用户体验。SVG 由单独的 DOM 节点组成，我们可以将这些节点视为可以创建复杂用户交互的图形元素。例如，您可以使用 SVG 创建动态图表。我在面向客户端的生产应用程序中使用的一个图表库是Recharts，它建立在 SVG 元素之上。由于 SVG 是可扩展的，因此使 SVG 图表具有响应性的开销很小。使用一些 JavaScript 和 CSS，您可以使用 SVG 元素创建复杂的功能。这是另一个使用 SVG 和 React 构建的带有进度环倒计时的时钟示例：

概括

希望您现在对 SVG 的优势有了更深入的了解，并且在使用 PNG、JPEG 或 GIF 之前会三思而后行。简而言之，SVG 有助于提升应用性能，其像素级完美缩放功能响应迅速，并且支持高度自定义。

编码愉快🚀

博客文章：https://alexitaylor.com/blog/09-benefits-of-svg

如果您喜欢此内容，请在 Twitter 上关注我@alexi_be3 💙

更新：

2020 年 7 月 23 日：感谢Filip Biterski指出 SVG 不仅仅是一张图片。

2020年7月24日：正如Jan Küster所指出的：

SVG 可以有效地包含内联 JavaScript，因此如果您允许用户上传 SVG 然后显示给其他用户，则意味着存在 XSS 漏洞。

因此，无论是用户上传还是从第三方资源导入 SVG，清理 SVG 都至关重要。