提取合並 svg 文件中的 path

需求背景

有一個 svg 文件，但只需要里面的 path 數據，並且最好是合並的 path。

工具

GIMP GIMP - Downloads

除了可以提取 path 之外，還可以輔助修改圖片的尺寸。

Step 1 打開 svg 文件

Step 2 調整大小，選擇導入路徑

在打開 svg 文件的彈窗中，完成大小的調整，並選擇導入路徑。

2.1 調整大小

將寬度和高度的較大者，調整成符合需求的大小。如需要的是 32*32 的圖片，這里將寬度調整為 32，按 Enter 或者失去焦點確認。高度會自動變化。

2.2 導入路徑
選擇 “導入路徑” 和 “合並導入的路徑”

Step 3 導出 path

在窗口中，打開路徑操作窗口

選中導入的路徑，鼠標右鍵，選擇導出路徑

導出的也是一個 svg 文件

Step 4 提取 path

使用文本編輯器打開導出的文件，即可得到合並之后的 path 數據。

上圖屬性 d 中的數據，M 13.79,8.79 C ... ... 就是 path 數據了。

參考

html - is there a tool to create SVG paths from an SVG file? - Stack Overflow

其它工具：

dotnet-campus/dotnetCampus.SvgPathCombiner: A tool to convert svg to xaml and combine all the paths into a single one. 將 SVG 轉換成 XAML 的工具，也可以將 SVG 中所有的路徑合並成一個路徑。