開發者工具 / 28

線上SVG向量編輯器與繪圖工具

以視覺化介面或即時SVG XML程式碼繪製、設定樣式、排列圖層並編輯SVG向量圖形。

線上SVG向量編輯器與繪圖工具: 在SVG畫布上繪製矩形、圓形、橢圓形、直線、路徑與文字。移動物件、變更填色、筆畫與不透明度,並排列圖層。您也可以匯入SVG,或在「程式碼」分頁中編輯其標記程式碼,接著下載SVG或PNG,或複製SVG文字。 全程在瀏覽器中於本機執行,檔案不會上傳至伺服器。

使用次數
在瀏覽器中
費用
免費・免註冊
可用狀態
可立即使用
新增圖形:
背景:
TOEA SVG Editor

元素檢查器與樣式

rect (rect_1)
圖層操作
圖層(3)
text (text_1)
circle (circle_1)
rect (rect_1)

繪製形狀、路徑與文字

新增矩形、圓形、橢圓、線條、星形、三角形、愛心、路徑或文字。選取物件後,可以變更填色、筆畫顏色、筆畫寬度和不透明度,也可以使用圖層控制項複製、刪除及重新排列物件。畫布設定可調整繪圖尺寸和背景。

在畫布上移動路徑,並透過「程式碼」分頁編輯其形狀。M、L和C等路徑指令會描述移動、線條和曲線。這不是視覺化節點編輯器:沒有可拖曳的曲線控制點。離開程式碼欄位時,編輯後的XML才會套用。

匯出與匯入限制

SVG會保留向量形狀和可編輯文字;PNG則會以畫布尺寸將繪圖點陣化。複製標記後,可取得SVG文字,並在網頁或其他編輯器中使用。文字不會轉為外框,因此顯示效果取決於開啟檔案的位置是否有可用字型。

匯入的檔案會縮減為支援的基本形狀、路徑和文字。漸層、濾鏡、裁切、嵌入圖片和群組行為不會完整保留。請保留原始檔案,並在匯出替代檔案前比較匯入後的繪圖。

使用方式

  1. 新增矩形、圓形、橢圓形、直線、星形、路徑或文字,並拖曳到適當位置。
  2. 設定填色、筆畫、不透明度、圓角半徑與圖層順序。
  3. 下載SVG或PNG,或複製標記程式碼。

隱私與限制

繪圖不會離開您的瀏覽器——不會上傳、不會自動儲存,也沒有伺服器。關閉分頁後繪圖就會遺失,因此請在離開前下載檔案。

相關工具

常見問題

可以繪製和編輯路徑嗎?

您可以新增路徑、在畫布上移動路徑,並變更其填色與筆畫。在「程式碼」分頁中編輯路徑指令即可變更形狀;目前沒有視覺化控制點編輯器。離開文字欄位後,程式碼變更才會套用。

可以新增文字和簡單圖形嗎?

可以。您可以從工具列新增矩形、圓形、橢圓形、直線、星形、三角形、愛心、路徑或文字。文字提供內容與字型大小設定。您可以對齊、複製、刪除及重新排列物件,也可以變更填色、筆畫顏色、筆畫寬度與不透明度。

可以匯出哪些檔案?

下載SVG即可保留向量圖形與可編輯文字,或下載PNG,以畫布尺寸輸出點陣圖。您也可以複製SVG標記程式碼。文字不會轉換成外框。

免費工具・使用在瀏覽器中次・免註冊