【学习图片】03：矢量图像

本文首发于微信公众号：大迁世界, 我的微信：qq449245884，我会第一时间和你分享前端行业趋势，学习途径等等。 更多开源作品请看 GitHub https://github.com/qq449245884/xiaozhi ，包含一线大厂面试完整考点、资料以及我的系列文章。

矢量图形是一种将一系列形状、坐标和路径传达给其渲染环境的方法。它们是一组关于如何绘制图像的指令。当该图像被放大或缩小时，该图像所代表的点和线的集合被按比例重新绘制。两点之间的平滑曲线在任何尺寸下都会被重新绘制，这与HTML元素上的CSS定义的边框在视口中被缩放时重新绘制的方式相似。

可扩展矢量图形（SVG）是一种基于XML的标记语言，由W3C开发。它是一种为现代 Web 设计的矢量图像格式。

事例：https://codepen.io/web-dot-de...

任何专门用于编辑矢量图像的设计软件都可以将图像导出为 SVG。但是，由于 SVG 是一种标准化的、可读性强的标记语言，因此它也可以使用任何文本编辑软件创建和编辑，而不管创建它的软件是什么，尽管对于实际复杂的图像来说这变得不现实。SVG 可以使用 CSS 进行样式化，或者包含可以在图像中构建行为和交互的 JavaScript。

除了对设计者和开发者的明显吸引力之外，SVG在终端用户体验方面也是一种令人难以置信的强大格式。与光栅图像格式基于像素网格的描述性信息相比，SVG源所包含的描述性信息通常是非常紧凑的，就简单的形状而言--稍微简化一点。

告诉浏览器 "在1x1和1x5之间画一条1px的红线 "和 "1x1是一个红色的像素。1x2是一个红色像素。1x3是一个红色像素。1x4是一个红色像素。1x5是红色像素"。反过来说，SVG的描述性要求浏览器进行更多的解释--更多的 "思考"。由于这个原因，复杂的SVG在渲染时可能会更加费力。同样的，一个高度复杂的图像可能意味着一组冗长的指令和较大的传输大小。

在能够立即识别出图像资源是否更适合使用 SVG 而不是常规光栅格式之前，可能需要一些试验和错误。但是，有几个指导方针：像图标这样的界面元素几乎总是适合使用 SVG。具有锐利线条、纯色和清晰定义形状的图像将可能是使用 SVG 的强烈候选。

SVG 的话题很大：一种与 HTML 共存的整个标记语言，具有独特的样式选项和功能。要了解更详细的 SVG 介绍，请参阅 MDN SVG 教程。

代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。

原文：https://web.dev/learn/images/...

交流

有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。 本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。