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

myzbx 2025-04-29 02:36 42 浏览

解决网站图标问题的最佳方案——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 的画布就做好了。

文章配套视频链接「链接」

SVG 路径

上一篇：2.3 文件格式全解:PSD/JPG/PNG/SVG/GIF
下一篇：Popmotion – 小巧，灵活的 JS 运动引擎

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

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

说下你的vue项目的目录结构，该怎么划分?

8.7k star，一款超炫酷的动态可视化大屏项目

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

这么牛逼的cursor功能，赶紧用起来

用上Vue3，你真的变了吗?（vue3 key）

browser-use:AI 驱动的浏览器自动化神器——DOM识别与交互详解

巧克力:从一朵花开始的华丽变身_巧克力花束教程视频

comfyui安装MimicMotion扩展，AI跳舞动作模仿