从另一个带有元素的 svg 图像创建一个嵌入 base64 字符串的 SVG 图像答案

【问题标题】：create an SVG image with embedded base64 string from another svg image with elements从另一个带有元素的 svg 图像创建一个嵌入 base64 字符串的 SVG 图像
【发布时间】：2011-03-28 01:52:46
【问题描述】：

我有一个包含多个元素（如路径、圆形、矩形等）的 SVG 文件。

我想将该 SVG 文件转换为嵌入了 base64 数据而不是多个元素的 SVG。蜡染可以做到这一点吗？

我正在进行的项目要求我只使用 Java 库。

【问题讨论】：

标签： java svg batik

【解决方案1】：

我曾使用一种技术在 Blogger 帖子中嵌入 SVG 图像这可能适用于此。基本上，这是一个两步过程：

序列化要嵌入的 SVG，并对其进行 URL 编码。
然后，您可以使用 URL 编码的字符串作为 SVG 使用元素的 xlink:href 属性中的数据 URI。

这是一个我用 Batik 测试过的工作示例。假设您要嵌入以下 SVG 文档 circle.svg：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="4in" height="4in" id="the_svg"
     viewBox="0 0 4 4" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
    <circle cx="1" cy="1" r="1" fill="blue" stroke="none" id="the_circle"/>
</svg>

您可以通过将其路径传递给以下小型 Rhino 脚本来对其进行 URL 编码：

#!/usr/bin/env rhino
print(escape(readFile(arguments[0])))

当然，如果您想在 Java 中以编程方式执行此操作，那么您将需要一种特定于 Java 的方法来序列化 SVG 文档并对字符串进行 URL 编码。

这会将文档作为 URL 编码的字符串提供给您：

%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%0A%20%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0A%3Csvg%20width%3D%224in%22%20height%3D%224in%22%20id%3D%22the_svg%22%0A%20%20%20%20%20viewBox%3D%220%200%204%204%22%20version%3D%221.1%22%0A%20%20%20%20%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%09%3Ccircle%20cx%3D%221%22%20cy%3D%221%22%20r%3D%221%22%20fill%3D%22blue%22%20stroke%3D%22none%22%20id%3D%22the_circle%22/%3E%0A%3C/svg%3E%0A%0A

然后您可以通过在数据 URI 中使用该文档来嵌入该文档，如下所示：

data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%0A%20%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0A%3Csvg%20width%3D%224in%22%20height%3D%224in%22%20id%3D%22the_svg%22%0A%20%20%20%20%20viewBox%3D%220%200%204%204%22%20version%3D%221.1%22%0A%20%20%20%20%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%09%3Ccircle%20cx%3D%221%22%20cy%3D%221%22%20r%3D%221%22%20fill%3D%22blue%22%20stroke%3D%22none%22%20id%3D%22the_circle%22/%3E%0A%3C/svg%3E%0A%0A

例如，以下 HTML 文档使用对象标记和数据 URI 来嵌入 SVG 文档：

<html>
    <head>
    </head>
    <body>
        <object data="data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%0A%20%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0A%3Csvg%20width%3D%224in%22%20height%3D%224in%22%20id%3D%22the_svg%22%0A%20%20%20%20%20viewBox%3D%220%200%204%204%22%20version%3D%221.1%22%0A%20%20%20%20%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%09%3Ccircle%20cx%3D%221%22%20cy%3D%221%22%20r%3D%221%22%20fill%3D%22blue%22%20stroke%3D%22none%22%20id%3D%22the_circle%22/%3E%0A%3C/svg%3E%0A%0A" width="400" height="400"></object>
    </body>
</html>

您可以对 SVG 'use' 元素的 xlink:href 属性做同样的事情，但需要注意的是：引用完整文档是非法的。相反，您需要通过 id 引用文档中的元素，并且该元素将被深度克隆到 SVG 宿主文档中。在此示例中，SVG 文档根元素由其 id “the_svg”引用（注意 URI 末尾的井号标签）。

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="4in" height="4in" id="the_svg"
     viewBox="0 0 4 4" version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <use x="0" y="0" width="4" height="4" xlink:href="data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%0A%20%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0A%3Csvg%20width%3D%224in%22%20height%3D%224in%22%20id%3D%22the_svg%22%0A%20%20%20%20%20viewBox%3D%220%200%204%204%22%20version%3D%221.1%22%0A%20%20%20%20%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%09%3Ccircle%20cx%3D%221%22%20cy%3D%221%22%20r%3D%221%22%20fill%3D%22blue%22%20stroke%3D%22none%22%20id%3D%22the_circle%22/%3E%0A%3C/svg%3E%0A%0A#the_svg"/>
</svg>

仅供参考，这在 Batik 1.7 中运行良好（在 Squiggle 浏览器中测试），但不适用于 Chromium 或 Firefox。

【讨论】：

一个 svg“图像”标签也可以代替“使用”。在这种情况下，您不需要通过 URL 中的 id 来引用根元素。
太棒了！那么，您可能应该将此答案标记为正确。