共计 1201 个字符，预计需要花费 4 分钟才能阅读完成。
本文首发于微信公众号：大迁世界, 我的微信：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 源所蕴含的描述性信息通常是十分紧凑的，就简略的形态而言 – 略微简化一点。
通知浏览器 “ 在 1 ×1 和 1 ×5 之间画一条 1px 的红线 “ 和 “1×1 是一个红色的像素。1×2 是一个红色像素。1×3 是一个红色像素。1×4 是一个红色像素。1×5 是红色像素 ”。反过来说，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 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。