當 AI 搞不定 SVG


就在利用萬能的 AI 開發完軟體後,Poor Richard 突然想到:「喔,我需要來個 LOGO,方便做 favicon, LOGO, 或 home page hero」。

接著就叫萬能的 AI 寫給的 prompt,叫丟給產品大師 nano banana gemini 3.1 pro,他記得要有關鍵字 “minimalist” 和 “flat”:

“A minimalist flat vector logo design, perfectly square aspect ratio. The image shows a stylized hand with fingers positioned as if typing on a minimal set of keyboard keys. The wrist and forearm of this hand transform smoothly into the structure of a sports racket (like a tennis or badminton racket) with a netted head. The entire composition is static. The style is strictly flat design with clean lines, geometric shapes, and a limited solid color palette (no gradients or 3D effects). The background is completely transparent, isolated subject. Suitable for a modern tech-sports brand mark.”

AI 生的點陣圖

Poor Richard 開心:「看起來還不錯ㄟ,可以用,而且很省時」。但是他把圖下載下來之後,才發現不是 SVG。

常見的我們一般手機拍照、 AI 生圖都是點陣圖。前面提到的 SVG 則是向量圖,他相對點陣圖則有一些超能力。

我們可以用空拍相片來理解點陣圖,地圖來理解 SVG 向量圖。空拍相片會紀錄的細節超多,顏色超豐富,你把這種圖放大來看,可以看到小小一塊區域,每一個像素點的顏色都不一樣,能紀錄的細節超多。這種紀錄方法檔案很大,會影響軟體的效能,所以有一堆減少點陣圖影響軟體效能的方法,從檔案壓縮演算法改良,到依不同螢幕大小而先做好不同版本的圖等等。
而地圖我們不會也不需要紀錄圖片的每一個像素點,我們只要紀錄台北在北邊、台中在南邊一點,台北到台中的路有哪幾條,路長成直的還是彎曲的,其它不重要的地方,我們都不用紀錄,留白就好。軟體要在螢幕上顯示 SVG 時,就根據這個紀錄,根據需要的大小,即時的畫出來就好了。紀錄地圖時不需要管要顯示在多大的螢幕上,這種檔案都超小,而且顯示的品質不過放多大機乎不變。

總之 logo、icon、背景花紋,或是工作流程圖、平面設計要用的藝術字、排版等,非常適合向量圖,軟體開發上能用向量圖的地方用向量圖,就可以讓軟體不怕被大點陣圖弄壞效能,能減少很多優化的工作。

「唉,這次 AI 不再萬能了」,無耐的 Poor Richard只好換個 prompt 拜託 Gemini 3.1 pro 生一個 SVG 出來,這是因為如果沒有明確叫 AI 生 SVG 的 “code“,他還是很容易自動啟動 Nano Bana 產點陣圖。

話說,更久之前 Poor Richard 曾經被 AI 產過 SVG 而結果傷透了心,也看過一篇用 鵜鶘騎腳踏車來比較 LLM 聰明程度的評測文章,看到那些慘不忍睹的鳥類和輪子,早就對 LLM 產 SVG 的能力不抱期待。

不過就在前幾天他看到 Gemini 3.1 pro 放出來的廣告,一出場就出現一隻酷炫的鵜鶘帥氣的騎腳踏車,而且這可不只是 SVG,還是一個 SVG 的動畫。而且不只鵜鶘,裡面的青蛙也能騎腳踏車、長頸路還能開車。Poor Richard 懷抱著一絲的希望在 Gemini 3.1 pro 裡按下了 enter:

“Generate the clean SVG source code for a minimalist, flat-design logo meant for a square viewbox (e.g., viewBox=“0 0 500 500”).

The central element is a stylized, static representation of a hand typing on a simplified keyboard. The unique aspect is that the forearm seamlessly morphs into the handle and head of a sports racket (either badminton or tennis, simplified with basic string patterns).

Style Requirements:

  • Minimalist & Flat: Use only solid colors (no gradients, shadows, or textures). Keep shapes geometric and clean.

  • Logo Usage: The design should be bold, clear, and scalable.

  • Background: The SVG must have a completely transparent background; do not include any background rectangle fill.”

AI 生的 SVG 圖

Poor Richard 再度心碎…

但也沒有被擊倒:「一定有方法能把點陣圖轉 SVG」

他試了免費線上點陣轉 SVG 的服務 picsvg.com ,發現是用傳統演算法轉檔,轉出來不需要的細節太多,轉檔參數無法調整,轉檔效果不好。不過他有提供手動刪除裡面細節的功能,這個功能我還蠻喜歡的。

免費線上轉 SVG 圖

接著 Poor Richard 轉向 StarVector,這是以 LLM 為基礎的向量生成,很吃硬體 VRAM。由於 Hugging Face 還沒有 Inference Providers,他只好自己抓下來、灌了一堆 dependency 進行測試,雖然 Poor Richard 有一台加滿了 24G 統一記憶體 (Unified Memory) 的 Macbook Air m2,效能還是不夠跑出結果,只好放棄這個方法。

Poor Richard 看到了 Figma Professional 前幾天推出 Vectorize 的功能,而且在 X 上面有人在 Figma 推文底下推薦老牌的 Vector Magic,demo 出來的點陣轉向量的效果都不錯,但是 Poor Richard 實在太 Poor 了,直接把貴鬆鬆的 Vector Magic 放棄,把 Figma Professional 當成備用方案。

「人工智慧搞不定的,只好退回用工人智慧搞定」 Poor Richard 跟 Bruce Willis 一樣頑強,還沒放棄。好用的 軟體 Affinity 現在免費了,Poor Richard 雖然畫 SVG 功力不行,但是拉拉 Bezier 曲線描圖,倒還難不倒他。最後,花了些時間把圖描完,成果蠻不錯的,檔案比起點陣小非常非常多,對於自己多了一項技能也很有成就感。

不過人性就是這樣,總是不滿足,也常常會有更大的野心。雖然滿意手描的品質,Poor Richard 還是起了貪念:「雖然比自己從 0 開始畫,快很多也漂亮很多了,但是有沒有可能更快?必竟搞不好哪天突然想弄一整套 Icon 出來」

他看上了 ComfyUI-ToSVG,首先他跟著 Papaya 的範例影片,搭配問一下 LLM,開始摸索 ComfyUI 起來,並且先試了點陣轉彩色的 SVG。

ComfyUI 彩色版轉 SVG 流程

軟體速度非常快,界面流程蠻好用的,但是最終效果不夠滿意,不必要有細節還是太多,加上 path simplify 的節點,可以稍微改善一點。

彩色版 comfyui 結果

最後試試點陣轉黑白的 SVG,效果竟然蠻不錯的,比自己手描效果沒有差很多,但速度快上非常多。

ComfyUI 黑白版轉 SVG 流程

黑白版 comfyui 結果

Poor Richard 滿意了…至少到目前為止。

隨著大模型進步飛速,這些 AI 大廠應該有可能把 SVG 列入重點訓練項目,很可能有一天 Prompt 產 SVG 會達到很高的可用性,或許前面那些方法都用不到了,直接一個 Prompt end to end 解決了。不過我想只要 AI 產出的結果無法直接達到我們的要求,一些些手動的能力,都還是會有它的價值。

包括軟體開發者、作家、作曲家、律師…,這些被認為工作機會深受 LLM 威脅的文字工作者們, 我們的手動調整能力何嚐不是如此?中文有一句畫叫畫龍點睛,意思是在一隻其它地方都已經畫好的龍上面,把最重要的眼睛畫上去,這隻龍就會活過來。現在軟體界現在大部份的繁瑣的程式碼 AI 已幫我們處理好了,我們還是常常需要手動把關鍵靈魂注入軟體中,人類工程師的鑑賞力和品味還是有價值…至少到目前為止。