創建一個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圖像與元素

回答

相關問題