使用带有元素的另一个svg图像创建一个带有嵌入式base64字符串的SVG图像 [英] create an SVG image with embedded base64 string from another svg image with elements
问题描述
我有一个SVG文件，其中包含多个元素（如路径，圆形，矩形等）。
I have an SVG file that contains several elements (like path, circles, rectangles, etc.).
我想将SVG文件转换为带有嵌入式base64数据而非多个元素的SVG。是否有可能用Batik做到这一点？
I'd like to convert that SVG file to an SVG with embedded base64 data instead of multiple elements. is it possible to do that with Batik?
我正在研究的项目要求我只使用Java库。
The project I'm working on requires I use Java libraries only.
推荐答案
我曾经使用过一种技术在Blogger帖子中嵌入SVG图像
可能对此有用。基本上，这是一个两步过程：
There's a technique which I've used to embed SVG images in Blogger posts which might work for this. Basically, it's a two-step process:
- 您序列化要嵌入的SVG，并对其进行URL编码。
- 然后使用URL编码的字符串作为SVG使用元素的xlink：href属性中的数据URI。
这是我用Batik测试过的一个工作示例。假设您要嵌入以下SVG文档，circle.svg：
Here's a working example that I've tested with Batik. Say that you want to embed the following SVG document, 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编码：
You can URL-encode it by passing its path to the following small Rhino script:
#!/usr/bin/env rhino
print(escape(readFile(arguments[0])))
当然，如果你想在Java中以编程方式执行此操作，那么你需要一个特定于Java的方法序列化SVG文档并对字符串进行URL编码。
Of-course, if you want to do this programmatically in Java, then you'll need a Java-specific method of serializing the SVG document and URL-encoding the string.
这将文档作为URL编码的字符串：
This gives you the document as a URL-encoded string:
%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中使用它来嵌入此文档，如下所示：
You can then embed this document by using it in a data URI, which looks like this:
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文档：
For example, the following HTML document uses an object tag and the data URI to embed the SVG document:
<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文档根元素由其idthe_svg引用（请注意URI末尾的哈希标记）。
You can do the same thing with the xlink:href attribute of an SVG 'use' element, with one caveat: it's illegal to reference a full document. Instead, you need to reference an element in the document by its id, and that element will be deep-cloned into the SVG host document. In this example, the SVG document root element is reference by its id "the_svg" (note the hash tag at the end of 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 。
FYI, this works well in Batik 1.7 (tested in the Squiggle browser), but not Chromium or Firefox.
这篇关于使用带有元素的另一个svg图像创建一个带有嵌入式base64字符串的SVG图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
