SVG代码编辑器

实时编辑SVG代码并预览效果,支持导出为PNG、JPEG、SVG等格式

SVG代码编辑

行数: 1字符数: 0

画布设置

100%

快速元素

实时预览

📐
输入SVG代码开始编辑

导出设置

SVG信息

元素数量: 0
路径数量: 0
文本元素: 0
渐变数量: 0
估算大小: 0 B
编码方式: UTF-8

使用技巧

💡 基础语法:
  • • <svg>: 根元素,定义SVG画布
  • • <rect>: 矩形元素
  • • <circle>: 圆形元素
  • • <path>: 路径元素,支持复杂形状
  • • <text>: 文本元素
🎨 样式属性:
  • • fill: 填充颜色
  • • stroke: 描边颜色
  • • stroke-width: 描边宽度
  • • opacity: 透明度
  • • transform: 变换(旋转、缩放、位移)
⚡ 优化建议:
  • • 使用viewBox实现响应式设计
  • • 避免不必要的嵌套元素
  • • 使用相对路径减少代码量
  • • 合理使用组(<g>)管理相关元素
© 2026 星贝工具