如何将 SVG 图像“路径”转换为单独的 PNG 图像？答案

【问题标题】：How do you convert an SVG image "paths" into separate PNG images?如何将 SVG 图像“路径”转换为单独的 PNG 图像？
【发布时间】：2009-11-24 04:06:58
【问题描述】：

我有一个包含 67 个独立路径的 SVG 图像。

是否有任何库/教程可以为每个路径创建单独的光栅图像（例如 PNG），并可能根据路径 ID 命名它们？

【问题讨论】：

标签： image-processing svg imagemagick librsvg rsvg

【解决方案1】：

谢谢大家。我最终使用了两个答案的组合。我使用 Ruby 脚本来解析 SVG 文件并为每个路径编写一个新文件，然后使用 batik 转换器从该文件生成一个 png。 Nick 得到了公认的答案，因为创建单个 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

【讨论】：

【解决方案2】：

我不知道有任何库可以直接支持这种确切的工作流程，但这可能是因为至少从表面上看，它看起来非常微不足道。假设您正在谈论顶级 <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 等）都应该是非常简单的。

【讨论】：

我的错...我没有解释所需的输出。我需要输出光栅图像（例如 PNG）...我会修改问题。
我想我还是会照我说的做，然后通过 imagemagick 或类似的东西给他们提供光栅输出。

【解决方案3】：

Apache Batik 库是用于显示和操作 SVG 内容的 Java 库。要生成 PNG 文件，您可以使用它们的 DOM API 将所有路径上的 display 属性设置为 none，但要渲染的路径除外，然后使用它们的 Transcoder API 生成位图。循环遍历 SVG 文档中的所有路径元素，并将 display 属性设置为 inline，同时为每个路径元素生成一个位图。

【讨论】：