创建一个SVG图像嵌入base64字符串从另一个svg图像与元素

我有一个SVG文件，其中包含几个元素（如路径，圆形，矩形等）。创建一个SVG图像嵌入base64字符串从另一个svg图像与元素

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

我正在处理的项目需要我仅使用Java库。

2010-08-10 Olivier

有一种技术，我用它来嵌入SVG图像在博客可能适用于此。基本上，这是一个两步过程：

您序列化您要嵌入的SVG，并对其进行网址编码。
然后，您使用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>

可以进行URL编码通过将其路径以下小犀牛脚本吧：

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

中，当然，如果你想以Java编程的方式来完成这个工作，那么你需要一个Java专用的方法来序列化SVG文档并对字符串进行URL编码。

这给你的文档作为一个URL编码的字符串：

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

为：

%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，它看起来像这样使用它嵌入此文件例如，以下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。

来源

2010-08-10 22:04:36 jbeard4

svg“image”标签也可以代替“use”使用。在这种情况下，你不需要通过URL中的id来引用根元素。 – jbeard4 2010-08-10 22:12:21

谢谢，我试过了，效果很好。 – Olivier 2010-08-13 14:35:01

太棒了！那么你应该把这个答案标记为正确的。 – jbeard4 2010-08-13 21:00:53

创建一个SVG图像嵌入base64字符串从另一个svg图像与元素

回答

相关问题