分类

← View All Tools

SVG 图表逆向数据提取器

从 SVG 折线图、柱状图、饼图等结构中逆向提取数据点并输出 JSON/CSV

适合从导出的 SVG 报表、网页图表或嵌入式图形里恢复数据。支持坐标轴校准。

示例结果

1 个示例

从 SVG 折线图恢复数据点

结合 viewBox 与坐标轴范围，把 SVG 坐标反推成原始图表数据

{
  "summary": {
    "seriesCount": 1,
    "extractedPointCount": 4
  },
  "series": [
    {
      "id": "polyline-1",
      "type": "line"
    }
  ]
}
查看输入参数
{ "svgContent": "<svg viewBox=\"0 0 400 200\" xmlns=\"http://www.w3.org/2000/svg\"><polyline points=\"20,180 120,110 220,80 320,30\" /></svg>", "chartType": "line", "xAxisMin": 0, "xAxisMax": 12, "yAxisMin": 0, "yAxisMax": 80 }

关键信息

分类
Data Processing
输入类型
textarea, select, number
输出类型
json
样本覆盖
4
支持 API
Yes

概览

SVG 图表逆向数据提取器是一款专为数据分析师和开发者设计的实用工具。它能够解析 SVG 格式的折线图、柱状图、饼图等可视化图形，结合自定义的坐标轴范围（X轴/Y轴的最值），精准逆向推算出原始数据点，并一键导出为结构化的 JSON 格式，轻松实现无源图表的数据恢复与二次分析。

适用场景

  • •手头仅有导出的 SVG 格式报表或网页图表，但丢失了原始数据源时。
  • •需要从竞品网站或公开报告的嵌入式 SVG 图形中抓取核心数据点进行对比分析时。
  • •开发者需要将前端静态 SVG 可视化组件逆向转换为动态数据驱动的图表时。

工作原理

  • •将包含图表路径（如 <polyline> 或 <rect>）的 SVG 代码粘贴至输入框中。
  • •选择对应的图表类型（折线图、柱状图、饼图或散点图），或使用自动检测功能。
  • •根据原图表的坐标轴刻度，输入 X 轴和 Y 轴的最小值与最大值进行坐标系校准。
  • •工具将自动解析 SVG 路径坐标，按比例映射到真实数据范围，并输出包含数据点的 JSON 结果。

使用场景

学术研究与报告复现：从已发表的 PDF 论文或网页报告中提取 SVG 矢量图表，恢复实验数据用于重新绘图或验证。
竞品数据监控：抓取并解析竞品网站前端渲染的 SVG 趋势图，获取其未公开的底层业务数据走势。
旧系统数据迁移：在旧版 BI 系统仅支持导出 SVG 矢量图且数据库已损坏的情况下，通过图表批量找回历史数据。

用户案例

1. 恢复网页折线图的趋势数据

数据分析师
背景原因
在行业报告网页中发现了一张关键的年度增长折线图，但网页未提供数据下载入口，仅能通过审查元素拿到 SVG 代码。
解决问题
需要获取该折线图每个节点的具体数值，用于自己的分析模型。
如何使用
将网页中复制的 SVG 代码粘贴到输入框，选择“Line / Polyline”，并根据图表上的刻度设置 X 轴（0-12）和 Y 轴（0-80）的最值。
示例配置
chartType: line, xAxisMin: 0, xAxisMax: 12, yAxisMin: 0, yAxisMax: 80
效果
成功将 SVG 的像素坐标转换为 12 个月的实际增长数值，并输出为 JSON 格式供后续使用。

2. 提取静态柱状图的销售业绩

运营专员
背景原因
收到一份由设计部门制作的静态 SVG 格式销售战报，需要将图表中的各区销售额提取到 Excel 中进行汇总。
解决问题
手动目测图表高度估算数值误差大且效率极低。
如何使用
粘贴 SVG 代码，选择“Bar / Rectangles”图表类型，输入 Y 轴的起止刻度（如 0 到 10000）。
示例配置
chartType: bar, yAxisMin: 0, yAxisMax: 10000
效果
工具自动识别 SVG 中的矩形元素高度，按比例换算为精确的销售额数字，免去了人工估算的误差。

用 Samples 测试

csv, image, svg
SVG示例
可缩放矢量图形（SVG）示例，展示各种SVG功能和技术
title token svg
image, svg
Markdown 链接提取示例
包含各种链接类型的 Markdown 示例文档，用于测试 Markdown 链接提取工具
title token extractor
image
D3.js 数据可视化示例
全面的D3.js数据可视化示例，包括图表、地图、动画和交互式可视化
matched family image,svg
image, svg
手机号提取器示例
包含来自多个国家的电话号码的混合文本集合，用于提取测试
title token extractor
sample

相关专题

CsvConvert工具专题
探索 38 个围绕 csv 的 convert 工作流工具，快速找到相近能力。
ImageConvert工具专题
探索 100 个围绕 image 的 convert 工作流工具，快速找到相近能力。
Image 工具专题
探索 40 个围绕 image 的 utility 工作流工具，快速找到相近能力。
Csv 工具专题
探索 9 个围绕 csv 的 utility 工作流工具，快速找到相近能力。

常见问题

支持哪些类型的 SVG 图表？

目前支持折线图（Line/Polyline）、柱状图（Bar/Rectangles）、饼图（Pie/Arc Paths）以及散点图的逆向数据提取。

为什么需要输入坐标轴的最大值和最小值？

SVG 代码仅包含屏幕像素坐标（如 viewBox）。输入真实的坐标轴极值可以帮助工具建立映射比例，将像素坐标准确还原为真实的业务数据值。

提取后的数据是什么格式？

工具默认输出结构化的 JSON 格式数据，包含数据系列信息和具体的坐标点数值，方便直接用于二次开发或转换为 CSV。

如果 SVG 中包含多个数据系列（多条折线）能处理吗？

可以。工具会解析 SVG 中的多个路径或形状元素，并在输出的 JSON 中以不同的数据系列（Series）进行区分。

饼图的数据是如何提取的？

工具通过解析饼图的 SVG 弧线路径（Arc Paths），计算每个扇区的角度比例，从而推算出各部分占总量的百分比或相对数值。

API 文档

请求端点

POST /zh/api/tools/svg-chart-to-data-extractor

请求参数

参数名 类型 必填 描述
svgContent textarea 是 -
chartType select 否 -
xAxisMin number 否 -
xAxisMax number 否 -
yAxisMin number 否 -
yAxisMax number 否 -

响应格式

{
  "key": {...},
  "metadata": {
    "key": "value"
  },
  "error": "Error message (optional)",
  "message": "Notification message (optional)"
}
JSON数据: JSON数据

AI MCP 文档

将此工具添加到您的 MCP 服务器配置中： 

{
  "mcpServers": {
    "elysiatools-svg-chart-to-data-extractor": {
      "name": "svg-chart-to-data-extractor",
      "description": "从 SVG 折线图、柱状图、饼图等结构中逆向提取数据点并输出 JSON/CSV",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=svg-chart-to-data-extractor",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

你可以串联多个工具，比如：`https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`，最多20个。

如果遇见问题，请联系我们：[email protected]