在线 SVG 渲染器

一键将 SVG 代码渲染为高清位图。支持 PNG、JPEG、WebP 格式,自定义导出尺寸与透明背景。

📥 粘贴 SVG 源码
🖼️ 实时预览
原始尺寸: - | 导出尺寸: -
⚙️ 导出设置

在线 SVG 渲染器完整使用指南

左侧粘贴 SVG 源码 #svgInput,右侧 #previewSvgContainer 实时预览;状态 #statusMsg。可加载示例、清空。导出区设宽高 #exportWidth/#exportHeight、格式、质量、背景色/透明与棋盘格辅助,经隐藏 #exportCanvas 栅格化后下载或复制图片;可分享状态、本地保存。updatePreview 解析并展示;非法 SVG 会提示。适合调试图标与导出 PNG,不是完整矢量设计软件。

预览与导出

推荐用法

  1. 从设计工具复制 SVG 源码粘贴预览。
  2. 检查 viewBox 与路径是否完整。
  3. 导出 2× 尺寸 PNG 用于高清 UI。
  4. 需要透明底勾选透明;海报可设底色。
  5. 复杂滤镜/字体以浏览器实现为准,打印级请用专业工具。

边界

常见问题

预览空白?

检查是否缺 xmlns、标签未闭合、或被转义成实体。

导出发糊?

提高导出宽高再下载。

复制图片失败?

权限或非安全上下文,改用下载。

状态能分享吗?

shareState 生成链接快照(以实现为准),注意源码可能含内部图形。

安全提示

不要粘贴来源不明的含脚本 SVG。导出图用于生产前检查版权。公共电脑清空输入。本地保存键以页面脚本为准。

导出尺寸策略

UI 图标导出 24/48/96 多套;营销图用更大尺寸。透明棋盘格仅辅助预览。质量条对 JPEG 有意义。分享状态含源码注意机密图形。

调试技巧

先 loadExample 确认管道正常再贴业务 SVG。路径异常看 status。字体未嵌入会回退。安全:拒来源不明脚本 SVG。

补充说明 1

请结合本页真实控件操作:先完成上传、表单填写或参数选择,再使用计算、生成、导出、分享或清空。结果以界面为准;涉及隐私元数据、税务发票、企业估值、隐私政策与工作量承诺时,务必与法规、法务、财务及团队约定一致。重要输出请下载或复制备份,公共环境使用后清空页面数据。

补充说明 2

请结合本页真实控件操作:先完成上传、表单填写或参数选择,再使用计算、生成、导出、分享或清空。结果以界面为准;涉及隐私元数据、税务发票、企业估值、隐私政策与工作量承诺时,务必与法规、法务、财务及团队约定一致。重要输出请下载或复制备份,公共环境使用后清空页面数据。

补充说明 3

请结合本页真实控件操作:先完成上传、表单填写或参数选择,再使用计算、生成、导出、分享或清空。结果以界面为准;涉及隐私元数据、税务发票、企业估值、隐私政策与工作量承诺时,务必与法规、法务、财务及团队约定一致。重要输出请下载或复制备份,公共环境使用后清空页面数据。