分類: 開發工具
SVG viewBox 編輯器
手動讀取並重寫 SVG 的 viewBox
貼上 SVG 標記，載入其目前的 viewBox（若沒有則使用其寬度與高度），接著調整 min-x、min-y、寬度與高度來裁切、留白或重新定位圖案，再複製重寫後的 SVG。
輸出
<svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <rect width="120" height="120" rx="16" fill="#0f766e" /> <circle cx="60" cy="60" r="34" fill="#f4d35e" /> </svg>
不會上傳任何內容。標記只會在此頁面內被剖析並重寫。
本頁的所有處理都在瀏覽器中完成，不會上傳任何內容。
這個工具能做什麼
viewBox 屬性負責把 SVG 內部的座標系統對應到它算繪出來的空間，因此調整它正是裁切圖示的一部分、在四周加上留白，或在不動任何一條路徑的情況下移動原點的方式。在文字編輯器裡手動調整四個數字既繁瑣又容易出錯；本工具會剖析你貼上的 SVG，用找到的值預先填入四個 viewBox 欄位，並在你調整時即時重寫標記，還附上預覽讓你在複製前先看到裁切結果。
使用方式
- 貼上包含 <svg> 標籤的 SVG 標記。
- 點擊「載入目前的 viewBox」以預先填入四個欄位，或自行輸入 min-x、min-y、寬度與高度。
- 檢視預覽，然後複製重寫後的 SVG 標記。
隱私說明
本工具完全在你的瀏覽器中執行。輸入的內容不會被上傳、儲存或分享，關閉分頁就隨之消失。
常見問題
- 這會把我的 SVG 上傳到任何地方嗎？
- 不會。標記會在你的瀏覽器分頁中透過純文字比對進行剖析與重寫，不會傳送到伺服器。
- 寬度與高度屬性會發生什麼變化？
- 它們會維持原樣。調整 viewBox 只會重新縮放既有可視範圍內繪製的內容，就像瀏覽器本身套用它的方式一樣，而不是調整元素本身的尺寸。
- 為什麼預覽有時看起來是空白的？
- 寬度或高度為零，或是 viewBox 與圖案沒有重疊，都會把畫面裁到什麼都不剩。請放寬範圍，或檢查 min-x、min-y 的數值。