文中先发于微信公众平台：大迁全球, 我的手机微信：qq449245884，我会第一时间与你分享前端行业发展趋势，学习途径这些。 大量开源系统著作可以看 GitHub github.com/qq449245884… ，包括一线大厂招聘面试详细考试点、材料及其我系列文章。
矢量图格式是一种将一系列样子、座标和途径传递给其3D渲染自然环境的办法。他们是一组有关如何绘制图像的命令。若该图象被放大或缩减时，该图象所代表点和线的结合被按比例分配再次制作。两点间的平滑曲线在所有的规格下都能被再次制作，这和HTML原素里的CSS界定的外框在视嘴中被放大时再次绘制的方法类似。
可扩展性矢量图格式（SVG）是一种基于XML的编译语言，由W3C开发设计。它是一种为现代 Web 定制的矢量素材图像文件格式。
例子：codepen.io/web-dot-dev…
一切专门用来编写矢量素材图像的制图软件都能够将图象导出来为 SVG。可是，因为 SVG 是一种规范化的、易读性高的编译语言，所以它也可以用一切文本处理手机软件建立和编写，不管建立它软件是什么，虽然对真实繁杂的图像而言这越来越不太现实。SVG 可以用 CSS 开展款式化，或是包括还可以在源图像搭建行为表现互动的 JavaScript。
不仅对设计师和开发者的显著诱惑力以外，SVG在终端产品用户感受方面也一种令人惊叹的强大文件格式。与光栅图像文件格式根据清晰度网格图的说明性信息内容对比，SVG源包含的的说明性信息内容一般是十分紧凑的，就简单的形状来讲--略微简单化一点。
告知电脑浏览器 "在1x1和1x5中间画一条1px的红线 "和 "1x1是一个红色的清晰度。1x2是一个鲜红色清晰度。1x3是一个鲜红色清晰度。1x4是一个鲜红色清晰度。1x5是鲜红色清晰度"。换个角度来看，SVG的说明性规定电脑浏览器开展更多表述--更多 "思索"。因为这些原因，繁杂的SVG在3D渲染时往往也会更加费劲。相同的，一个极度繁杂的图像可能意味着一组冗长的命令和比较大的传送尺寸。
在可以马上辨别出图象网络资源是不是比较适合应用 SVG 而非基本光栅尺文件格式以前，很有可能需要一些试验和不正确。可是，几个基本方针：像标志这种界面元素基本上一直适宜应用 SVG。具备锋利线框、单色和清楚界定样子的图像将有可能是应用 SVG 的积极备选。
SVG 讨论的话题非常大：一种与 HTML 共存的全部编译语言，具有独特的款式选择项和结构。要知道更详细的 SVG 详细介绍，客户程序 MDN SVG 实例教程。
代码部署后可能出现的BUG无法即时了解，过后为解决这种BUG，花掉了大量时间开展log 调节，这里顺带给大家推荐一个实用的BUG监控工具 Fundebug。
全文：web.dev/learn/image…