目录介绍：

• 1、svg图片上传到iconfont为空白
• 2、如何避免xss，比如svg">
• 3、AI导出svg上传到阿里矢量图标库（Iconfont），图片显示不全
• 4、秀米svg导出失败
• 5、为什么设计好的图标svg文件上传到iconfont后，显示正常，但是再下载到本地打开代码就显示不全了呢？

svg图片上传到iconfont为空白

近期项目需求，需要把UI设计的图片转为图标，且合并到阿里现有的项目图标中。试了好多次，SVG上传到阿里图标的都是空白的;

实现方案：

1.准备好图片转换工具inkscape；

2.登录阿里图标；

1.inkscape 0.92.3的中文版安装教程如下：

百度网盘：  

提取码：swxf

2.inkscape 0.92.3使用教程如下（最重要，不想图标上传后出现空白的，请仔细看哈）：

如何避免xss，比如svg">

0x01 常规插入及其绕过

1 Script 标签

绕过进行一次移除操作：

scrscriptiptalert("XSS")/scrscriptipt

Script 标签可以用于定义一个行内的脚本或者从其他地方加载脚本：

scriptalert("XSS")/script

AI导出svg上传到阿里矢量图标库（Iconfont），图片显示不全

首先【全部选中】要导出的图形，其次点击菜单栏中的【对象】—【路径】—【轮廓化描边】，最后点击菜单栏中【文件】—【储存为】选择要储存的svg格式【确定】完成。

秀米svg导出失败

你好，SVG没反应，效果出错了？

SVG效果出错/失效的原因主要有这几种情况：

➽上传的素材不符合该SVG的要求。一些SVG效果会要求前后图片的宽高尺寸保持一致，上传的尺寸如果不符合要求，SVG效果就会失效；

有关某个SVG效果具体的使用要求，可以参考SVG编辑器右侧的【素材要求】或使用教程

➽漏传或者误传素材，也会影响SVG的效果呈现（SVG的呈现效果以二维码中的案例为准），建议大家在上传素材之前，仔细阅读该SVG的使用教程，

除了以上的原因，导出或者同步的步骤操作有误也会导致效果出现错误。

0 2

导出/同步到微信时出错？

➽首先来说一说同步，无法同步的大部分原因在于你的公众号还没有对SVG编辑器进行授权；

注意！授权一定需要 管理员！管理员！管理员！来扫码授权，管理员和运营者是有区别的哈，不清楚的胖友们可以先在自己的公众号里确认一下 ！

➽选择导出的方式时，要根据 根据SVG效果的使用平台（135编辑器/微信后台），选择对应平台的代码进行复制，尽量在HTML/网页开发者模式中粘贴，不要直接粘贴代码，以免效果 有误。

0 3

在SVG前后插入图文？

Svg编辑器效果配合其它图文使用主要有 2 种方式：

➽在svg编辑器使用『135图文』编辑

➽导出svg效果代码到135编辑器编辑

两种使用方式本质上一致，只是使用习惯的不同而已，具体操作方法，三儿之前给大家码过一篇专题👇

0 4

给SVG添加背景图？

➽添加一个【点击不可弹出无缝图】素材，作为背景图

➽选中SVG素材所在的区块，点击上方的【间距】按钮，将顶部的外边距调整为合适的值，该SVG素材就嵌入到背景图之中了

为什么设计好的图标svg文件上传到iconfont后，显示正常，但是再下载到本地打开代码就显示不全了呢？

设计的时候应该用了蒙版，或者没有扩展、轮廓化，用symbol的引用方式可以避免，还能保留多种颜色