首页 > 图像 > SVG 在线预览

推荐工具

图片尺寸调整图片 OCR 文字识别GIF 动图缩放工具图片压缩工具图片格式转换器 (PNG JPG WebP AVIF)图像圆角剪裁图片组合预览工具

SVG 在线预览

在线预览和编辑 SVG 代码，实时查看 SVG 图像效果，支持代码高亮和下载功能

请输入有效的 SVG 代码以查看预览

工具简介：SVG 在线预览工具

SVG（Scalable Vector Graphics）是一种基于 XML 的矢量图形格式，由 W3C 制定。本工具提供在线 SVG 代码编辑和实时预览功能，支持代码高亮、语法检查和图像下载，是设计师和开发者的理想选择。

什么是SVG 在线预览工具？

SVG 在线预览工具用于粘贴 SVG 代码并即时渲染，便于检查图标与路径效果。

如何使用

  1. 粘贴 SVG 代码到输入区。
  2. 查看预览并调整尺寸或背景。
  3. 确认无误后复制或继续编辑。

常见应用场景

  • 图标或插画的渲染检查
  • 内联 SVG 在页面中的调试
  • 文档分享前的预览确认

❓ 常见问题 FAQ

Q1：为什么不显示？
A：检查是否缺少 viewBox 或尺寸属性。

Q2：颜色和预期不一致？
A：确认 fill/stroke 设置以及继承样式。

Q3：如何导出为图片？
A：可复制 SVG 并使用设计工具导出。

✨ 主要特性

  • 🎨 实时预览：输入 SVG 代码即时显示图像效果
  • 🖥️ 代码高亮：支持 XML/SVG 语法高亮显示
  • 📱 响应式布局：左右分栏设计，支持移动端适配
  • 💾 多格式下载：支持 SVG 和 PNG 格式下载
  • 🔍 语法检查：自动检测 SVG 代码语法错误
  • 🎯 示例代码：提供常用 SVG 示例快速上手
  • 🔒 隐私安全：本地处理，不上传任何数据

📖 使用示例

基础图形

圆形示例：

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="80" fill="#3b82f6" stroke="#1e40af" stroke-width="4"/>
  <text x="100" y="110" text-anchor="middle" fill="white" font-family="Arial" font-size="16">SVG</text>
</svg>

矩形示例：

<svg width="200" height="150" xmlns="http://www.w3.org/2000/svg">
  <rect x="20" y="20" width="160" height="110" rx="10" ry="10" 
        fill="#10b981" stroke="#059669" stroke-width="2"/>
  <text x="100" y="85" text-anchor="middle" fill="white" font-size="18">矩形</text>
</svg>

路径绘制

心形图案：

<svg width="200" height="180" xmlns="http://www.w3.org/2000/svg">
  <path d="M100,150 C100,150 50,100 50,75 C50,50 75,50 100,75 C125,50 150,50 150,75 C150,100 100,150 100,150 Z" 
        fill="#ef4444" stroke="#dc2626" stroke-width="2"/>
</svg>

星形图案：

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <polygon points="100,20 120,70 170,70 130,100 150,150 100,120 50,150 70,100 30,70 80,70" 
           fill="#fbbf24" stroke="#f59e0b" stroke-width="2"/>
</svg>

渐变效果

线性渐变：

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:#3b82f6;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#8b5cf6;stop-opacity:1" />
    </linearGradient>
  </defs>
  <rect width="200" height="100" fill="url(#grad1)" />
</svg>

径向渐变：

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient id="grad2" cx="50%" cy="50%" r="50%">
      <stop offset="0%" style="stop-color:#fbbf24;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#f59e0b;stop-opacity:1" />
    </radialGradient>
  </defs>
  <circle cx="100" cy="100" r="80" fill="url(#grad2)" />
</svg>

🎯 应用场景

1. 图标设计

创建可缩放的矢量图标：

<!-- 设置图标 -->
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <path d="M12 2C13.1 2 14 2.9 14 4C14 5.1 13.1 6 12 6C10.9 6 10 5.1 10 4C10 2.9 10.9 2 12 2ZM21 9V7L15 7.5V9M15 11.5V9.5L21 9V11L15 11.5ZM11 15.5V13.5L5 13V15L11 15.5ZM11 18V16L5 15.5V17.5L11 18ZM12 8C14.2 8 16 9.8 16 12S14.2 16 12 16S8 14.2 8 12S9.8 8 12 8Z" 
        fill="currentColor"/>
</svg>

2. Logo 设计

设计企业或品牌 Logo：

<svg width="200" height="80" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="logoGrad" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:#3b82f6"/>
      <stop offset="100%" style="stop-color:#8b5cf6"/>
    </linearGradient>
  </defs>
  <rect x="10" y="10" width="60" height="60" rx="10" fill="url(#logoGrad)"/>
  <text x="85" y="45" font-family="Arial, sans-serif" font-size="24" font-weight="bold" fill="#374151">工具迷</text>
</svg>

3. 数据可视化

创建图表和数据展示：

<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- 坐标轴 -->
  <line x1="50" y1="150" x2="250" y2="150" stroke="#374151" stroke-width="2"/>
  <line x1="50" y1="150" x2="50" y2="50" stroke="#374151" stroke-width="2"/>
  
  <!-- 数据柱状图 -->
  <rect x="70" y="120" width="30" height="30" fill="#3b82f6"/>
  <rect x="120" y="100" width="30" height="50" fill="#10b981"/>
  <rect x="170" y="80" width="30" height="70" fill="#f59e0b"/>
  <rect x="220" y="90" width="30" height="60" fill="#ef4444"/>
  
  <!-- 标签 -->
  <text x="85" y="170" text-anchor="middle" font-size="12">Q1</text>
  <text x="135" y="170" text-anchor="middle" font-size="12">Q2</text>
  <text x="185" y="170" text-anchor="middle" font-size="12">Q3</text>
  <text x="235" y="170" text-anchor="middle" font-size="12">Q4</text>
</svg>

4. 动画效果

添加 CSS 动画：

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <style>
    .rotating {
      animation: rotate 2s linear infinite;
      transform-origin: 100px 100px;
    }
    @keyframes rotate {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
  </style>
  <circle cx="100" cy="100" r="80" fill="none" stroke="#3b82f6" stroke-width="4" class="rotating"/>
  <circle cx="100" cy="100" r="10" fill="#3b82f6"/>
</svg>

🔧 技术详解

SVG 基础语法

基本结构：

<svg width="宽度" height="高度" xmlns="http://www.w3.org/2000/svg">
  <!-- SVG 内容 -->
</svg>

常用元素：

  • <rect>: 矩形
  • <circle>: 圆形
  • <ellipse>: 椭圆
  • <line>: 直线
  • <polyline>: 折线
  • <polygon>: 多边形
  • <path>: 路径
  • <text>: 文本

坐标系统

SVG 使用笛卡尔坐标系：

  • 原点 (0,0) 在左上角
  • X 轴向右为正方向
  • Y 轴向下为正方向
  • 单位默认为像素 (px)

样式属性

填充和描边：

  • fill: 填充颜色
  • stroke: 描边颜色
  • stroke-width: 描边宽度
  • opacity: 透明度

文本样式：

  • font-family: 字体族
  • font-size: 字体大小
  • font-weight: 字体粗细
  • text-anchor: 文本对齐

💡 使用技巧

  • viewBox 属性：使用 viewBox 实现响应式缩放
  • 组合元素：使用 <g> 标签组合相关元素
  • 重用元素：使用 <defs> 和 <use> 重用图形
  • 优化代码：移除不必要的属性和空格
  • 语义化：添加 <title> 和 <desc> 提高可访问性

⚠️ 注意事项

  • 命名空间：确保包含正确的 xmlns 属性
  • 单位一致：保持尺寸单位的一致性
  • 浏览器兼容：测试不同浏览器的兼容性
  • 文件大小：复杂图形可能导致文件过大
  • 安全性：避免在 SVG 中包含恶意脚本

🚀 开始使用

  1. 输入代码：在左侧编辑器中输入或粘贴 SVG 代码
  2. 实时预览：右侧会实时显示 SVG 图像效果
  3. 调试修改：根据预览效果调整代码
  4. 下载保存：选择 SVG 或 PNG 格式下载图像
  5. 应用使用：将生成的 SVG 应用到项目中

提示：本工具完全在浏览器本地运行，您的 SVG 代码不会被上传到服务器，确保数据安全和隐私保护。