作为虚拟货币行业的人，我们常说svg转换成icon需要注意很多细节。你知道svg到iconfont吗？今天就让边肖告诉你吧！

一般来说，建议用Ai(相对PS)制作图标，保存为SVG。

可以先在纸上画画，用钢笔工具根据自己的画风在Ai里勾出来线条。

绘制并保存SVG图标。。可以在PS、AI、素描、网页之间使用

svg制作iconfont，直接引入字体。

也可以用SVGDefs/Symbols直接引用，不兼容IE。虽然圣诞节与西方人的信仰有关，但对我们中国人来说，它是一个与浪漫、娱乐和送礼有关的节日。所以，让'；s用AI画一组SVG格式的圣诞狂欢节图标。。网页设计师应该很熟悉。网页的字体图标通过SVG插入网页，保持了高清的完美细节，在多平台网页中受到追捧。本教程将教你如何通过AI绘制SVG图标，并通过在线工具生成字体图标。。让'；一起狂欢吧！一、理解SVG图标首先让'；让我们来谈谈SVG的图片格式。SVG对WEB非常友好，尤其是近年来显示屏的革新。为满足无数不同尺寸手机屏幕的要求，矢量图形发挥了自己的特点，即无论屏幕大小，，显示的非常清晰，像素级画面相形见绌。对于网络来说，"全屏"一直是个问题(因为没有人愿意等着一张重量级的图片通过手机加载)，而SVG是一种简化的矢量格式，用XML传输。许多不必要的"详细信息"已被删除，留下一个相对较轻的文件。最后，SVG文件的内容可以复制，也可以像WEB中的其他元素一样进行美化。SVG的一部分可以分离，图片的颜色可以改变。，重置笔画大小，设置透明度，我们还可以给它一些效果(如模糊)，甚至动画效果.这一切都可以通过CSS和JS来完成。SVG不仅可以做成图标，还可以做成LOGO、标语、文字等等。。二、绘制图标1。尺寸的确定在我们画图标之前，我们应该对整个图标的尺寸有一个清晰的概念。也就是说，有时候你打开全屏画的图标，等它缩小了(图标一般都是缩小的)，但效果往往是另一回事。。矢量图标的大小通常不是大问题，因为矢量的优势在于无限的可扩展性。不过，最好有两个方案再画。图标文件的大小是多少？图标线有多少像素？经过策划，你可以试着画一张很简单的草图，然后稍微缩小看看效果。只有这样才能判断线的大小多少才合适。2.用网格线打开AI，新建文档。在这里，我建立了一个800px*800px的文档。根据刚才的粗略判断。我把我要画的图标设置为：笔画为16px，内线为8px，其中8px是基本单位。那么，我们就可以知道我们要画的矩形网格也是8pt。因此，对于新创建的文档，选择查看显示网格和对齐网格。在[编辑首选参考线和网格]中，"网格线间隔"可以设置为8px。其他设置请参考我提供的设置参数。3.试着用钢笔工具和基本图形的笔画出轮廓。我在这里设置的笔画大小是16磅。。先画出圣诞袜的轮廓。使用钢笔工具绘制时，存在鼠标控制不当导致的错误，线条不够流畅。此时，您可以在工具栏中找到[平滑工具]来平滑对齐路径。这个工具经常可以帮助你自动平滑手绘线条。。记得在平滑之前选择相应的路径。4.接下来画图案，我'；我将在圣诞袜上添加一些图案，但是请记住，如果我们想制作SVG图标，我们应该避免使用图案。在画图标的过程中，每一个细节都要用路径来画。。画雪花有两种方法。一种是直接用矩形画，然后我们要把笔画关了。另一种是仍然使用线条。选择哪一个完全是个人习惯问题。我们用矩形来构造雪花的形状。先画三个矩形，旋转-45。，在下面的图1中排列样式。这三个矩形被分组，然后复制，复制的形状向左对称形成如下图2所示的样式。将该图形分组后，在顶部添加一个矩形，将其旋转45度，然后在中间对齐两个形状。然后分组。。让'；让我们用这个已经做好的纸样做一个纸样。这时，你可以采用一种更"愚蠢"方法，就是直接复制粘贴然后旋转角度。当然，还有另一种方式适合孩子'；想要提高技能的鞋子。选择此对象，然后单击旋转工具，按住ALT键，将中心点拖动到下图所示的底部，这就是我们将要建立的图案的中心。松开ALT键后，会弹出旋转工具的设置面板。我们将旋转角度设置为90,然后单击"复制"。，将出现一个新的复制图案，围绕中心点旋转90度。此时，选中新图案后，单击"ctrlD"并将之前的操作重复两次。这样一个图案就完成了，我们可以在中间加一个长方形。。把上面做好的雪花图案分组，然后复制粘贴两张到另一个地方做装饰。如图所示。接下来，让'；让我们在剩下的空白处加上一点格子图案。由于我们最不希望制作的是SVG图像，所以需要注意的是，在生成SVG图标之前，路径中不应该有重叠。。换句话说，我们做的图形，首先必须是矢量，可以自由缩放。二是全面展开成封闭的填充格局。为此我放弃了通过建立模式来画网格，剩下的方法只能用矩形拼凑？不错在和几个网友讨论了这个问题后，我发现了一个方便有效的方法，就是用虚线画一个网格。这里，我要画的网格的大小是一个边长为8pt的正方形。因此，我首先在这里选择线条工具，并将线条笔画大小设置为8pt。单击"中风"，进入笔画设置面板，将虚线设置为8pt。这样，线条就可以变成一排排网格，从而画出网格图案。接下来可以继续加一点格子图案，在喜欢的地方画虚线。我们的圣诞袜子图案终于完成了。。但是请记住，在制作SVG图标之前，需要以下步骤。5.SVG图标的准备选择所有对象，输入对象扩展名，然后勾选"中风"和"填充"在弹出的扩展设置面板中。按住ctrl+shift+F9。，调出路径查找器，并选择联合，这是合并形状的按钮。此时，整个格局已经形成了一个封闭的路径格局。第三，生成SVG图标。要生成SVG图标，只需将文件保存在。SVG格式。，然后输入icomoon在线字体图标生成，点击"导入图标"在网站左上角，选择SVG文件，开始上传。在我的收藏夹中还有其他在线字体图标生成工具和网站资源的集合。可以点击去看看。。上传成功后，选择"生成字体"在右下角进入编辑页面，在这里你可以通过修改文件名进行编辑。有一个"获取代码"图标底部的按钮。点击后会弹出字体图标的代码。，在你做网页的时候还是被你复制使用。4.圣诞狂欢福利学完教程，自己动手当然必不可少。为了让圣诞节轻松一点，我想介绍一下已经完成的圣诞图标福利。点击这里下载到我的微盘上。提前祝大家圣诞快乐！

使用font-face声明字体。Font-family是自定义字体名称，url是字体文件的存储路径，format是字体文件格式。

@font-face{

font-family:'；图标字体'；/*自定的字体名称*/

src:URL('；iconfont.eot？#iefix')格式('嵌入式-opentype'；)，/*IE6-IE8*/

URL('；iconfont.woff')格式('woff')、/*chrome、firefox*/

URL('；iconfont.ttf')格式('truetype')、/*chrome、firefox、opera、Safari、Android、iOS4.2*/

URL('；iconfont.SVG#iconfont'；)格式('；svg');/*iOS4.1-*/

}

SolangeSiesorgfltigdieobengenannten，那么你已经知道svg到iconfont的相关知识了。如果你对屏幕前的svgtoicon有什么好的建议和想法，请在下面的评论区评论，我们会及时回复。