解决网站图标问题的最佳计划——SVG！
SVG 是一种基于 XML 语法的图像格式，英文全称是：Scalable Vector Graphics，即可缩放矢量图，是 W3C 的一项倡议。
咱们用手机拍摄的照片，图片格式个别都是基于像素解决的，图片放大会含糊失真。SVG 则是属于对图像的形态形容，所以它实质上是文本文件，体积较小，且不论放大多少倍都不会失真。咱们来实在的体验一下。关上阿里巴巴矢量图标库网站，（https://www.iconfont.cn/)
在素材库菜单里抉择矢量插画库，抉择任意一个主题点击进去，鼠标划入图标，点击下载按钮，在弹框中别离点击 SVG 下载和 PNG 下载，这个图标的两种格式文件就下载到本地电脑了，将图片拷贝到咱们的目录下。当初，它们能够当做图片插入到网页中了。
关上编辑器，新建一个 svg-demo.html 文件。补全根底代码，在 body 里增加一个 img 标签，属性 src 的资源门路设置为当前目录的 png 图片名，width 宽度设置为 100，height 高度也设置为 100。复制另一个 img 标签，src 的值批改为当前目录的 svg 图片名。保留文件。
在浏览器中关上网页，两张图片显示了。目前看，两张图片没有什么区别，但当咱们把两张图片逐步放大时，就会发现，png 格局的图片边界含糊了，svg 格局的图片边界仍然清晰。
svg 图片怎么制作呢？返回编辑器，咱们在 VSCode 里关上 png，能够间接预览图片，其实 png 图片是基于像素解决的，咱们不能在 VSCode 里编辑。再关上 svg 图片，咱们发现 svg 图片是用相似 html 代码绘制进去的。因而，咱们能够通过 html 元素来绘制 svg 图片！
能够应用 svg 标签来实现。svg 标签是 svg 图形的一个容器，它是一个双标签，根本语法是：尖角号 svg，尖角号 /svg。外面蕴含很多子标签，用于绘制各种图形。svg 也能够了解为绘制图形的画布，它有两个重要的属性，width，定义画布的宽度，height，定义画布的高度，它们值都是数字。
再次关上 svg-demo.html 文件，在图片下方增加 br 标签。再增加一个 svg 标签，给 svg 定义属性 width 等于 800，height 等于 600。保留。
回到浏览器，刷新，按键盘 F12，关上开发者工具，在 elements 页签下，点击 svg 元素，咱们看到，一个 800 乘 600 的画布就做好了。
文章配套视频链接 https://www.bilibili.com/vide…