解决网站图标问题的最佳方案——SVG！SVG是一种基于XML语法的图像格式。英文全称是：ScalableVectorGraphics，可以缩放矢量图形，是W3C的一个提案。我们用手机拍摄的照片一般都是基于像素格式进行处理的，图片放大后会出现模糊变形的情况。SVG是对图像形状的描述，所以它本质上是一个文本文件，体积小，无论放大多少倍都不会变形。让我们真正体验一下。打开阿里巴巴矢量图标库网站，（https://www.iconfont.cn/）在素材库菜单中选择矢量图库，选择任意主题点击进入，鼠标拖入图标内，点击下载按钮，并在弹出的框中分别点击SVG下载和PNG下载，就会将这个图标的两种格式文件下载到本地电脑，并将图片复制到我们的目录下。现在，它们可以作为图片插入到网页中。打开编辑器并创建一个新的svg-demo.html文件。完成基本代码，在body中添加一个img标签，设置属性src的资源路径为当前目录下png图片的名称，宽度设置为100，高度设置为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定义宽度等于800和高度等于600的属性。节省。回到浏览器，刷新，按键盘F12，打开开发者工具，在元素选项卡下，点击svg元素，我们可以看到一个800×600的画布就做好了。文章配套视频链接https://www.bilibili.com/video...
