SVG 圖形產生器

📖 工具介紹

SVG 圖形產生器是一款協助前端與視覺工作者快速產出可縮放向量圖形程式碼的免費線上工具。手寫 SVG 標籤容易記錯屬性名、座標與命名空間，本工具把常見圖形抽象成六個視覺化按鈕：矩形、圓形、線條、多邊形、路徑與文字。你只要點選圖形，在左側面板調整填色、描邊色、描邊寬度以及對應的座標參數，右側預覽區就會即時畫出向量圖形，下方同步產生符合標準的 SVG 原始碼。文字圖形支援自訂文字內容與字型大小，路徑圖形支援使用 M、L、C 等指令手寫貝茲曲線。預覽區採用棋盤格背景，方便判斷透明區域；產生的程式碼可以一鍵複製，也可以直接下載為 .svg 檔案，插入網頁或設計稿都不會失真。工具全程在瀏覽器本機建構 SVG DOM 並序列化，不發出網路要求，介面支援簡中、繁中與英文三語，在手機上同樣可以完成圖形繪製。

✨ 功能特點

• 六種基礎圖形：矩形、圓形、線條、多邊形、路徑、文字一鍵切換
• 視覺化屬性面板：填色、描邊、座標隨圖形動態變化，所見即所得
• 標準 SVG 輸出：透過命名空間建構 DOM 並序列化，程式碼規範可直接使用
• 棋盤格預覽：透明區域一目了然，便於檢查圖形邊界
• 複製與下載：原始碼一鍵複製，或匯出為獨立的 .svg 向量檔案
• 貝茲路徑範例：內建平滑曲线路徑範例，協助快速上手

📝 使用方式

1. 在頂部點選你想繪製的圖形類型按鈕
2. 在左側調整填色、描邊色、描邊寬度以及對應座標
3. 觀察右側預覽區，確認圖形形狀與位置是否符合預期
4. 點擊產生 SVG 或直接在原始碼區讀取自動更新後的程式碼
5. 點擊複製程式碼貼到專案，或點擊下載 SVG 儲存為向量檔案

⚠️ 注意事項

• 畫布座標系：所有座標基於 300×200 檢視埠，x 向右、y 向下遞增
• 描邊寬度：線條圖形無填色，描邊寬度設為 0 會看不見線條
• 路徑語法：路徑 d 使用標準 SVG 指令，指令間以空格或逗號分隔
• 文字渲染：文字內容透過安全方式寫入，特殊字元不會破壞 SVG 結構
• 本機建構：SVG 在瀏覽器內建構與序列化，不發出任何網路要求