SVG
1 引言
在前端开发中常用的图标通常是 SVG 格式的。SVG 是一种矢量图形格式,可以根据背景变色,且在缩放时边缘不会模糊。像常用的 Element Plus Icon 就是使用 SVG 格式实现的。不过,有时候会找不到我们想要的图标,比如“另存为”、“剪切板”等。引入其他图标集可能也未必包含所有需要的图标。此外,这样做改动太大,还需要确保所有图标在风格上的一致性(例如宽度、弧度的一致)。因此,需要自己制作一些图标。
2 SVG 简介
- SVG 是一种使用 XML 定义的可缩放矢量图形。
- 具体的 SVG 文件请参见:https://github.com/element-plus/element-plus-icons/ 中 packages/svg 目录下。
- 建议以现有的图标为基础,以复制粘贴和调整为主。
2.1 示例
- vue 中的 svg 格式形如:
1 | <template> |
定义自己的 SVG,只需要修改 YourIcon 及 path 内容即可。
2.2 path 语法
这里的 "path" 不是指具体路径,而是描述图形轮廓的矢量指令集。基本语法如下:
- M = 移动到 (Move to)
- L = 画直线到 (Line to)
- H = 水平线到 (Horizontal line to)
- V = 垂直线到 (Vertical line to)
- Z = 闭合路径 (Close path)
- C = 曲线 (Curve)
3 svg 编辑工具选择
3.1 常用工具
试用了一些设计工具,具体如下:
- Figma
- 在线工具:https://www.figma.com/
- 用后感:
- 在线使用,功能齐全,但学习成本较高
- 我只用它制作 24x24 的小图标,有点大材小用
- SVGEeditor
- 在线工具:https://svgeditoronline.com/
- 用后感:
- 功能过于简单,不太够用
- Inkscape
- 本地使用,需要安装,约 140M
- 用后感:
- 功能多样且免费,用起来比较顺手
3.2 使用体验
- 如果想简单一些,可以将一些免费的 SVG 资源复制其路径内容到自己的 Vue 文件中。
- 如果需要自己设计并保持统一风格,建议使用 Inkscape。
- 我觉得 24x24 的图标自己稍微修改一下就行,并不需要多么高深的艺术技能,而且使用次数不多,充会员也不值得。
4 inkscape 用法
4.1 安装
1 | sudo apt-get install inkscape |
4.2 做图标步骤
- 在菜单中选择“由模板新建”,并选择 24x24 的图标大小,或打开现有的 SVG 文件。
- 使用基础形状工具如矩形、圆形和线条进行绘制。如果熟悉 Photoshop,推荐使用钢笔工具。
- 选中绘制对象,打开右侧的填充/描边面板进行设置。
- 利用路径工具编辑节点。
- 导出 SVG 并将其复制到 Vue 文件中。
- 如果图形元素较多,导致布局混乱,可以使用 Copilot 进行优化,无需额外寻找优化工具,Copilot 能够自动解决。
4.3 从网页中抠图标
如果喜欢网页上的某个 SVG 图标,可以使用以下方法获取:
- 在浏览器中打开 DevTools (F12)
- 选择 Elements 面板
- 找到图标元素
- 右键 -> Copy -> Copy Element,获取其中的 svg 部分
- 注意:要去除多余的 class
5 参考资源
现成的 SVG 资源可以参考以下网站:
- Element Plus 图标预览:https://element-plus.org/zh-CN/component/icon.html
- Heroicons 预览:https://heroicons.com
- Font Awesome 预览:https://fontawesome.com/icons
- 这个网站有部分免费资源,直接提供 SVG 格式内容复制
- 复制 SVG 时,注意删除多余的注释
All articles in this blog are licensed under CC BY-NC-SA 4.0 unless stating additionally.