当前位置：首页 > backend >正文

SVG数据可视化设计（AI）完全工作流解读｜计育韬

backend 2025/5/7 6:00:48

AI 的 SVG 创作极限在哪里？绝不是那些初级的流程图生成和粗糙的商业模型设计。以下是由我们 JZ Creative Studio 通过 Claude 和 Deepseek 开展的专业级 SVG Data Visualization 创作，应广大读者强烈要求，专程直播讲授了一期 AI 工作流分享。长按识别上方卡片，可前往哔哩哔哩收看回放视频，下方提供完整的授课知识点总结。

想现场聆听我们的更多干货分享？也可以关注《讲座报名｜AIGC融媒体创作与SVG可视化交互设计｜高校公益巡讲站点招募》，我们将开启第九轮的全国技术普及授课，期待届时与你在校园相见。

数据可视化项目中
AI 编程的应用与实践

*讲座实录

本次课程由计育韬老师主讲，聚焦于 AI 在数据可视化项目编程中的应用。课程将从前期准备开始，详述基于 AI 开展数据可视化设计的基本条件，并将开发过程分解为确切的可执行步骤。

一、前期准备

（一）上网方式与工具选择

对于新手而言，无论是涉足 AI 编程领域，还是进行简单的前端项目开发，确保正确的上网方式都是至关重要的前提条件。在编程工具的选择上，若考虑人工智能编程，Cursor 是计育韬老师的优先推荐选项。不过，需要明确的是，Cursor 和 Trae 并非传统意义上纯粹的编程工具。除了具备编程功能，它也在多种其他场景下发挥非编程作用，例如与 Blender 结合进行项目创作：

*Cusor MCP 控制 Blender 建模复旦大学光华楼

在实际使用中，Cursor 也存在一些局限性，当处理代码量较大的单一文件时，其编程窗口可能会出现卡顿现象。相比之下，其他专业编程软件，如 Sublime Text 或 VS Code，在代码编写过程中较少出现此类卡顿问题。

（二）模型选择

在拥有 Cursor 和正确上网方式后，模型的选择成为关键。当前，众多大语言模型都宣称擅长编程和数学，但实际应用效果参差不齐。计育韬老师认为在选择模型时，不能仅仅依据其宣传（Cherry-pick），还需综合考虑多方面因素。以数据可视化项目为例，优先推荐使用 Claude 3.5 和 Claude 3.7 模型。Claude 3.5 对指令的遵循度较高，更符合数据可视化严格遵循个人意图进行内容设计的需求；而 Claude 3.7 和 Deepseek 虽然具有一些行业新特性（如长思考模式），但在数据可视化场景下其发散性有时过强，相对不受控（甚至篡改数据），且思考过程产生的大量会话内容堆积容易影响编程效率。此外，GPT 在编程方面表现欠佳，不建议用于数据可视化前端项目及大型应用系统开发；Grok 的编程功能虽有开发者认为尚可，但由于使用人数较少，难以进行全面评价。

二、数据可视化的概念与要点

（一）数据可视化的定义

数据可视化并非简单地将数据以图表形式呈现，它包含三个核心要点：

优化信息传达效率：数据可视化的首要目的是优化信息传达效率。在设计图表时，不能仅仅追求美观，而忽视了信息的可读性。以矩形树图为例，当面对多维度且无法用同一坐标衡量的数据时，矩形树图能够通过模块大小区分数据的重要性，从而更直观地展示数据重点，提高信息传达效率。
表现特定数据特性：数据可视化应具有明确的态度，通过对数据的呈现突出特定重点。例如，在展示小 P 语音助手唤醒次数的数据时，通过视觉设计引导用户关注除夕夜和元宵节这两个节点，体现产品的智能特性和人机交互的和谐感。
具备图形化视觉特征的静动态表现：数据可视化可以是静态图表，也可以是动态图表，甚至可以包含交互效果，如鼠标悬停时浮现窗口等。这些表现形式都有助于更生动地展示数据。

（二）使用 AI 进行数据可视化的优势：

数据与图形的映射效率：传统的数据可视化工具在数据与图形的映射方面存在一定局限性，如在线软件模板的可选项较少，当数据形式复杂时难以进行良好的映射。而 AI 能够将数据准确地映射到坐标，有效提升映射效率。
可维护性：使用 AI 进行数据可视化，可维护性更强。当数据发生变化，如数据遗漏、需要调整或添加新内容时，AI 能够快速响应并进行修改。当对数据进行调整时，AI 可以在短时间内完成整个图表的修改。
创造性：AI 在数据可视化中展现出强大的创造性。它能够设计出新颖的图表，如双 y 轴柱状图，这种图表在表达两组单位不同但具有确切关系的数据时非常有效。同时，AI 还能根据参考图进行创作，借鉴原作的优点并改进不足，实现内容的优化。
可执行性：AI 在执行数据可视化任务时效率较高，能够快速处理大量数据和批量动画。然而，大模型当下存在普遍幻觉问题，可能产生增加或篡改数据行为，因此在使用 AI 时需要仔细检查。但总体而言，其执行效率远高于人工。

三、数据可视化项目的实施步骤

（一）确定开发环境

在开始数据可视化项目之前，首先要确定开发环境。开发环境主要分为两种情况：纯网页式交互和特殊场景（如公众号）。在纯网页式交互中，使用 AI 生成 HTML 文档较为常见，因为内联式 HTML 用一个文档就能解决大多数数据可视化呈现问题，方便分享。而在公众号等特殊场景下，SVG 开发会受到一些限制，如需要遵循公众号生态的 SVG AttributeName 白名单规则，否则可能导致开发的内容无法正常导入公众号。

（二）数据准备

在数据准备阶段，需要注意数据格式。大多数 AI 编程工具不能直接读取 Excel 格式文件，建议使用 CSV 格式文件。CSV 格式文件剔除了 CSS 样式，更便于 AI 编程工具学习。此外，当面对图片和 PDF 等格式的数据时，也有相应的处理方法。对于图片，建议使用 Claude 3.5 或 3.7 进行分析，若图片清晰度不足，可以先使用如 Upscaly 等工具进行高清处理；对于 PDF 文件，如果直接交给 AI 编程工具效果不佳，计育韬老师建议将其截图后交给豆包，让豆包以 Markdown 语法返回内容，再将该内容喂给 Cursor 或 Trae 等工具，以提高 AI 对数据的理解和执行准确性。

（三）设计构思

自然语言描述：自然语言描述是设计构思的一种方式。可以通过自然语言向 AI 明确设计要求，包括背景色、高亮色（建议提供色号）、设计风格（如高级感、科技感等）、阅读方式（如适合竖屏阅读）、是否添加网格线以及字体要求等。在描述过程中，可以先完成一个部分的设计并调整至满意，后续部分 AI 会延续该风格进行设计，同时也可以根据需要进行微调。
投喂参考图：给参考图也是指导 AI 设计的基本方法。在给参考图时，应先让 AI 总结参考图的内容，然后再提出设计要求。同时，要注意约束尺寸和明确目的。例如，在设计考公备考材料的信息图时，先给 AI 提供参考图，让其总结后，要求其基于具体应用场景并遵循给定尺寸先实现静态数据可视化，提示需要突出的数据特性。在创作过程中，可能需要对生成的图表进行一些调整，如调整模块位置、矩形大小、字号等。

*以上为考公复习资料数据可视化参考图

*以上为根据参考和 Prompts 产生的设计

（四）数据收集与处理

数据收集是项目的前置步骤，应做到极尽详细。数据的详细程度对数据可视化的效果至关重要，只有详尽的数据才能制作出专业的数据可视化报告。例如，考公材料和小鹏汽车项目中的信息，都经过了精心整理和筛选，数据严谨度高。而类似新闻报道中的一些内容数字，由于维度不足、数据缺损，难以用于制作高质量的数据可视化内容。所以在进行数据可视化项目时，应确保数据收集的颗粒度足够细。

（五）板块试错与项目推进

在项目实施过程中，不要将整个数据集一次性喂给 AI，而应按照板块进行试错。先创建一个有限尺寸（如 1200*2000）的 SVG 画板，并使用 viewBox 写法，以适配移动端显示。同时，建议补一个矩形作为背景色，并使用 RGB 写法，避免在移动端深色模式下出现问题。在插入位图时，可以使用 foreignObject 的写法，通过编组嵌套并设置宽高、x 轴和 y 轴的关系来展示图像。在生成与修改过程中，尽量给 AI 以具体参数，如移动的具体单位、颜色的具体数值等，以提高修改的准确性和效率。完成一个部分后，继续下一部分的设计，并通过自然语言隔断任务。如果需要中途修改，应指明位置或行数，以确保 AI 能够准确修改目标内容。整个项目的推进过程就是生成、修改、任务隔断和中途修改的循环，若能明确所有前置条件和要求，项目将能够顺利推进。

最后，计育韬老师为大家特别带来了一张工作截图，展示了在多轮对话中仅输入「是」，AI 就继续自动执行设计工作。