potrace 生成 svg 图片并采用 svgo 批量压缩

potrace 生成 svg 图片并采用 svgo 批量压缩

个人做的工具类项目，会不断补充新的前端可用工具、文档、新技术等

生成 svg 格式图片

原理是利用 potrace 生成 svg 格式的剪影,可以通过各类配置修改生成的 svg 图片数据，可替换成不同颜色、大小等等等等

Potrace.trace(imgData, params, (err, svg) => {
    const parser = new DOMParser();
    // 替换成图片src
    const newImgsrc = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
    // 生成的 svg 数据，可直接贴到 dome 节点
    const doc = parser.parseFromString(svg, 'image/svg+xml');
});

生成的 svg 图片会存在很多垃圾重复的数据，需要压缩一番，可以采用 npm svgo

将整个文件夹下的 svg 图片压缩，可以参考 github 上我项目上的代码 svgo

svgo 是 node 环境中使用的，需要采用 node 的命令格式触发压缩，

也可直接 fork 我的代码，将代码中的文件夹地址替换成你的 svg 文件夹地址，然后执行 svgo 命令即可

展示

---