如何將SVG圖像「路徑」轉換爲單獨的PNG圖像？

Question

我有一個有67個獨立路徑的SVG圖像。

是否有任何庫/教程可以爲每個路徑創建單獨的柵格圖像（例如PNG），並且可能會根據路徑ID命名它們？

Answer 1

我不知道任何可以直接支持這個確切工作流程的庫，但這可能是因爲至少在表面上它看起來超級平凡。假設您正在討論頂級<path/>節點，那麼這應該可以與任何可以使用XML的庫完成 - 只需直接使用原始XML並忽略此特定文檔是SVG的事實。如果您有：

<svg ...> 
    <path title="a" d="M 100 100 L 300 100 L 200 300 z" stroke-width="3" /> 
    <path title="b" d="M 200 100 L 300 100 L 200 300 z" stroke-width="3" /> 
    <path title="c" d="M 300 100 L 300 100 L 200 300 z" stroke-width="3" /> 
</svg> 

你想：

[a.svg] 
<svg ...> 
    <path d="M 100 100 L 300 100 L 200 300 z" stroke="blue" stroke-width="3" /> 
</svg> 

[b.svg] 
<svg ...> 
    <path d="M 200 100 L 300 100 L 200 300 z" stroke="blue" stroke-width="3" /> 
</svg> 

然後你只需要使用您選擇的語言/庫/工具，並規定了「路徑」節點的路徑，它們吸出來並抓取標題屬性，並將它們複製到一個新文檔中，該文檔將標題作爲文件名共享相同的原始畫布屬性（如果這適合您的情況 - 或將其更改爲您所需的任何內容）。對於任何XML解析器，甚至是最基本的DOM處理API（或者XSLT/XPATH等）來說，這應該是相當簡單的。

Answer 2

Apache Batik庫是用於顯示和操作SVG內容的Java庫。要生成PNG文件，您可以使用它們的DOM API將display屬性設置爲none，除了要渲染的路徑之外的所有路徑，然後使用它們的Transcoder API生成位圖。遍歷SVG文檔中的所有路徑元素，並將display屬性設置爲inline，以便爲每個路徑元素生成一個位圖。

Answer 3

謝謝大家。我最終使用了兩個答案的組合。我使用Ruby腳本來解析SVG文件併爲每個路徑寫一個新的文件，然後蠟染轉換器從該文件生成一個png。接受的答案是尼克，因爲關鍵在於它很容易創建單獨的SVG。謝謝尼克！

這裏的腳本：

require 'rubygems' 
require 'nokogiri' 
file = 'dark_florida_no_numbers.svg' 

file_string = IO.read(file) 

reader = Nokogiri::XML::Reader(file_string) 

reader.each do |node| 

    if node.name == 'path' 
    county = node.attributes['id'] 
    File.open("dark/#{county}.svg", 'w') do |f| 
     f.write "<svg xmlns:svg=\"http://www.w3.org/2000/svg\" xmlns=\"http://www.w3.org/2000/svg\" version=\"1.0\" >\n <path " 
     node.attributes.each do |attr, value| 
     f.write " #{attr}=\"#{value}\"" 
     end 
     f.write "/>\n</svg>" 
    end 
    `java -jar b/batik-rasterizer.jar dark/#{county}.svg` 
    end 
end