SVGcode：将栅格图像转换为SVG矢量图形的渐进式Web应用

SVGcode是一个渐进式Web应用，可以将JPG、PNG、GIF、WebP、AVIF等栅格图像转换为SVG格式的矢量图形。它使用了文件系统访问API、异步剪贴板API、文件处理API和窗口控件覆盖自定义功能。该应用可在<a href="https://svgco.de/">SVGco.de</a>上使用。看到我做了什么了吗？欲了解更多背景信息，请阅读随附的文章或观看视频。

<a href="https://svgco.de/"> <img src="https://yellow-cdn.veclightyear.com/ab5030c0/2a0a1ce6-d239-42b0-9022-b240d8b7256f.png" alt="SVGcode应用截图" width="707" height="497" /> </a>

通过网络访问或从应用商店安装

除了在svgco.de使用Web应用外，你还可以从Windows上的Microsoft Store安装SVGcode。

<a href="https://svgco.de/"><img height="50px" src="https://yellow-cdn.veclightyear.com/ab5030c0/bb82ca77-b083-495a-bd8c-bf03e64aed72.svg"></a> <a href="https://www.microsoft.com/en-us/p/svgcode/9plhxdgsw1rj#activetab=pivot:overviewtab"><img height="50px" src="https://yellow-cdn.veclightyear.com/ab5030c0/d6cbc843-341c-4348-b90a-a5181bad877b.svg"></a>

开发和/或贡献

1. Fork此仓库。
2. 从你的fork克隆：git clone git@github.com:<你的GitHub账号>/SVGcode.git
3. 进入应用目录：cd SVGcode
4. 安装依赖：npm i
5. 启动应用：npm start
6. 在浏览器中打开应用：http://localhost:3000
7. 查看可用的Issues或创建一个新Issue描述你的计划。
8. 开始编码。Vite会在变更时自动重新加载应用。
9. 对你的修改进行lint检查：npm run lint
10. 确保你的更改符合代码风格：npm run fix
11. 打开一个解决Issue的Pull Request（参见上面的第7步）。
12. 玩得开心，感谢你对SVGcode的兴趣！

贡献翻译

如果SVGcode在你的语言中不可用，请考虑贡献一份翻译。为此，复制src/i18n/中的一个文件（大多数用户可能最熟悉en-US.js），并翻译其中的字符串。根据语言识别标签（$language-$REGION，如en-US）命名新文件。然后将语言代码添加到src/js/i18n.js中的SUPPORTED_LANGUAGES数组，并将区域设置添加到同一文件中的SUPPORTED_LOCALES数组。谢谢！

致谢

SVGcode的实现基于Peter Selinger开发的名为Potrace的命令行工具，我将其转换为Web Assembly，以便在Web应用中使用。转换后的SVG会通过出色的svgo库自动优化。

炫耀区

<a href="https://www.producthunt.com/posts/svgcode-2?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-svgcode-2" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=322238&theme=dark" alt="SVGcode - 将栅格图像转换为SVG矢量图形的PWA | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>

替代方案

此处列出的项目必须是基于Web的、免费使用且可保存SVG、开源，并且不要求用户登录：

• VTracer (源代码)

许可证

GNU通用公共许可证v2.0

（这是由于Potrace选择了GNU通用公共许可证v2.0。）