Skip to main content

SVG路徑編輯器

輕鬆編輯、操作與視覺化 SVG 路徑，就使用我們免費的線上工具。透過實時修改路徑指令，完美鍛鍊您的向量圖形！

Path Data

Commands

Preview
Visual Editor
Animation
5

Shape Library

Heart
Star
Arrow
Circle
Square
Triangle
Pentagon
Hexagon

Export Options

轻图神器小程序码

🎨 轻图神器

支持图片压缩、裁剪拼图、去水印，免费图片处理小程序

轻影神器小程序码

🎬 轻影神器

一键去除短视频水印、压缩大小、格式互转小程序

相關工具 (Discover More Editing Tools)

是什麼是 SVG 路徑編輯器？

SVG 路徑編輯器是一個專業用於編輯 SVG 路徑數據的線上工具，同時提供精確且友善的 SVG 路徑編輯與創建功能。這個概念誕生於解決使用者在面對複雜 SVG 路徑指令時所遇到的問題，提供一個完整的視覺化介面來繪製和編輯向量圖形路徑。現在使用者可以使用所有標準的 SVG 路徑指令：M - 移動到，L - 直線到，C - 三次貝澤爾曲線，Q - 二次貝澤爾曲線，A - 椭圓弧，以及 Z - 關閉路徑來建立和繪製美觀且複雜形狀的向量。

SVG 路徑編輯器採用混合式標籤介面，其中一個面板可以讓您深入編輯代碼並純粹玩弄路徑數據，而相鄰的面板則提供即時反饋。它擁有視覺化編輯標籤，用於互動式路徑操作和動畫預覽功能，以及一套完整的預製形狀庫。所有處理都在您的客戶端瀏覽器上進行，以確保完全的隱私和安全；您的 SVG 檔案始終存放在您的設備上，從未在網路上傳輸。

如何使用 SVG 路徑編輯器工具？

  1. 建立或載入路徑數據：您可以從路徑數據文本區域貼上現有的 SVG 路徑，或從形狀庫中選擇形狀開始。或者，您也可以通過工具欄按鈕手動建立路徑。

  2. 使用路徑指令：點擊指令按鈕將不同的指令應用到您的路徑上；每個指令都以不同的方式定義了您的向量繪圖形狀。

  3. 視覺化路徑編輯：前往「視覺化編輯器」標籤，在畫布中自由互動路徑點和把手。拖動點來修改您的路徑形狀！

  4. 樣式化您的路徑：使用樣式控制項來更改填滿顏色、描邊顏色和描邊寬度，以改變外觀。

  5. 動畫化路徑：前往「動畫」標籤進行路徑動畫預覽。您可以調整速度，並按播放、暫停或重置來欣賞動畫。

  6. 導出您的作品：根據需要將您的工作導出為 SVG、PNG、Base64 或 CSS，以在不同的場景中實現您的路徑圖形。

常見問題集

SVG 路徑編輯器支援哪些 SVG 路徑指令？

SVG 路徑編輯器支援所有常見的 SVG 路徑指令，以實現完整的向量編輯。這些包括 M/m（移動到，設置起點）、L/l（直線到，直線）、H/h（水平線）、V/v（垂直線）、C/c（三次貝澤爾曲線）、S/s（平滑三次貝澤爾曲線）、Q/q（二次貝澤爾曲線）、T/t（平滑二次貝澤爾曲線）、A/a（椭圓弧），以及 Z/z（關閉路徑，連接到起點的線）。每個指令都有專門的按鈕，因此使用者不再需要記憶確切的語法來創建複雜的路徑。這種支援確保標準 SVG 路徑數據可以使用來表達任何形狀或設計。

如何使用 SVG 路徑編輯器工具進行視覺化路徑編輯？

您可以通过 SVG 路徑編輯器的直觀「視覺化編輯器」標籤進行視覺化路徑編輯。切換到這個標籤後，您的路徑將作為 SVG 元素渲染，您可以直接拖動控制點和把手。路徑點顯示為紅色圓圈，可以拖動，而貝澤爾曲線把手顯示為橙色點，可以移動來調整曲線形狀。點擊並拖動這些任何元素都將實時修改您的路徑，並立即在路徑數據中反映變化。這種視覺化編輯方法與基於代碼的編輯相輔相成，為使用者提供雙重途徑來精確創建路徑。視覺化編輯器使操作複雜路徑變得對那些可能不熟悉 SVG 路徑指令數學基礎的使用者來說更加易於操作。

是否可以使用 SVG 路徑編輯器工具進行路徑動畫？

是的，可以使用 SVG 路徑編輯器工具通過其專門的「動畫」標籤進行路徑動畫。動畫功能讓您預覽路徑在動畫時的樣子，在處理網絡圖形和 UI 元素時是一個很棒的細節。您可以開始、暫停和重置動畫，並通過滑動條控制動畫速度，範圍從 1 到 10。動畫預覽顯示路徑的逐步繪製，幫助您視覺化最終效果。這個功能適合網絡設計師和開發者，他們想要為他們的網站或應用程序創建動畫 SVG 元素，因為動畫控制讓在實施它們之前簡單地原型設計路徑動畫變得容易。

SVG 路徑編輯器導出選項是什麼？

SVG 路徑編輯器根據使用案例和開發需求提供多種導出選項。路徑可以導出為 SVG 標準，保留所有向量屬性和可縮放性，這對於網站或任何其他向量編輯程序都是必要的。PNG 提供光栅使用，並提供適合演講或不接受向量圖形的系統的光栅。Base64 格式將 SVG 路徑轉換為數據 URI 格式，方便直接將任何圖形嵌入 HTML 或 CSS，而不是使用外部文件。CSS 導出生成 CSS 代碼，您可以使用它來將您的 SVG 路徑作為背景圖像或任何其他基於 CSS 的實現。所有這些導出功能都在您的瀏覽器內部處理您的圖形，因此您的隱私和安全保持完好。

SVG 路徑編輯器中的形狀庫如何工作？

SVG 路徑編輯器帶有一個相當有用的形狀庫，提供即時訪問常見的向量形狀。庫中包含一個預定義元素的列表，包括心形、星星、箭頭、圓形、方形、三角形、五邊形和六邊形。庫的 UI 顯示可用形狀的 8 組項目網格預覽；這使得瀏覽和選擇所需元素非常容易。當您在庫中點擊形狀時，其路徑數據將自動載入到編輯器中，允許您將其作為設計的起點或完成元素使用。這可以節省相當多的時間，因為您不必浪費時間從頭開始手動製作常見形狀。您可以自由地使用編輯器的工具來修改庫中的形狀，包括視覺化編輯器和路徑指令工具欄，這將使您輕鬆地將預建元素定制為您的特定需求。