零基础教你学前端——43、初识SVG

解决网站图标问题的最佳方案——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...