图片转 SVG 动画工具

图片转 SVG 工具

将位图转换为 SVG 矢量图，支持生成生长动画。

点击或拖拽图片到此处

支持 PNG, JPG, BMP 格式

功能特点

🎨 智能矢量化

• 自动描摹：将位图（PNG/JPG）自动转换为矢量路径
• 参数预设：支持调节颜色数量、模糊度和缩放比例
• 本地处理：基于 ImageTracerJS，完全在浏览器本地运行

✨ 动画生成

• 生长动画：生成线条绘制（手绘风格）动画
• 淡入淡出：生成平滑的显现效果
• 自定义时长：可调节动画播放速度

💾 导出与使用

• SVG导出：直接下载包含动画代码的 SVG 文件
• 即插即用：生成的 SVG 可直接嵌入网页使用

使用指南

1. 上传图片：选择或拖拽一张图片（建议清晰的 Logo 或简笔画）。
2. 调整参数：
   • 颜色数量：控制生成 SVG 的色彩丰富度，较少颜色适合图标。
   • 模糊半径：平滑边缘，减少噪点。
3. 选择动画：在"动画效果"中选择"线条生长"或其他效果。
4. 预览与下载：点击转换查看效果，满意后下载文件。

原理说明

本工具使用 imagetracerjs 进行图像轮廓提取与矢量化，并通过 JavaScript 动态计算 SVG 路径长度 (getTotalLength)，自动注入 CSS @keyframes 动画代码，实现无需外部库的自包含 SVG 动画文件。