Java 从另一个包含元素的SVG图像创建一个嵌入base64字符串的SVG图像_Java_Svg_Batik

Java 从另一个包含元素的SVG图像创建一个嵌入base64字符串的SVG图像

java svg

Java 从另一个包含元素的SVG图像创建一个嵌入base64字符串的SVG图像,java,svg,batik,Java,Svg,Batik,我有一个SVG文件，其中包含几个元素（如路径、圆、矩形等）我想将该SVG文件转换为带有嵌入式base64数据的SVG，而不是多个元素。用蜡染可以吗我正在从事的项目要求我只使用Java库。有一种技术我曾用于在博客帖子中嵌入SVG图像这可能对这个有用。基本上，这是一个两步过程：将要嵌入的SVG序列化，并对其进行URL编码然后使用URL编码的字符串作为SVG use元素的xlink:href属性中的数据URI 这里有一个我用蜡染测试过的工作示例。假设要嵌入以下SVG文档circle.SVG：

我有一个SVG文件，其中包含几个元素（如路径、圆、矩形等）

我想将该SVG文件转换为带有嵌入式base64数据的SVG，而不是多个元素。用蜡染可以吗

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

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

将要嵌入的SVG序列化，并对其进行URL编码

然后使用URL编码的字符串作为SVG use元素的xlink:href属性中的数据URI

这里有一个我用蜡染测试过的工作示例。假设要嵌入以下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>

当然，如果您想在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末尾的哈希标记）引用

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

svg“image”标记也可以替代“use”。在这种情况下，您不需要通过URL中的根元素id来引用它。太好了！那么，你可能应该把这个答案标记为正确。

<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>

<?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>