gpt4 book ai didi

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

转载 作者:搜寻专家 更新时间:2023-10-31 19:31:18 24 4
gpt4 key购买 nike

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

我想将该 SVG 文件转换为具有嵌入式 base64 数据而不是多个元素的 SVG。有可能用 Batik 做到这一点吗?

我正在从事的项目要求我仅使用 Java 库。

最佳答案

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

  1. 序列化要嵌入的 SVG,并对它进行 URL 编码。
  2. 然后在 SVG 使用元素的 xlink:href 属性中使用 URL 编码字符串作为数据 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。

关于java - 从另一个带有元素的 svg 图像创建一个带有嵌入 base64 字符串的 SVG 图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3453482/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com