el-button 图标显示在字后边_SVG图标实战设计师也要懂一点代码

互联网产品开发中，SVG图标已被广泛应用。各大主流平台组件库也提供了大量默认的SVG图标，供设计师和开发工程师使用。这篇文章将以项目实操经验为例，为大家介绍SVG图标在设计制作的过程中是怎样进行图形与代码的转化。帮助大家粗略了解以代码形式展示的图标。话不多说，我们先来看一看这一组代码吧。

上图代码的图形呈现

这就是SVG图标与其对应的代码。看到代码的一瞬间，大多数设计师一开始是拒绝的，他们也知道，在工程师的世界里，这代表着一个图形。在设计师的世界里，上面的代码是以图形呈现的一个点赞图标。代码其实并不难，耐心看下去，你会发现它比一元二次方程简单多了。作为设计师，了解一些和设计相关的代码知识有利于把控设计还原质量，同时也能和开发工程师高效沟通。让我们先从SVG的定义与优势开始了解它吧。

SVG及其优势

2003年1月14日，太阳微系统、Adobe、苹果公司、IBM 以及柯达参与定义SVG 1.1 ，SVG正式成为W3C推荐标准。SVG 全名为可伸缩矢量图形 (Scalable Vector