當 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.”

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.”
Poor Richard 再度心碎…
但也沒有被擊倒:「一定有方法能把點陣圖轉 SVG」
他試了免費線上點陣轉 SVG 的服務 picsvg.com ,發現是用傳統演算法轉檔,轉出來不需要的細節太多,轉檔參數無法調整,轉檔效果不好。不過他有提供手動刪除裡面細節的功能,這個功能我還蠻喜歡的。
接著 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。

軟體速度非常快,界面流程蠻好用的,但是最終效果不夠滿意,不必要有細節還是太多,加上 path simplify 的節點,可以稍微改善一點。
最後試試點陣轉黑白的 SVG,效果竟然蠻不錯的,比自己手描效果沒有差很多,但速度快上非常多。

Poor Richard 滿意了…至少到目前為止。
隨著大模型進步飛速,這些 AI 大廠應該有可能把 SVG 列入重點訓練項目,很可能有一天 Prompt 產 SVG 會達到很高的可用性,或許前面那些方法都用不到了,直接一個 Prompt end to end 解決了。不過我想只要 AI 產出的結果無法直接達到我們的要求,一些些手動的能力,都還是會有它的價值。
包括軟體開發者、作家、作曲家、律師…,這些被認為工作機會深受 LLM 威脅的文字工作者們, 我們的手動調整能力何嚐不是如此?中文有一句畫叫畫龍點睛,意思是在一隻其它地方都已經畫好的龍上面,把最重要的眼睛畫上去,這隻龍就會活過來。現在軟體界現在大部份的繁瑣的程式碼 AI 已幫我們處理好了,我們還是常常需要手動把關鍵靈魂注入軟體中,人類工程師的鑑賞力和品味還是有價值…至少到目前為止。