SVG 轉 3D

如何線上將 SVG 轉成 3D

這個工具會把平面的向量輪廓擠出成帶有倒角與攝影棚燈光的立體造型，適合用於 Logo、圖示和簡單標誌：製作網站用的 3D Logo、封面、社群預覽圖或簡報素材。場景在瀏覽器中以 Three.js（WebGL）渲染，不必安裝任何軟體。

使用方式

1. 點選「上傳 SVG」，或將檔案拖曳到視窗中。想先看看效果，可以點選「查看示範」。
2. 選擇材質：攝影棚、玻璃、塑膠、金屬或鉻。
3. 設定模型顏色與背景顏色。
4. 調整光線強度與 3D 深度（0 到 200%）。在場景上移動游標，造型會跟著滑鼠傾斜，藉此找出合適的角度與反光。
5. 儲存結果：「4K 截圖」會輸出寬 3840 px 的 PNG，「匯出 HTML」則提供可嵌入網站的場景程式碼。

如何準備 SVG

• 只有具備填色的形狀才會產生立體感，沒有填色的線條（外框、stroke）會被略過。請先將外框轉為輪廓：Figma 中使用 Outline stroke，Illustrator 中使用 Object → Path → Outline Stroke。
• 文字請先轉為外框曲線，否則字母不會出現。
• 輪廓越簡單，倒角越乾淨。多餘的錨點與細小細節會造成瑕疵。
• 整個造型會套用單一顏色，不會保留 SVG 原本的顏色。

匯出 HTML

程式碼包含你的 SVG 與所選設定。將它貼到任何頁面的 HTML 程式碼區塊中：場景會佔用一個 16:10 的區塊，並和這裡一樣跟著滑鼠互動。Three.js 會從 CDN 載入，因此頁面需要連上網路。

限制

• 無法下載 3D 模型（GLB、OBJ、STL）。輸出結果是圖片或互動場景，不適用於 3D 列印或 Blender。
• 僅支援 SVG，PNG、JPG 等點陣圖無法使用。
• 傾斜效果由滑鼠控制，在手機上造型會維持原始角度。
• 玻璃與鉻材質對顯示卡負擔較重，在效能較弱的裝置上場景可能會卡頓。

隱私

SVG 在你的瀏覽器中讀取與渲染，檔案不會傳送到伺服器。Three.js 函式庫從 CDN cdnjs 與 jsDelivr 載入。本站會統計造訪數據：Cloudflare Web Analytics 不使用 cookie，而 Yandex Metrica 與 Google Analytics 只有在你同意 cookie 後才會啟用。詳情請見隱私權政策。

需要標誌的靈感，可以看看Logo 提示詞。4K PNG 截圖檔案較大，發布前可先線上壓縮。想從一般照片做出立體感，可以使用線上深度圖。

SVG 轉 3D 常見問題

可以下載 3D 模型來列印嗎？

不行。這個工具只會儲存 3840 px 的 PNG 截圖與場景的 HTML 程式碼，不提供 GLB、OBJ 或 STL 檔案。

為什麼 SVG 沒有變成立體？

很可能檔案中只有外框線或文字。請將外框與字型轉為有填色的曲線，再重新上傳檔案。

如何把 3D Logo 放到網站上？

點選「匯出 HTML」，再點「複製」，然後將程式碼貼到網站架設工具的 HTML 程式碼區塊或頁面範本中。

可以免費使用嗎？

可以，而且不需註冊，截圖也沒有浮水印。