SVG數據可視化設計（AI）完全工作流解讀

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 就繼續自動執行設計工作。