線上裁剪 SVG 圖片

透過縮緊 viewBox 或點陣化為 PNG 裁切 SVG 圖示與插畫,誠實面對向量格式特性,100% 瀏覽器處理。

上傳圖片

拖放或點擊上傳

支援 PNG、JPG、WebP、GIF、BMP

Step by Step

How to 裁剪 SVG

01

上傳 SVG 檔案

將 .svg 檔案拖曳到頁面,或點擊瀏覽選取,會以瀏覽器原生 SVG 引擎繪製到 Canvas。

02

選擇裁剪範圍

在繪製出的 SVG 上拖曳裁剪框,選取想保留的可見區域。

03

預覽裁切結果

預覽會以目標輸出解析度顯示裁切後的 SVG,匯出前可先確認銳利度。

04

下載為 PNG 或 SVG

點擊下載,預設輸出為裁切區域的 PNG 點陣圖;選 SVG 模式則會下載 viewBox 已更新的向量原檔。

Core Features

What You Get

以瀏覽器原生引擎繪製 SVG — 漸層、筆觸與濾鏡都能正確呈現
兩種輸出模式:點陣化為 PNG/WebP,或下載 viewBox 已更新的 SVG
匯出解析度可從 1× 調整到 4×,輸出更清晰銳利的 PNG
匯出為 PNG 時,裁切範圍外的區域維持透明
在所選解析度下提供即時預覽
100% 瀏覽器處理 — SVG 絕不上傳
Use Cases

When to Use This

為 SVG 圖示集縮緊 viewBox,讓每個符號在邊框內完美對齊
將 SVG 插畫點陣化為裁切後的 PNG,用於簡報或社群貼文
從 SVG 資訊圖中擷取特定區域,獨立輸出成 PNG
嵌入 HTML 或 README 前,裁掉匯出 SVG Logo 周圍的多餘留白
FAQ

Frequently Asked Questions

輸出檔案還會是向量 SVG 嗎?

取決於模式。預設輸出為裁切區域的點陣化 PNG,方便直接放入大多數應用程式;切換為 SVG 模式時,本工具會更新根節點的 viewBox 與 width/height,讓檔案維持向量格式,且裁切範圍成為新的畫布。

SVG 裁剪和 JPG、PNG 裁剪有何不同?

點陣裁切只是丟棄像素;SVG 裁切則必須 (a) 透過修改 viewBox 限制可見範圍,原本所有 path 仍保留在檔案中,或 (b) 將可見範圍點陣化為 PNG。本站兩種模式都支援;除非選擇 PNG 輸出,否則新 viewBox 之外的 path 不會被刪除。

可以裁切 Heroicons、Lucide 等圖示集的 SVG 嗎?

可以。上傳 .svg 後拖曳裁剪框框住符號,再選擇縮緊 viewBox(保持向量,適合做圖示字型)或匯出 256×256 PNG,給不支援 SVG 的場景使用。

漸層與透明效果會被保留嗎?

匯出為 PNG 時會保留 — 漸層、不透明度與羽化筆觸的呈現與 Chrome 完全一致。SVG viewBox 模式下,由於 <defs> 區塊不會被改寫,漸層色標與 Alpha 通道完全不受影響。

從裁切後的 SVG 匯出 PNG 該用多大尺寸?

網頁使用建議匯出顯示尺寸的 2× 為甜蜜點(例如 256px 版位輸出 512px PNG),在 Retina 螢幕上仍能保持銳利。印刷則以最終尺寸 300 DPI 為基準計算,例如 4 吋寬的成品需要 1200px 寬的 PNG。